使用 CSS Grid,当您不知道会有多少个子项时,如何将所有子项保留在一行中?
我需要所有的 child 都有平等的width
,因此,如果有 2 个子级,则每个子级将具有 50% 的宽度,如果有 3 个子级,则每个子级将获得 33.33% 的宽度,依此类推。
.container {
display: grid;
}
<div class='container'>
<div>Child 1</div>
<div>Child 2</div>
<div>Child 3</div>
// There maybe 4 or 5 children we don't know
</div>
最佳答案
使用柱流并保留所有尺寸1fr
.grid {
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow:column;
}
.grid > div {
background-color: tomato;
height: 50px;
border: 1px solid black;
}
Example 1:
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
Example 2:
<div class="grid">
<div></div>
<div></div>
</div>
Example 3:
<div class="grid">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
关于CSS 网格 - 将所有子项保持在一行且间距相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66385170/