Алгоритм размещения элементов в css сетке

157

22 августа 2021, 10:10

Допустим есть сетка, в которой явным образом не указан алгоритм размещения блоков и при скроле подгружаются новые блоки. Как задать им алгоритм размещения? Пример сетки:

Answer 1

Можно сделать вот так

.grid-container { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  grid-auto-rows: 150px; 
  grid-gap: 15px; 
} 
.grid-item { 
  background-color: purple; 
} 
.grid-item:nth-child(6n + 1) { 
  background-color: green; 
  grid-column-end: span 2; 
  grid-row-end: span 2; 
} 
.grid-item:nth-child(6n + 2), .grid-item:nth-child(6n + 3) { 
  background-color: red; 
  grid-column-end: span 2; 
} 
.grid-item:nth-child(6n + 4) { 
  background-color: yellow; 
  grid-column-end: span 2; 
}

<div class="grid-container"> 
  <div class="grid-item">1</div> 
  <div class="grid-item">2</div> 
  <div class="grid-item">3</div> 
  <div class="grid-item">4</div> 
  <div class="grid-item">5</div> 
  <div class="grid-item">6</div> 
  <div class="grid-item">7</div> 
  <div class="grid-item">8</div> 
  <div class="grid-item">9</div> 
  <div class="grid-item">10</div> 
  <div class="grid-item">11</div> 
  <div class="grid-item">12</div> 
</div>