为什么在使用 grid-auto-flow 时 CSS Grid 中会添加额外的列？

Question

我正在学习 CSS Grid 并尝试重现一些 flex 行为（我知道两者是互补的，这是一个学习练习）。

下面的 flex 示例允许堆叠未定义数量的 divs（未定义，因为它们的数量不会影响 CSS 部分）

#flex {
  height: 100px;
  display: flex;
  flex-direction: row;
}

#flex > div {
  background-color: blue;
}

<div id="flex">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

我尝试将其移植到 CSS Grid 实现：

/* updated with correct comment delimiters, thanks @vals */

#grid {
  height: 100px;
  display: grid;
  grid-auto-flow: column;  /* when something has to be added, be it a column */
  grid-auto-columns: fit-content; /* when a new column is added, its size will be driven by the content. Unfortunately this does not work yet but never mind for now */
  grid-row: auto; /* one row, auto-sized */
}

#grid > div {
  background-color: lime;
}

<div id="grid">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

单元格的宽度不符合预期（每个 cmets）这一事实是我稍后会调查的，我的主要问题是有三个额外的列，在每个预期的列之前一个强>。

在检查网格时，我可以看到有些线条是平淡的，而另一些则是点状的（我不确定这是否表明某种东西）：

空白是额外的列吗？

• 如果是：它们来自哪里？
• 如果不是：它们是某种填充，那么为什么列不占用所有可用空间？

Answer 1

在您的容器代码中：

#grid {
  height: 100px;
  display: grid;
  grid-auto-flow: column;  
  grid-auto-columns: fit-content; 
  grid-row: auto;
}

grid-row 规则无效。此属性仅适用于网格项。

您可能需要grid-template-rows 或grid-auto-rows，它们适用于网格容器。

另外，在编辑您的问题之前，您在 CSS 中使用了无效形式的 cmets。这导致了语法错误。

问题在这里解释：

• Why are some of my CSS rules not working?

Answer 2

#grid {
  height: 100px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content; 
}

#grid > div {
  background-color: lime;
}

<div id="grid">
  <div>a</div>
  <div>b</div>
  <div>c</div>
</div>

在grid-auto-columns: fit-content;，您可能指的是最大内容。 grid-row 是不必要的。

此外，正如 cmets 中的 @vals 所述，您有   换行符。

阅读网格的好资源是CSS Tricks。