Как можно задать разные значения grid-gap в сетке?

Question

Для первой колонки например 30px, а для второй 60px.

Answer 1

Самым простым и понятным (с точки зрения поддержки) способом будет сделать это при помощи дополнительных колонок и/или рядов (для рядов):

.grid {
  display: grid;
  grid-template-columns: 100px 30px 100px 60px 100px;
}

.col {
  width: 100px;
  height: 300px;
  background-color: green;
}

<div class="grid">
  <div class="col"></div>
  <div></div>
  <div class="col"></div>
  <div></div>
  <div class="col"></div>
</div>

БЛОГ НА HUSL

Как можно задать разные значения grid-gap в сетке?

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