使用正当内容属性的网格项的意外行为

Question

在css-技巧完整-指南-到css-网格中，它描述了如下的证明内容属性：

调整内容有时网格的总大小可能小于其网格容器的大小。如果您的所有网格项都使用非柔性单元（如px）调整大小，则可能会发生这种情况。在这种情况下，可以在网格容器中设置网格的对齐方式。此特性沿内联（行）轴对齐栅格（与沿块（列）轴对齐栅格的对齐内容相反）。

我在想这是怎么回事。如果我有一个宽度为100%的网格容器和固定宽度为宽度为20px的网格项目，并且我将网格容器设置为对齐项目：开始网格项目将按预期对齐开始。但是，如果我将网格容器设置为`网格模板列：repeat（4，1fr），那么这些项就不再从一开始就对正了？即使物品的尺寸是非弹性的？

根据CSS-技巧的描述，我会期望他们证明行轴的开始？

.wrapper{
width: 100%;
height: 100vh;
}

.grid{
display: grid;
grid-auto-flow: column;
justify-content: start;
align-content: start;
width: 100%;
padding: 1em;
background-color: powderblue;
}

.grid.explicit{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.grid__item{
width: 20px;
padding:0.6em;
background-color: lime;
}

<div class="wrapper">
Explicit columns
<pre>
grid-template-columns: 1fr 1fr 1fr 1fr;
</pre>
<div class="grid explicit">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
Implicit columns
<div class="grid">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>

Answer 1

根据规范

如果网格的外边缘与网格容器的内容边缘不对应（例如，如果没有列是弹性大小的），则网格轨迹将根据网格容器上的“对齐内容”和“对齐内容”属性在内容框内对齐。

因此，如果任何列使用的是1fr，justify content是无用的。

使用简单的词语：您的网格容器包含的轨道（列）的大小是基于greg-tement-栏位或自动。当使用1fr 1fr 1fr时，您定义4个相等的轨道，占用所有可用的空间。没有空闲空间，所以没有什么要对齐的，因为risge-Content对齐的是列，而不是列中的项（等于20px）。

当您不定义任何大小时，列将根据其内容自动调整大小，在这种情况下，您将拥有大小等于20px的轨道，其中的项也等于20px。在这种情况下，证明内容将对齐您的列。

值得注意的是，默认对齐是拉伸的，所以在第二种情况下，如果您省略了prive-Content，您的自动大小的列将被拉伸以平均填充所有空间，从而具有与1fr相似的行为。

为了更好地理解，这里有一些例子：

css prettyprint-override">.grid {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  margin: 1em;
  background-color: powderblue;
}

.grid__item {
  width: 20px;
  padding: 0.6em;
  background-color: lime;
}

4 equal columns
<div class="grid" style="grid-template-columns: 1fr 1fr 1fr 1fr">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
4 equal columns having 100px width (we have free space)
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>

we align the items inside the columns
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;justify-items:center">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
we move the columns to the end
<div class="grid" style="grid-template-columns: 100px 100px 100px 100px;
  justify-content: end;justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
We make the column auto sized (nothing to align inside them)
<div class="grid" style="justify-items:center">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>
<div class="grid" style="justify-items:end">
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
  <div class="grid__item">item</div>
</div>