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

Question

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

下面的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>

事实上，单元格的宽度不符合预期（根据评论），我将在稍后调查，我的主要问题是有三个额外的列，一个在每个预期的列之前。

在检查网格时，我可以看到一些线条是平的，而其他线条是虚线的（我不确定这是否是某些东西的指示）：

空白是否是额外的列？

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

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中使用了无效的注释形式。这导致语法错误。

问题在这里解释：

• 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是不必要的。

另外，正如@vals在评论中提到的那样，你有 换行符。

关于网格的一个很好的资源是在CSS Tricks。