随着项目数的增加更改网格中的列和行数

Question

我必须设计一个响应式网格。网格应根据项目数（而不是屏幕的大小）而变化。

5至6项应为2x3，从7到9的项目应为3x3，10至12个项目应为3x4，从13到16的项目应为4x4，等等...

这是我可以使用CSS Grid做的事情吗？

Answer 1

隐式列创建可以做到这一点。当达到特定的列数时，可以考虑nth-child() / nth-last-child()创建新列：

.container {
  display:inline-grid;
  vertical-align:top;
  grid-auto-columns:1fr;
  width:100px;
  margin:5px;
}
.container > * {
  border:1px solid red;
}
.container > *::before {
  content:"";
  display:inline-block;
  padding-top:100%;
}

.container > :nth-child(2) {
  grid-column:2;
}

.container > :nth-last-child(5) ~ :nth-child(3),
.container > :nth-last-child(7) ~ :nth-child(3),
.container > :nth-last-child(9) ~ :nth-child(3){
 grid-column:3;
}


.container > :nth-last-child(10) ~ :nth-child(4),
.container > :nth-last-child(13) ~ :nth-child(4),
.container > :nth-last-child(16) ~ :nth-child(4){
 grid-column:4;
}

/* ad so on ...*/

<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>

<div class="container">
<div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>

<div class="container">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>