css - 使用 justify-content 属性的网格项目的意外行为

Question

在 css-tricks complete-guide-to-css-grid 中，它描述了 justify-content 属性，如下所示：

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

我试图弄清楚这是如何工作的。如果我有一个width: 100%带有固定宽度的网格容器和网格项目，width: 20px并且我将网格容器设置为justify-items: start网格项目，那么正如预期的那样，开始时是合理的。但是，如果我将网格容器设置为 `grid-template-columns: repeat(4, 1fr) 那么这些项目不再适合开始？即使这些项目的尺寸是非灵活的单位？

根据 css-tricks 描述，我希望他们能够证明行轴的开头？

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

标签： csscss-grid

Answer 1

从规范

如果网格的外边缘不对应于网格容器的内容边缘（例如，如果没有列是 flex-sized），则网格轨道根据网格上的 justify-content 和 align-content 属性在内容框内对齐容器。

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

使用简单的话：您的网格容器包含基于grid-template-columns或自动调整大小的轨道（列）。使用时1fr 1fr 1fr 1fr您定义 4 个相等的轨道占用所有可用空间。没有可用空间，所以没有什么可以对齐的，因为justify-content对齐列而不是其中的项目（等于 20px）。

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

值得注意的是，默认对齐方式是拉伸，因此在第二种情况下，如果您省略justify-content，您的自动调整大小的列将被拉伸以平均填充所有空间，从而具有与1fr.

为了更好地理解，这里有一些说明：

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