Адаптивная сетка на CSS

   

Благодаря свойству CSS display: grid можно легко создавать сетки. Используя единицу длины fr, сетки можно сделать адаптивными для любого дисплея. Давайте рассмотрим наиболее простой пример:

Содержимое первого блока
Содержимое второго блока
Содержимое третьего блока
Содержимое четвертого блока


Вот как выглядит наша сетка HTML:

1
2
3
4
5
6
<div class="grid">
  <div class="grid-item">Содержимое первого блока</div>
  <div class="grid-item">Содержимое второго блока</div>
  <div class="grid-item">Содержимое третьего блока</div>
  <div class="grid-item">Содержимое четвертого блока</div>
</div>

Стили CSS, которые «оживят» разметку:

1
2
3
4
5
6
7
8
9
.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 1em;
}

.grid-item {
  background-color: orange;
}