Измените количество столбцов и строк в сетке по мере увеличения количества элементов. - PullRequest
Новая
       18

Измените количество столбцов и строк в сетке по мере увеличения количества элементов.

1 голос
/ 13 апреля 2020

Мне нужно спроектировать адаптивную сетку.
Сетка должна меняться в зависимости от количества элементов (вместо размера экрана).

От 5 до 6 элементов должно быть 2x3,
от 7 до 9 пунктов должно быть 3x3,
от 10 до 12 элементов должно быть 3x4,
от 13 до 16 элементов должно быть 4x4, и так далее ...

Это что-то Я могу использовать CSS Сетка?

image

Вот что я пробовал: 

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

1 Ответ

1 голос
/ 14 апреля 2020

Создание неявных столбцов может сделать это. Можно рассмотреть nth-child() / nth-last-child() для создания нового столбца при достижении определенного c количества столбцов: 

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

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

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

.container > :nth-last-child(17) ~ :nth-child(5),
.container > :nth-last-child(21) ~ :nth-child(5), /* 21 = 17 + 4 */
.container > :nth-last-child(25) ~ :nth-child(5){ /* 25 = 21 + 4 */
 grid-column:5;
}

.container > * {
  border:1px solid red;
}
.container > *::before {
  content:"";
  display:inline-block;
  padding-top:100%;
}
<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>
...