我需要显示任意数量的grid-template-columns.
我已经尝试过grid-template-columns: repeat(auto-fill, 100px),但这会包装超出其父级宽度的所有行。
设置一个大的上限,如:grid-template-columns: repeat(999, 100px),有效,但似乎应该有更好的方法。
这是我正在使用的示例: https: //codepen.io/anon/pen/BJbvEG
.grid-1 {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
width: 300px;
border: 1px solid #000;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(999, 100px);
width: 300px;
border: 1px solid #000;
overflow: auto;
}
.column {
display: grid;
grid-template-rows: repeat(12, 1fr);
}Run Code Online (Sandbox Code Playgroud)
<h3>Auto-fill takes an arbitrary number, but wraps. </h3>
<div class="grid-1">
<div class="column">
<div>one</div>
<div>two</div>
<div>three</div>
<div>four</div>
<div>five</div>
<div>six</div>
<div>seven</div>
<div>eight</div>
<div>nine</div>
<div>ten</div>
<div>eleven</div>
<div>twelve</div>
</div>
<div …Run Code Online (Sandbox Code Playgroud)