网格项目之间的间距相等，第一个和最后一个固定到容器边缘

Question

我正在尝试使用 CSS Grid 创建一个网格，其中第一个项目左对齐，没有左边距，最后一个项目右对齐，没有边距，并且所有项目之间的间距相等。

如何更改第一个和最后一个项目的对齐方式，但保持其余项目之间的距离相等？

到目前为止我有这个..

.gridcontainer {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  text-align: center;
  background: yellow;
}

.griditem1 {
  background: teal;
  width: 100px;
  margin: auto;
}

.griditem2 {
  background: tan;
  width: 100px;
  margin: auto;
}

.griditem3 {
  background: wheat;
  width: 100px;
  margin: auto;
}

.griditem4 {
  background: grey;
  width: 100px;
  margin: auto;
}

<div class="gridcontainer">
  <div class="griditem1">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 1</p>
  </div>
  <div class="griditem2">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 2</p>
  </div>
  <div class="griditem3">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 3</p>
  </div>
  <div class="griditem4">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 4</p>
  </div>
</div>

Answer 1

CSS 网格至少有两个简单干净的选项。

1.justify-content: space-between

该justify-content属性可以在网格布局中使用，就像在 Flex 布局中一样。

.gridcontainer {
  display: grid;
  grid-template-columns: repeat(4, 100px);
  justify-content: space-between;
  text-align: center;
  background: yellow;
}

.griditem1 { background: teal; }
.griditem2 { background: tan; }
.griditem3 { background: wheat; }
.griditem4 { background: grey; }

<div class="gridcontainer">
  <div class="griditem1">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 1</p>
  </div>
  <div class="griditem2">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 2</p>
  </div>
  <div class="griditem3">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 3</p>
  </div>
  <div class="griditem4">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 4</p>
  </div>
</div>

2.grid-column-gap或grid-gap

CSS Grid 提供了grid-column-gap和grid-row-gap属性。两者的简写都是grid-gap. 这些属性允许您在网格项之间创建空间。它们不针对物品和容器之间的空间。同样，它们仅在项目之间（即排水沟）起作用。

.gridcontainer {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 2em;
  text-align: center;
  background: yellow;
}

.griditem1 { background: teal; }
.griditem2 { background: tan; }
.griditem3 { background: wheat; }
.griditem4 { background: grey; }

<div class="gridcontainer">
  <div class="griditem1">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 1</p>
  </div>
  <div class="griditem2">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 2</p>
  </div>
  <div class="griditem3">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 3</p>
  </div>
  <div class="griditem4">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 4</p>
  </div>
</div>

Answer 2

您可以使用以下解决方案，使用 Flexbox：

div.gridcontainer{
  background:yellow;
  display:flex;
  justify-content:space-between;
  text-align:center;
}
div.gridcontainer > div {
  width:100px;
}
.griditem1 {background:teal;}
.griditem2 {background:tan;}
.griditem3 {background:wheat;}
.griditem4 {background:grey;}

<div class="gridcontainer">
  <div class="griditem1">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 1</p>
  </div>
  <div class="griditem2">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 2</p>
  </div>
  <div class="griditem3">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 3</p>
    <div>Test</div>
  </div>
  <div class="griditem4">
    <img src="https://dummyimage.com/100x100/000000/fff">
    <p>Grid Item 4</p>
  </div>
</div>