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

Question

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

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

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

/* 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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

细胞的宽度不符合预期（根据评论）是我稍后会研究的事实，我的主要问题是有三个额外的列，一个在每个预期的列之前

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

空白是否是额外的列？

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

Answer 1

#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。

Answer 2

在您的容器代码中：

#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?