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

Question

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

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

到目前为止我有这个..

.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

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

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

此外，为了证明项目的合理性，您可以使用：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 */
}

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

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

您至少有两个简单明了的 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-column-gap 和 grid-row-gap 属性。两者的 shorthand 都是 grid-gap。这些属性允许您创建 space between 网格项。它们不以项目和容器之间的 space 为目标。同样，它们仅在项目之间起作用（即排水沟）。

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

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

Equal space between grid items with first and last pinned to container edges

html

css

css-grid

1。 `justify-content: space-between`

2。 `grid-column-gap` 或 `grid-gap`

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

Equal space between grid items with first and last pinned to container edges

html

css

css-grid

1。 justify-content: space-between

2。 grid-column-gap 或 grid-gap

1。 `justify-content: space-between`

2。 `grid-column-gap` 或 `grid-gap`