Grid в CSS
Flexbox выстраивал элементы в одном направлении. CSS Grid открывает следующую главу: строки и колонки вместе. Включите display: grid, набросайте дорожки (tracks), добавьте gap — а глубже пойдёте в уроках Grid Container, Items, Areas и Responsive.
Стартовый набор инструментов Grid
📊 Grid одним взглядом
| Идея | Повседневная роль |
|---|---|
| Контейнер Grid | Родитель с display: grid (или inline-grid) |
| Элементы Grid | Прямые потомки, которые садятся в сетку |
| Дорожки (tracks) | Строки и колонки, образующие решётку |
| Ячейки / области | Места, куда попадают элементы (области — в следующем уроке) |
gap |
Промежутки между дорожками без трюков с margin |
Единица fr |
Делить оставшееся место между дорожками (превью) |
Думайте о Grid как о миллиметровке для страницы: сначала рисуете колонки и строки, потом кладёте контент в ячейки. Flexbox по-прежнему отличен для панелей инструментов и одноосных групп.
display: grid — включить решётку
Поставьте display: grid на родителе. Дети становятся элементами сетки автоматически — для базовой модели лишний класс не нужен.
.board {
display: grid;
}
Сначала колонки — простой шаблон
grid-template-columns задаёт вертикальные дорожки. Три равные колонки — спокойный стартовый набросок для карточек или плиток.
.board {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
gap — честные промежутки
Используйте gap (или row-gap / column-gap), чтобы отступы оставались ровными при перестроении дорожек. Лучше gap, чем размазывать margin по каждому ребёнку.
.board {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
Небольшая матрица карточек
Та же идея, что эскиз галереи — равные дорожки плюс gap — но теперь вы говорите на языке Grid, а не только flex-wrap.
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.25rem;
}
.cards__item {
min-height: 8rem;
}
fr — делим свободное место
Единица fr делит свободное пространство между дорожками. 2fr 1fr делает первую колонку вдвое шире второй, когда место остаётся.
.shell {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5rem;
}
Спокойная привычка Grid
Используйте Grid для двумерных оболочек страницы и матриц. Используйте Flexbox для одномерных рядов. Начните с display: grid, простого grid-template-columns и gap. Глубокую авторасстановку, именованные области и адаптивные дорожки Grid оставьте следующим урокам.
.page {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
.page__main,
.page__rail {
min-width: 0;
}
Попробуйте сами
- Сделайте контейнер с
display: grid. - Задайте
grid-template-columns: repeat(3, 1fr). - Добавьте
gap: 1remмежду дорожками. - Попробуйте
2fr 1frдля оболочки main + rail. - Напишите одно предложение: когда вы всё же выберете Flexbox?
Частые ошибки
- Ставить
display: gridна каждый элемент без нужды в раскладке - Ждать, что один только wrap Flexbox заменит настоящий 2D Grid
- Пропускать
gapи вечно воевать с margin детей - Прыгать к именованным областям, пока базовые дорожки не стали привычными
- Собирать целые оболочки страницы на float, когда Grid подходит лучше
Кратко
- CSS Grid двумерен: строки и колонки вместе
display: gridпревращает детей в элементы сеткиgrid-template-columns(и позже строки) задают дорожкиgapиfrдержат промежутки и свободное место спокойными- Более глубокие уроки о контейнере, элементе, области и адаптивном Grid — дальше
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху