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

Question

我必须设计一个响应式网格。
网格应根据项目数量（而不是屏幕大小）进行更改。

5 到 6 个项目应为 2x3，7
到 9 个项目应为 3x3，10
到 12 个项目应为 3x4，13
到 16 个项目应为 4x4，依此类推...

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

这是我尝试过的：

<main>

  <figure>
    <img src="https://placekitten.com/600/400" alt="">
  </figure>

  <figure>
    <img src="https://placekitten.com/600/400" alt="">
  </figure>

  <figure>
    <img src="https://placekitten.com/600/400" alt="">
  </figure>

  <figure>
    <img src="https://placekitten.com/600/400" alt="">

  </figure>

  <figure>
    <img src="https://placekitten.com/600/400" alt="">
  </figure>

</main>

main {
  /* display: flex; */
  /* flex-wrap: wrap; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  align-content: stretch;
  height: 100vh;
}
figure {
  margin: 0;
  /* flex-grow: 1; */
  /* flex-basis: 12rem; */
}
img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

Answer 1

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

.container {
  display: inline-grid;
  width: 100px;
  vertical-align: top;
  border: 1px solid;
}
.container > :nth-child(2) {
  grid-column: 2;
}

.container > :nth-last-child(n + 5) ~ :nth-child(3) { 
 grid-column: 3;
}

.container > :nth-last-child(n + 10) ~ :nth-child(4) { 
 grid-column: 4;
}

.container > :nth-last-child(n + 17) ~ :nth-child(5) { 
 grid-column: 5;
}

.container > * {
  border: 1px solid red;
  aspect-ratio: 1;
}

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

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