Как сделать такую grid сетку?

Question

Как сделать такую грид сетку, чтобы при добавлении еще контента последующие вставали также?

Answer 1

#x{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 20vh;
  grid-gap: 10px;
  background: gray;
}

#x > *{
  background: brown;
  border: 2px solid skyblue;
  width: 100%; height: 100%;
  display: list-item;
  list-style: decimal inside;
}

#x > *:nth-child(7n),
#x > *:nth-child(7n-1),
#x > *:nth-child(7n-2),
#x > *:nth-child(7n-3)
{
  color: violet;
  grid-column: span 3;
}

#x > *:nth-child(7n-4),
#x > *:nth-child(7n-5),
#x > *:nth-child(7n-6)
{
  color: antiquewhite;
  grid-column: span 4;
}

<div id='x' data-comment='то самое чувство, когда увидел интересную задачку и от счастья
наложил кирпичей :3'>
  <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
  <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
  <hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr><hr>
</div>

БЛОГ НА HUSL

Как сделать такую grid сетку?

Ответы (1 шт):