Шаг 13: Grid

display: grid — для сложных сеток. grid-template-columns задаёт колонки, gap — отступы.

Код примера

<style>
  .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
</style>
<div class="grid-container">
  <div style="background:#eee; padding:16px;">Колонка 1</div>
  <div style="background:#eee; padding:16px;">Колонка 2</div>
  <div style="background:#eee; padding:16px;">Колонка 3</div>
</div>
Результат:
Трёхколоночная сетка.