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

Question

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

下面的 flex 示例允许div堆叠未定义数量的s（未定义，因为它们的数量不会影响 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

\r\n

\r\n

#grid {\r\n  height: 100px;\r\n  display: grid;\r\n  grid-auto-flow: column;\r\n  grid-auto-columns: max-content; \r\n}\r\n\r\n#grid > div {\r\n  background-color: lime;\r\n}

\r\n

<div id="grid">\r\n\xc2\xa0 <div>a</div>\r\n  <div>b</div>\r\n  <div>c</div>\r\n</div>

\r\n

\r\n

\r\n

\n\n

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

\n\n

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

\n\n

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

\n