Гайд по CSS Grid Layout - шпаргалка по визуальному оформлению сайтов для верстальщиков

Старт:21.10.2024

Срок обучения:9 мес.

Frontend-разработчик

Практический онлайн-курс, на котором вы за 9 месяцев освоите профессию веб-разработчика по стандартам IT-сферы: изучите актуальные технологии JS, React и PHP, создадите портфолио из нескольких сайтов, станете востребованным разработчиком с доходом от 70 000 ₽.

119 000 ₽297 500 ₽

9 917₽/мес рассрочка

Подробнее

Для создания сложных и динамичных макетов используйте CSS Grid Layout. Он предоставляет мощные возможности для позиционирования элементов и управления их расположением. Благодаря Grid легко создавать отзывчивые и адаптивные веб-страницы, которые отлично отображаются на различных устройствах.

В этом гайде мы детально разберём основные принципы и методики работы с Grid, подкрепляя их практическими примерами. Вы научитесь создавать сложные макеты, используя только несколько строк кода, а не десятки.

Ключевые понятия: контейнер сетки, строки и столбцы, свойства grid-template-columns и grid-template-rows, позиционирование элементов с помощью grid-column-start, grid-column-end, grid-row-start, grid-row-end. Вы освоите эффективные техники для точного размещения элементов, создания адаптивных макетов и обработки различных сценариев.

В работе с CSS Grid Layout мы рекомендуем: использовать 명확한 и неповторимые имена классов, создавать логичные структуры HTML, и тщательно документировать свой код. Эти практические шаги будут сокращать время на поиск ошибок и упрощают поддержку проекта.

Основы Grid: создание и настройка сетки

Для создания сетки используйте свойство display: grid для родительского элемента.

Затем, определяйте столбцы и строки с помощью grid-template-columns и grid-template-rows. Например:

.container { display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: 100px 200px; }

Это создаёт сетку из двух колонок (1 и 2 части шириной страницы) и двух строк (100px и 200px). 1fr значит одна область, занимающая всю оставшуюся ширину.

Для размещения элементов внутри сетки используйте grid-column-start, grid-column-end, grid-row-start и grid-row-end. Или проще - grid-column и grid-row. К примеру:

.item1 { grid-column: 1 / 2; /* Охватывает весь первый столбец */ grid-row: 1 / 2; /* Охватывает всю первую строку */ } .item2 { grid-column: 2 / 3; /* Вторую колонку */ grid-row: 1 / 3; /* С первой по третью строку*/ }

Значения могут быть абсолютными (числами) или относительными (span, fr). Например grid-column: 1 / span 2; - занимает 2 колонки, начиная с первой.

Комбинируйте значения этих свойств для сложных макетов.

Используйте grid-gap (заполнение) для создания отступов между элементами внутри сетки, и grid-template-areas для имен областей сетки, которые могут быть полезными для сложных макетов.

Работа с элементами в сетке: размещение и выравнивание

Для размещения элементов в сетке используйте свойство grid-column-start и grid-column-end. Аналогично, для строк – grid-row-start и grid-row-end. Эти свойства определяют позицию элемента относительно сетки.

Пример: Для размещения элемента в первой колонке, занимающего 2 колонки и 2 строки, начиная с первой строки, используйте:

.element {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 3;
}

Кроме абсолютной позиции, можно применять ключевые слова span и auto для гибкости

Для выравнивания содержимого внутри ячейки сетки, используйте justify-content и align-items. Например, justify-content: center; центрирует по горизонтали, а align-items: center; - по вертикали.

Группировка и перекрытие элементов: grid-template-areas и области

grid-template-areas позволяет описывать размещение элементов в сетке с помощью имён областей. Это мощный инструмент для группировки и перекрытия.

Например, используйте grid-template-areas: "header header" "main main" "footer footer";. Это создаёт сетку с заголовком (header) на двух столбцах, основным содержимым (main) посередине и подвалом (footer). Важно, что пустые ячейки или символы (например, ".") в grid-template-areas работают точно так же как и пустые ячейки или символы в HTML-таблицах.

Имена областей должны быть уникальными в пределах одной сетки. Используйте корректную синтаксическую структуру:

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
grid-template-areas:
"header header"
"nav content"
"nav content";
}
.header { grid-area: header; }
.nav { grid-area: nav; }
.content { grid-area: content; }

В этом примере nav и content занимают одну область. Полоски могут перекрываться. Для этого используйте идентификаторы в grid-area (CSS).

Ключевая рекомендация: Ясно определите области, чтобы избежать путаницы в коде. Привязка имён областей к элементам значительно облегчает понимание и сопровождение вашего дизайна.

Пример перекрытия:

.grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas:
"header header"
"sidebar content";
}
.header { grid-area: header; }
.sidebar { grid-area: sidebar; }
.content { grid-area: content; }

В данном случае sidebar перекрывает content, так как занимает ту же ячейку. Управление размещением элементов напрямую, а не через позиционирование, делает код более логичным и компактным.

Респонсивность и адаптивность с Grid Layout

Для адаптивного дизайна с Grid используйте fr единицы. Они позволяют элементам занимать оставшееся пространство в контейнере.

Пример:

.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 768px) {
.container {
grid-template-columns: 1fr 1fr;
}
}

Этот код адаптирует вашу сетку: при ширине меньше 768 пикселей колонки уменьшатся, сохраняя пропорции.

• Минимальный подход: Начинайте с базовой grid-template-columns и используйте @media для более узких экранов, чтобы корректировать свойства.
• `grid-template-rows` и `grid-auto-rows`: Не забывайте о высотах. Используйте auto для гибкости или конкретные значения.
• `minmax()`: Установите минимальные и максимальные значения для колонок или строк, чтобы контролировать их размер даже при изменениях размеров экрана.
• `repeat()`: Эффективно задавайте повторяющиеся колонки или строки. Например: grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

Ключевой момент: используйте media queries для точного изменения сетки при разных размерах экрана.

Предсказывайте размеры экранов. Просчитывайте возможные размеры. Разработайте несколько шаблонов (layouts) для разных мобильных устройств, средних и больших экранов.

1. Мобильная версия: Первичный шаблон для компактных экранов.
2. Средние экраны: Увеличение количества колонок, возможна адаптация размера элементов.
3. Большие экраны: Оптимизация для широких экранов.

Непрерывное тестирование и отладка вашего CSS Grid на разных устройствах критически важны для точной и адаптивной разметки.

Расширенные возможности Grid Layout: перекрывающие слои и повторяющиеся блоки

Для создания перекрывающихся элементов используйте свойство z-index. Не забудьте присвоить значение z-index элементам, которые должны перекрываться. Например, для верхнего слоя установите z-index: 2;, для нижнего – z-index: 1;.

Для повторяющихся блоков используйте повторяющиеся области сетки (grid-template-columns, grid-template-rows) с repeat(). Например, grid-template-columns: repeat(3, 1fr); создаст три одинаковые колонки. Сочетайте это с grid-auto-flow: row; или grid-auto-flow: column; для автоматического размещения дополнительных элементов.

Для сложных шаблонов перекрытия используйте grid-area, чтобы точно определить позицию элементов в сетке. Это может накладывать слои элементов, используя различные значения grid-row-start, grid-row-end, grid-column-start, grid-column-end.

Чтобы элементы повторялись в нескольких ячейках сетки, используйте grid-column-start, grid-column-end, grid-row-start, grid-row-end в совокупности. Например, для повтора элемента в двух колонках, используйте grid-column: 1 / 3;

В сочетании с grid-template-areas можете создать сложные макеты и повторно использовать блоки в различных частях страницы. Это очень полезно для иерархий.

Полезные советы и рекомендации для верстальщиков

Для правильной работы CSS Grid, тщательно прописывайте сетку и размещайте элементы в ячейках. Используйте `grid-template-columns` и `grid-template-rows` для создания сетки, а не `float` или `display:inline-block`.

Для динамического подстраивания сетки под различные экраны, применяйте единицы измерения `fr` (fractional units) в сочетании со значениями `minmax()` для гибких размеров строк и столбцов.

Не забудьте про `grid-gap`, чтобы управлять расстоянием между элементами в сетке. `grid-template-areas` позволяет назначать именованные области сетке, что упрощает размещение сложных макетов.

Вместо `