Что такое grid

Grid — это система двумерного макета в CSS, позволяющая создавать сложные сетки с помощью строк и столбцов.

Ключевые особенности:

• Работает с родительским контейнером (display: grid) и дочерними элементами.
• Позволяет явно задавать размеры (grid-template-columns, grid-template-rows).
• Поддерживает гибкие единицы (fr), repeat(), minmax().
• Управляет выравниванием (justify-items, align-items).

Пример:

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
}
.item {
  background: lightblue;
}

Преимущества:

• Проще вложенные структуры, чем во Flexbox.
• Контроль и по строкам, и по столбцам.
• Автоматическое выравнивание и распределение.