我正在学习CSS Grid并尝试重现一些弹性行为(我知道两者都是互补的,这是一个学习练习)。
下面的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>
事实上,单元格的宽度不符合预期(根据评论),我将在稍后调查,我的主要问题是有三个额外的列,一个在每个预期的列之前。
在检查网格时,我可以看到一些线条是平的,而其他线条是虚线的(我不确定这是否是某些东西的指示):
空白是否是额外的列?
在您的容器代码中:
#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中使用了无效的注释形式。这导致语法错误。
问题在这里解释:
#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。