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

Question

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

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

到目前为止，我有这个...

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用以下解决方案，使用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>

Answer 2

由于您将网格项限制为100px宽度 - 您最初可以设置具有该宽度的列并将其从项目样式中删除。

此外，为了证明这些项目的合理性，您可以使用：justify-content: space-between;

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

＆＃13;

＆＃13;

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

.griditem1 {
  background: teal;
}

.griditem2 {
  background: tan;
}

.griditem3 {
  background: wheat;
}

.griditem4 {
  background: grey;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

CSS Grid至少有两个简单明了的选项。

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>