我试图弄清楚我想用css网格实现的目标是否可行。我已经“设计”了一个固定行大小为100px的网格。 grid-auto-rows: 100px
但如果我添加需要两行或更多行的文本,则行会崩溃。我必须设置grid-row: auto / span 2
。
有没有办法让它自动化?因此,css网格将使其跨越1,2或3行等。我尝试使用grid-auto-flow: row
,但感觉这是默认值,这不会做的伎俩?
我创建了一个codepen,您可以进去查看一下。
从
更改代码.fixed-grid .blue {
grid-row: auto/span 2;
}
到
.fixed-grid .blue {
grid-row: auto/span 1;
}