我有一个包含一些链接的CSS网格。这是一个三列网格,行数取决于项目数量。
最好让每列中的项目数量均匀分配。 列数和行数由以下代码设置:
我如何在网格中保持三栏,让它按列流动而不是按行流动,并在需要时自动生成这些行?
最好让每列中的项目数量均匀分配。 列数和行数由以下代码设置:
grid-template-columns: repeat(3, 1fr);
//将其变为三列宽度grid-template-rows: repeat(auto-fill);
//自动生成新的行
这很完美,除了当我尝试按列流动而不是行时:grid-auto-flow: column;
//这会破坏它。
Example:
.container {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(auto-fill);
/*grid-auto-flow: column;*/
}
a {
height: 50px;
}
<div class="container">
<a href="#">item one</a>
<a href="#">item two</a>
<a href="#">item three</a>
<a href="#">item four</a>
<a href="#">item fuve</a>
<a href="#">item six</a>
<a href="#">item seven</a>
<a href="#">item eight</a>
<a href="#">item nine</a>
<a href="#">item ten</a>
<a href="#">item eleven</a>
<a href="#">item twelve</a>
<a href="#">item thirteen</a>
<a href="#">item fourteen</a>
<a href="#">item fifteen</a>
</div>
grid-row-gap
规则。 - s.kuznetsov