Если вы хоть раз сталкивались с задачей выстроить элементы на странице так, чтобы они идеально ложились в сложный макет, вы наверняка слышали про CSS Grid. Это не просто очередной инструмент в арсенале фронтенд-разработчика — это настоящая революция в верстке, которая позволяет создавать адаптивные и гибкие layouts без боли и костылей. Сегодня мы разберем CSS Grid с нуля: от базовых понятий до создания сложных макетов, которые будут работать на любом устройстве. Даже если вы только начинаете свой путь в CSS, эта статья поможет вам освоить сеточную верстку и почувствовать себя уверенно. Поехали!
Зачем нужен CSS Grid?
CSS Grid появился в 2017 году и быстро стал must-have навыком для разработчиков. До его прихода мы мучились с float’ами, боролись с Flexbox в сложных макетах или писали тонны JavaScript, чтобы добиться нужного результата. Grid изменил правила игры: теперь у нас есть двухмерная система, которая позволяет управлять строками и столбцами одновременно.
Почему это важно? Представьте: вам нужно сделать страницу с шапкой, боковой панелью, контентом и футером, причем все это должно адаптироваться под мобильные устройства. С Grid это делается в несколько строк кода. Гибкость, читаемость, поддержка во всех современных браузерах — вот что делает CSS Grid незаменимым. Эта статья для тех, кто знает основы CSS (селекторы, свойства вроде margin и padding), но еще не погружался в сетки. Давайте начнем!
Основы CSS Grid
CSS Grid — это модуль CSS, который превращает элемент в контейнер сетки и позволяет управлять его дочерними элементами. В отличие от Flexbox, который работает в одном направлении (горизонтальном или вертикальном), Grid дает контроль в двух измерениях. Чтобы понять, как он работает, разберем ключевые понятия.
Ключевые термины
- Grid Container: элемент с display: grid — родительская сетка.
- Grid Items: дочерние элементы контейнера.
- Grid Lines: линии, разделяющие сетку на строки и столбцы.
- Grid Tracks: сами строки и столбцы.
- Grid Cells: ячейки, образованные пересечением строк и столбцов.
- Grid Areas: именованные области для упрощения верстки.
Создание базовой сетки
Давайте начнем с простого. Вот как создать сетку:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-template-rows: 50px 50px;
}Этот код создает сетку с тремя столбцами по 100px и двумя строками по 50px. Дочерние элементы автоматически заполнят ячейки:
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
Результат: сетка 3x2, где элементы занимают ячейки слева направо и сверху вниз.
Расположение элементов
Можно явно указать позицию элемента, для этого нужно использовать grid-row и grid-column:
.item-pos {
grid-row: 1;
grid-column: 1;
background-color: lightblue;
}
В данном случаи мы разместили последний элемент "6" в первой строке, в первом столбце.
.item {
grid-row: 1 / 3; /* От первой до второй строки */
grid-column: 2 / 4; /* От второго до четвертого столбца */
}
В данном случаи мы растянули элемент "5" на 2 строки и на 2 столбца.
Работа с промежутками (gaps)
Чтобы элементы не прилипали друг к другу, добавьте отступы с помощью gap:
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
gap: 20px; /* Отступ между всеми элементами */
}Есть возможность указать промежутки отдельно для строк и столбцов
.container {
row-gap: 10px; /* Отступ между строками */
column-gap: 15px; /* Отступ между столбцами */
}Адаптивная верстка с CSS Grid
Grid становится по-настоящему мощным, когда нужно адаптировать макет под разные экраны. Вот несколько инструментов.
Относительные единицы (fr)
Единица fr (fraction) делит доступное пространство пропорционально:
.container {
display: grid;
grid-template-columns: 1fr 2fr 1fr; /* 25% - 50% - 25% */
}Auto-fit и auto-fill
Для динамического количества столбцов используйте repeat с auto-fit или auto-fill:
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
}auto-fit растянет столбцы, а auto-fill создаст пустые, если элементов не хватит. Добавьте медиа-запросы:
@media (max-width: 600px) {
.container {
grid-template-columns: 1fr; /* Один столбец на мобильных */
}
}Выравнивание и позиционирование
Grid дает полный контроль над выравниванием.
Выравнивание всей сетки
- justify-items: горизонтальное выравнивание элементов внутри ячеек (start, center, end).
- align-items: вертикальное выравнивание.
- justify-content и align-content: выравнивание всей сетки, если она меньше контейнера.
Пример:
.container {
display: grid;
justify-items: center;
align-items: center;
}Выравнивание отдельных элементов
Для конкретного элемента:
.item {
justify-self: start;
align-self: end;
}Сравнение с Flexbox
Grid и Flexbox часто сравнивают, но они решают разные задачи:
- Flexbox: одномерная верстка (строки или столбцы).
- Grid: двумерная (строки и столбцы одновременно).
Пример: для горизонтального меню лучше Flexbox, а для сложного макета страницы — Grid.
Браузерная поддержка
CSS Grid поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge) с 2017 года. Для старых IE есть полифиллы или резервные стили с display: block.
Заключение
CSS Grid — это не просто инструмент, а новый способ думать о верстке. Вы научились создавать сетки, управлять их адаптивностью и выравниванием, а также строить сложные layouts с минимальным кодом. Теперь ваша очередь: откройте редактор, попробуйте повторить примеры и создайте что-то свое.
