CSS Grid что это и как работает сеточная верстка

Современная верстка web страниц имеет два способа реализации, об одном из них мы рассказали в предыдущей статье: flex css что это такое и как с этим работать. Теперь мы поговорим о гридах, css grid что это и как работает. В отличие от Flexbox, который работает только в одном направлении (по строке или по столбцу), CSS Grid позволяет управлять разметкой одновременно по двум осям, что делает его идеальным для сеток, карточек, адаптивных галерей и сложных структур.

Что такое CSS Grid

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

.container {
    display: grid;
}

Данный код показывает ответ на вопрос: display grid css что это — он включает grid сетки дочерних элементов, задавая сам стиль родительскому контейнеру.

Grid Column CSS что это такое

При помощи grid-column можно создавать гибкие макеты растягивая элемент на несколько колонок. Задается это свойство дочерним элементам:

.item {
    grid-column: 1 / 3; /* Элемент займет столбцы с 1-го по 2-й включительно */
}

Grid Template Columns CSS что это такое

Интересное CSS свойство grid-template-columns одно из ключевых свойств Grid. С его помощью задаются столбцы сетки? в которых размещается сам контент и выглядит все более ровно и упорядочено.

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

Для более четкого понимания немного расшифруем:

• Первый столбец — занимает пространство в 200 пикселей.
• Второй столбец — занимает все доступное пространство.
• Третий столбец — как и первый занимает расстояние в 200 пикселей.

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

Также можно использовать для удобства repeat().

Простой пример CSS Grid

Приводим пример просто сетки 2 x 2 с равными колонками:

<div class="grid">
    <div class="item item1">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
</div>

.grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

Когда лучше использовать CSS Grid

Если макет двумерный — Grid, eсли макет направленный (в линию) — Flexbox. Grid отлично подходит, если нужно:

• Строить сетки товаров или их карточек.
• Делать адаптивные галереи видео или изображений.
• Создавать сложную структуру страницы: header, sidebar, article, footer.
• Выравнивать элементы одновременно по горизонтали и по вертикали.

А также, приведем для наглядности ответа на вопрос, css grid что это — таблицу с кратким пояснением: