CSS Grid — это двумерная система раскладки: вы задаёте столбцы и строки, а элементы размещаются в ячейках сетки. В отличие от Flexbox (одна ось за раз), Grid сразу оперирует и горизонталью, и вертикалью.
Grid отлично подходит для карточек блога, макетов «сайдбар + контент», галерей и любых сеток с чёткой структурой. В этом занятии: grid-template-columns и grid-template-rows, единицы fr, grid-area, auto-fill и auto-fit, когда Grid удобнее Flexbox, а в практике — сетка блога, layout с сайдбаром и перестроение на мобильных.
У контейнера с display: grid вы задаёте структуру сетки:
grid-template-columns — размеры столбцов (например 100px 200px 100px или 1fr 2fr 1fr);grid-template-rows — размеры строк (по желанию; если не задавать, строки появляются по контенту).Количество значений в grid-template-columns задаёт количество столбцов. Элементы заполняют ячейки слева направо, сверху вниз.
Переключайте кнопки: меняется число и соотношение столбцов и строк. Смотрите, как ведут себя ячейки.
Выберите вариант выше. Сейчас: 1fr 1fr 1fr
fr — доля доступного пространства. 1fr 1fr 1fr — три равных столбца; 1fr 2fr 1fr — средний в два раза шире боковых. fr удобно комбинировать с px: например 200px 1fr 1fr — фиксированный сайдбар и два гибких столбца.
В отличие от процентов, fr учитывает только свободное место после вычета gap и фиксированных размеров, поэтому расчёты проще.
Нажмите кнопку и посмотрите, как меняется ширина столбцов при разных значениях fr.
Выберите вариант выше. Сейчас: 2fr 1fr 1fr
С помощью grid-template-areas вы даёте ячейкам имена (строки в кавычках, пробелы между именами — соседние ячейки). У дочернего элемента задаёте grid-area: имя — и он занимает все ячейки с этим именем.
Так удобно собирать макет «шапка — сайдбар — контент» без подсчёта линий: задали области по именам и привязали к ним блоки.
Ниже макет из трёх областей. Переключайте кнопки: меняется только расположение сайдбара (слева или справа) за счёт смены grid-template-areas.
Почему одна колонка во второй строке уже другой? Ширины колонок задаются не в grid-template-areas, а в grid-template-columns. В этом демо у контейнера задано grid-template-columns: 1fr 2fr — первая колонка (сайдбар) получает одну долю места, вторая (основной контент) — две доли. Поэтому контентная область всегда примерно в два раза шире сайдбара.
Сейчас: grid-template-columns: 1fr 2fr (узкая колонка — 1 доля, широкая — 2 доли). grid-template-areas: "header header" "sidebar main". У элементов: grid-area: header, sidebar, main.
Проще всего: вы хотите, чтобы колонки сами подстраивались под ширину экрана — на узком одна колонка, на широком несколько. Для этого подходит repeat(auto-fit, minmax(200px, 1fr)): «создай столько колонок по 200px минимум, сколько влезет; пустое место отдай им». На мобильных влезает одна колонка — она и будет. Это то, что нужно в 99% случаев для карточек и галерей.
auto-fill — на широком экране ведёт себя иначе: если карточек меньше, чем колонок, остаются пустые колонки-треки (они не «схлопываются»). Нужен редко: например когда важно выровнять последний ряд по сетке и оставить пустые ячейки. На мобильных разницы с auto-fit почти нет — там и так одна колонка. В сомнении берите auto-fit.
В каждом контейнере только два блока при ширине, где влезает три колонки по 120px. Слева auto-fill: третья колонка остаётся пустой (пустой трек занимает место). Справа auto-fit: пустой трек схлопывается — две колонки растягиваются на всю ширину.
auto-fill — пустая колонка справа
auto-fit — две колонки на всю ширину
Grid удобнее, когда нужна именно сетка: несколько столбцов и строк, выравнивание по обоим осям, макеты «шапка — сайдбар — контент», карточки блога в несколько колонок. Вы задаёте структуру контейнера, а элементы занимают ячейки.
Flex лучше для одного ряда или одного столбца: навбар, кнопки в ряд, центрирование, распределение места в одной линии. Если задача — «выстроить в линию и выровнять» без явной сетки, Flex проще.
Итог: сложные двумерные раскладки — Grid; одномерные (строка/столбец) и навбары — часто Flex. Можно комбинировать: например контейнер страницы на Grid, блок с кнопками внутри — на Flex.
Контейнер: display: grid. Структура: grid-template-columns и grid-template-rows. Единица fr — доля пространства. Именованные области: grid-template-areas и grid-area. Адаптивные колонки: repeat(auto-fill, minmax(...)) или auto-fit. Для двумерных макетов Grid часто предпочтительнее Flex.
Выберите для каждого свойства подходящее описание.
Макет страницы: шапка на всю ширину, под ней сайдбар (узкий) и основной контент (широкий). Что удобнее?
При избытке места в контейнере: пустые треки остаются (колонки не растягиваются). Это поведение…
Для доступа к практике нужно набрать не менее 80% (минимум 7 из 8 правильных ответов).
1. Чтобы сделать элемент grid-контейнером, задают…
2. grid-template-columns задаёт…
3. Единица fr означает…
4. grid-area используется для…
5. repeat(auto-fit, minmax(200px, 1fr)) создаёт…
6. Когда Grid обычно лучше Flex?
7. grid-template-areas задаёт…
8. 1fr 2fr 1fr — это…
Сделайте одну HTML-страницу со стилями в <style> (или подключите .css и для проверки скопируйте стили в <style> в тот же файл). Выполните:
display: grid и grid-template-columns, например repeat(3, 1fr) или repeat(auto-fill, minmax(200px, 1fr))). Минимум три карточки.grid-template-columns: 200px 1fr или с grid-template-areas).@media (max-width: 600px) с изменением grid (например grid-template-columns: 1fr или grid-template-areas в одну колонку).Порог зачёта: 70 баллов из 100. Загрузите index.html и нажмите «Проверить».