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

问题描述 投票:3回答:2

我正在学习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>

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

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

enter image description here

空白是否是额外的列?

  • 如果是的话:他们来自哪里?
  • 如果不是:它们是某种填充,为什么列不占用所有可用空间呢?
css css3 css-grid
2个回答
0
投票

在您的容器代码中:

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

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

你可能想要适用于网格容器的grid-template-rowsgrid-auto-rows

此外,在编辑问题之前,您在CSS中使用了无效的注释形式。这导致语法错误。

问题在这里解释:


0
投票

#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在评论中提到的那样,你有&nbsp;换行符。

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

© www.soinside.com 2019 - 2024. All rights reserved.