我试图获得某种“动态”列取决于项目的数量。
容器可以有1到4个项目。如果有1-3个项目，我希望列数是3个，如果有4个项目，我希望列数是4个。
这是我现在有的，它工作很好，如果有1-3个项目，但如果有4个项目，然后最后一个去下一行。如果我有grid-template-columns:repeat(4,1fr)；，当只有4个项目时，这会很好地工作。
有可能用CSS实现这一点吗？
多谢了。
null
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(3, 1fr);
border: 1px solid #c1c1c1;
border-radius: 5px;
padding: 5px;
}
.container > div {
height: 100px;
border: 1px solid #010101;
border-radius: 5px;
}<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>null
不使用您使用grid-template-columns定义的显式列，而是使用网格根据需要自动创建的隐式列。
null
.container {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
grid-auto-columns: 1fr;
grid-auto-rows: 100px;
border: 1px solid #c1c1c1;
border-radius: 5px;
padding: 5px;
}
.container > div {
grid-row: 1; /* keeps all items on the first row */
border: 1px solid #010101;
border-radius: 5px;
}<div class="container">
<div></div>
</div>
<hr>
<div class="container">
<div></div>
<div></div>
</div>
<hr>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
<hr>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
另一个想法：
null
.container {
display: grid;
grid-auto-flow: column;
grid-auto-columns:0.33333fr; /* 0.333 = 1/3 */
border: 1px solid #c1c1c1;
border-radius: 5px;
}
.container > div {
height: 100px;
margin:5px;
border: 1px solid #010101;
border-radius: 5px;
}<div class="container">
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
</div>
<div class="container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>