Grid Layout полное руководство
Grid Layout
Редактировать...Понял, работаем локально! Держи полный комплект "Grid под ключ" — всё, что нужно, чтобы верстать любые макеты. Копируй, вставляй и пользуйся.
# 📐 CSS Grid: Полное руководство для жизни
## 1. База (Скелет сетки)
```css
/* Превращаем любой блок в грид-контейнер */
.container {
display: grid; /* или inline-grid */
/* Основа основ: создаем колонки и строки */
grid-template-columns: 100px 200px 100px; /* 3 колонки */
grid-template-rows: 150px 300px; /* 2 строки */
/* Промежутки между ячейками (вместо margin'ов) */
gap: 20px; /* Или gap: 10px 20px; (row column) */
}
```
## 2. Магия fr (фракции) — твой главный инструмент
`fr` заменяет проценты и делает сетку гибкой:
```css
.container {
/* Самая популярная раскладка */
grid-template-columns: 1fr 2fr 1fr;
/* Результат: 25% | 50% | 25% (но лучше fr) */
/* Смесь с фиксированной шириной */
grid-template-columns: 250px 1fr; /* Сайдбар + контент */
/* Автоматическая ширина + гибкость */
grid-template-columns: auto 1fr auto; /* Шапка с лого и меню */
}
```
## 3. Функции-выручалки (Жить без них нельзя)
```css
.container {
/* repeat() — когда нужно много одинаковых колонок */
grid-template-columns: repeat(4, 1fr); /* 4 равные колонки */
grid-template-columns: repeat(3, minmax(200px, 1fr)); /* 3 колонки, каждая минимум 200px, дальше тянутся */
/* minmax() — защита от переполнения */
grid-template-columns: minmax(100px, 300px) 1fr; /* Первая колонка от 100 до 300px */
/* auto-fill — адаптив без медиазапросов */
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); /* Самое популярное! Карточки сами прыгают */
}
```
## 4. Как расставлять элементы (2 способа)
### Способ А: По линиям (Line-based)
Линии считаются с 1, можно считать от конца через минус (-1).
```css
.item-1 {
/* grid-свойство: начало / конец */
grid-column: 1 / 3; /* С первой по третью линию (займет 2 колонки) */
grid-row: 1 / 2; /* С первой по вторую линию (одна строка) */
}
.item-2 {
grid-column: 2 / -1; /* Со второй линии до последней (до конца) */
grid-row: 2 / 4; /* Со второй по четвертую строку */
/* Можно задавать имена линиям, но на первое время хватит цифр */
}
```
### Способ Б: Именами (Grid Areas) — визуальное программирование
```css
.container {
display: grid;
grid-template-columns: 200px 1fr 200px;
grid-template-rows: auto 1fr auto;
/* Рисуем макет словами */
grid-template-areas:
"header header header"
"sidebar content aside"
"footer footer footer";
}
header { grid-area: header; }
.sidebar { grid-area: sidebar; }
main { grid-area: content; }
aside { grid-area: aside; }
footer { grid-area: footer; }
/* Важно: имена областей должны образовывать прямоугольники */
/* Точка (.) — пустая ячейка */
grid-template-areas:
"header header ."
"sidebar content aside"
"footer footer footer";
```
## 5. Выравнивание (как в Flexbox, только мощнее)
```css
.container {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(2, 100px);
/* Горизонтальное выравнивание ВСЕХ ячеек в контейнере */
justify-content: center; /* start, end, space-between */
/* Вертикальное выравнивание ВСЕХ ячеек */
align-content: center;
/* Выравнивание элементов ВНУТРИ ячеек (по горизонтали) */
justify-items: center; /* stretch (по умолчанию), start, end */
/* Выравнивание элементов ВНУТРИ ячеек (по вертикали) */
align-items: center;
}
/* Для конкретного элемента переопределяем */
.special-item {
justify-self: end; /* Только этот элемент прижмется к правому краю ячейки */
align-self: start; /* Только этот элемент прижмется к верху ячейки */
}
```
## 6. Трюки для реальной жизни
```css
/* Кирпичная кладка (карточки товаров) */
.cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}
/* Шапка с лого по центру */
.header {
display: grid;
grid-template-columns: 1fr auto 1fr; /* Левый, Центр, Правый */
align-items: center;
}
.logo { grid-column: 2; } /* Лого в центре */
/* Перекрытие областей (сетка поверх сетки) */
.item {
grid-column: 1 / -1; /* Растянуть элемент на всю ширину */
grid-row: 2 / 4; /* И наложить поверх других */
z-index: 2; /* Не забыть про z-index */
}
```
## 7. Чеклист "Готов к бою"
Если ты знаешь эти 10 свойств — ты умеешь Grid:
1. `display: grid`
2. `grid-template-columns`
3. `grid-template-rows`
4. `gap`
5. `repeat()`
6. `minmax()`
7. `grid-column` / `grid-row`
8. `grid-template-areas`
9. `justify-content` / `align-content`
10. `align-items` / `justify-items`
## 8. Шаблон для старта любого проекта
```css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto; /* Шапка, контент (во всю высоту), подвал */
gap: 20px;
padding: 20px;
}
/* Для страницы с сайдбаром */
.main-layout {
display: grid;
grid-template-columns: 250px 1fr;
gap: 30px;
}
/* Для галереи */
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 25px;
}
```
Теперь у тебя есть вся теория в одном сообщении. Сохрани это куда-нибудь (в заметки, в код, хоть на стену повесь) и начинай писать любой макет. Когда встретишь непонятную ситуацию — пиши, разберем конкретный случай!