以固定宽度的列在CSS网格中居中

Question

我正在尝试制作一个简单的CSS居中网格布局。我知道当我使用justify-items: center时，网格容器内的项目应该水平对齐，但是当我以grid-template-columns: repeat(3, 100px)这样的像素指定列宽时，整个网格将恢复正常。那么，有什么方法可以使网格项居中，但同时指定以像素为单位的列宽？这是我的示例：

    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>

.container {
    background-color: #aa96da;
    display: grid;
    justify-items: center;
    grid-gap: 20px;
    grid-template-rows: repeat(3, 1fr);

    /*Only if I change this 100px to '1fr' the justify-items will work */
    grid-template-columns: repeat(3, 100px);
}

.item {
    width: 100px;
    height: 100px;
    background-color: green;
}

Answer 1

将justify-items更改为justify-content，它应该可以工作。

.container {
    background-color: #aa96da;
    display: grid;
    /* justify-items: center; */
    justify-content: center;
    grid-gap: 20px;
    grid-template-rows: repeat(3, 1fr);

    /*Only if I change this 100px to '1fr' the justify-items will work */
    grid-template-columns: repeat(3,  100px);
}

.item {
    width: 100px;
    height: 100px;
    background-color: green;
}

 <div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Answer 2

简短回答：您要justify-content而不是justify-items

.container {
  background-color: #aa96da;
  display: grid;
  justify-content: center; /* -items to -content */
  grid-gap: 20px;
  grid-template-rows: repeat(3, 1fr);
  /*Only if I change this 100px to '1fr' the justify-items will work */
  grid-template-columns: repeat(3, 100px);
}

.item {
  width: 100px;
  height: 100px;
  background-color: green;
}

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

---

长回答：

网格项目与其所居住的空间之间存在差异。

[定义网格时，您仅定义了名为tracks的网格的行/列，而没有实际定义每个元素的位置等。

DOM元素仅遵循网格的流动并进行相应放置，我们可以使用grid-column grid-row]之类的属性进行更改>

您可以这样看：

如您所见，有The Grid container，The Grid，The Columns，The Rows，然后是The Grid items。

Grid项位于两个名为The Grid Area的交点中（这使CSS网格在某些方面优于flexbox）

并且justify-items在该区域内对齐网格项目。

---

所以grid-template-columns: repeat(3, 1fr);这意味着3列的宽度是在它们之间均匀划分的网格的宽度。

Demo

不要只看预览的代码

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

[grid] {
  height: 300px;
  display: flex;
  border: 2px solid;
  padding: 10px;
  flex-wrap: wrap;
}

[column] {
  flex: 1 0 calc(100% / 3);
  border: 2px solid;
  display: flex;
  flex-direction:column;
  align-items:center;
  
}

[column]>div {
  width: 100px;
  flex:1;
  background-color: green;
}
<div grid>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
  <div column>
    <div>Grid Item</div>
  </div>
</div>

如您所见，网格列比网格项目100px宽，这意味着有空间将物料居中，因此justify-items: center;将其居中。

这就是为什么它看起来像网格居中的原因，但是实际上这不是为什么更改为grid-template-columns: repeat(3, 100px);会破坏它的原因。

---

[在grid-template-columns: repeat(3, 100px);的情况下

Demo

不要只看预览的代码

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

[ctr] {
  border: 2px solid;
  padding: 10px;
}

[grid] {
  height: 300px;
  width: 340px;
  display: flex;
  padding: 10px;
  flex-wrap: wrap;
}

[column] {
  flex: 0 0 100px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  align-items: center;
}

[column]>div {
  width: 100px;
  flex: 1;
  background-color: green;
}
<div ctr>
  <div grid>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
    <div column>
      <div>Grid Item</div>
    </div>
  </div>
</div>

如您所见，列的宽度等于网格项目的宽度，因此它们都紧贴在列内，并且网格仍然为空。