Весь основной Grid
Grid
Редактировать...Основных много свойств у Grid ?, долго учить?
==========================
Нет, учить недолго. Буквально 10–15 основных свойств, и ты уже можешь сверстать 95% макетов. Остальное — просто вариации.
Вот вся база, которая тебе реально нужна:
---
🔥 5 свойств для родителя (контейнера)
Это 80% твоей работы с Grid:
Свойство Что делает Пример
display: grid; Включает сетку —
grid-template-columns Количество и ширина колонок repeat(3, 1fr) — 3 равные колонки
grid-template-rows Количество и высота строк 100px auto 200px
gap Отступы между ячейками gap: 20px;
grid-template-areas Именованная сетка (очень удобно) См. пример ниже
Пример за 10 секунд:
```css
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr;
gap: 20px;
}
```
Всё. Три колонки с отступами готовы.
---
🔥 2 свойства для детей (элементов)
Этого хватит, чтобы размещать блоки где угодно:
Свойство Что делает Пример
grid-column Сколько колонок занимает span 2 — на 2 колонки
grid-row Сколько строк занимает span 3 — на 3 строки
Пример:
```css
.item {
grid-column: span 2; /* Растянуть на 2 колонки */
grid-row: span 2; /* Растянуть на 2 строки */
}
```
---
🧠 Самая мощная штука — grid-template-areas
Позволяет рисовать сетку словами. Учится за 1 минуту:
```css
.container {
display: grid;
grid-template-columns: 1fr 3fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.main { grid-area: main; }
.footer { grid-area: footer; }
```
Ты буквально описываешь макет как таблицу словами. Это максимально наглядно.
---
📦 Всё остальное — опционально
Эти свойства не нужны для старта, просто знай, что они существуют:
Свойство Когда пригодится
justify-items / align-items Выровнять всё внутри ячеек по горизонтали/вертикали
justify-content / align-content Выровнять саму сетку, если она меньше контейнера
grid-auto-rows Задать высоту для «лишних» строк
minmax() Например, grid-template-columns: repeat(3, minmax(200px, 1fr));
---
⏱️ Реальное время обучения
Уровень Время Что умеешь
Базовый 30 минут Любые сетки, колонки, резина, адаптив
Уверенный 2–3 часа Именованные области, динамические ряды, вложенные гриды
Профи Неделя практики Хитрые перекрытия, автоподстройка, сложные выравнивания
---
✅ Итог
Grid учится быстрее, чем кажется.
Ты уже через час сможешь верстать то, на что с Flexbox уходил бы день.