CSS Grid — это мощнейшая двумерная система компоновки в CSS. В отличие от Flexbox, который распределяет пространство вдоль одной линии, Grid управляет одновременно и строками, и колонками.

1. Свойства Grid-контейнера

Чтобы активировать Grid, достаточно задать:

.grid-container {  
  display: grid; /* или inline-grid */  
  grid-template-columns: repeat(3, 1fr); /* 3 равные колонки */  
  gap: 20px;                             /* отступы между ячейками */  
}

Ключевое правило Grid vs Flexbox:
Flexbox идет от содержимого наружу: элементы определяют ширину колонок.
Grid идет от структуры внутрь: вы заранее размечаете сетку, а элементы послушно занимают отведенные им ячейки.

2. Сводная таблица свойств CSS Grid

3. Магия адаптивности: auto-fit и minmax()

Самый популярный рецепт в современном вебе — адаптивная сетка карточек без единого медиа-запроса:

.cards-grid {  
  display: grid;  
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  
  gap: 24px;  
}

Совет эксперта:
Конструкция repeat(auto-fit, minmax(280px, 1fr)) автоматически рассчитывает, сколько карточек шириной не менее 280px помещается в экран. На мобильных устройствах будет 1 колонка, на планшетах — 2, на ноутбуках — 3, на мониторах — 4!

4. Словесная верстка через grid-template-areas

Grid позволяет визуально описывать макет веб-страницы прямо в CSS-коде:

.layout {  
  display: grid;  
  grid-template-columns: 260px 1fr;  
  grid-template-rows: auto 1fr auto;  
  grid-template-areas:  
    "header  header"  
    "sidebar main"  
    "footer  footer";  
  min-height: 100vh;  
}

.header  { grid-area: header; }  
.sidebar { grid-area: sidebar; }  
.main    { grid-area: main; }  
.footer  { grid-area: footer; }  

5. Резюме: коротко о главном

• Используйте Grid для каркасов страниц, дашбордов и сеток карточек.
• Используйте Flexbox для линейных цепочек (навбары, группы кнопок, бейджи).
• Формула идеального центрирования в Grid: display: grid; place-items: center;.