Black Baron

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

Что такое CSS Grid

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

Чтобы использовать Grid, необходимо сделать контейнер сеточным:

.container {

    display: grid;

}

После этого все дочерние элементы становятся частью сетки.

Колонки и строки

Для создания структуры сетки используются свойства:

• grid-template-columns — задаёт количество и размер колонок;
• grid-template-rows — задаёт количество и размер строк.

Пример:

.container {

    display: grid;

    grid-template-columns: 200px 200px 200px;

    grid-template-rows: 100px 100px;

}

В данном случае создаётся сетка из трёх колонок и двух строк.

Единица fr

В CSS Grid активно используется специальная единица измерения fr (fraction).

Она обозначает долю свободного пространства.

Пример:

.container {

    display: grid;

    grid-template-columns: 1fr 2fr 1fr;

}

Здесь вторая колонка будет в два раза шире первой и третьей.

Расстояние между элементами

Для задания промежутков используется свойство gap.

.container {

    gap: 20px;

}

Это позволяет легко управлять расстоянием между строками и колонками.

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

Grid позволяет указывать, сколько строк или колонок занимает элемент.

.item {

    grid-column: 1 / 3;

}

Такой элемент займёт пространство от первой до третьей линии, то есть две колонки.

Аналогично можно использовать:

.item {

    grid-row: 1 / 3;

}

Практический пример

Создадим простую сетку карточек:

<div class="container">

    <div class="card">Карточка 1</div>

    <div class="card">Карточка 2</div>

    <div class="card">Карточка 3</div>

</div>

.container {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 15px;

}

.card {

    padding: 20px;

    border: 1px solid #ccc;

}

В результате получится аккуратная сетка из трёх колонок.

Функция repeat()

Чтобы не писать одинаковые значения вручную, используется функция repeat().

grid-template-columns: repeat(4, 1fr);

Это создаст четыре равные колонки.

Когда использовать Grid

CSS Grid особенно полезен для:

• структуры всей страницы;
• галерей;
• карточек товаров;
• сложных макетов с несколькими областями.

Если требуется выравнивание в одном направлении — лучше использовать Flexbox. Если нужен полноценный макет — Grid.

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