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

Давайте погрузимся в мир Grid Layout и изучим, как создавать макеты, которые раньше могли показаться невозможными.

Что такое Grid Layout

Grid Layout – это двумерная система разметки, которая позволяет нам работать с контентом как с сеткой, состоящей из строк и столбцов. Она предоставляет удивительные возможности по выравниванию, распределению пространства и позиционированию элементов.

Grid Container

Grid Container – это элемент, который определяет контекст для создания сетки. Для того чтобы сделать элемент контейнером сетки, мы просто применяем к нему свойство display: grid;.

.grid-container {
display: grid;
}

Создание сетки

Определим структуру сетки с помощью свойств grid-template-rows и grid-template-columns. Эти свойства позволяют указать количество и размеры строк и столбцов сетки.

.grid-container {
display: grid;
grid-template-rows: 100px 200px 150px; /* Три строки разных размеров */
grid-template-columns: 1fr 2fr 1fr; /* Три столбца, второй занимает в два раза больше пространства */
}

Размещение элементов в сетке

Определим, где будут размещены элементы в сетке с помощью свойства grid-row и grid-column.

.item1 {

grid-row: 1 / 3; /* Элемент занимает пространство от первой до третьей строки */

grid-column: 2 / 4; /* Элемент занимает пространство от второго до четвертого столбца */

}

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

Практический пример: Создание макета для веб-страницы

HTML

<div class="grid-container">
<div class="header">