4 свойства сетки CSS для большинства ваших потребностей в макетировании


CSS Grid предоставляет нам мощную систему верстки для веб-сайтов. Руководство CSS-Tricks дает вам полный обзор свойств сетки с примерами компоновки. То, что мы собираемся сделать сейчас, - это обратный подход, чтобы показать вам наименьший возможный набор свойств сетки, которые вам нужно знать, чтобы удовлетворить большинство ваших потребностей в макете.
Эти пять свойств помогут вам встать и работать:
display
(дляgrid
значения)grid-template-columns
grid-gap
grid-auto-flow
grid-column
/grid-row
Вот как это просто. Предположим, что вы хотите реализовать следующую компоновку для малых, средних и больших экранов.


Это разметка, с которой мы будем работать:
<!-- Stuff before --> <nav class="container-nav"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </nav> <div class="container-main"> <section class="item item-type-a"></section> <section class="item item-type-b"></section> <section class="item item-type-b"></section> <section class="item container-inner"> <section class="item-inner"></section> <section class="item-inner"></section> <section class="item-inner"></section> <section class="item-inner"></section> <section class="item-inner"></section> </section> </div> <!-- Stuff after -->
Если мы применяем несколько базовых стилей то, что мы получаем, уже достаточно для небольших экранов:
Теперь мы можем попасть в свойства сетки!
#Используйте display: grid, чтобы разделить страницу на независимые контейнеры макета
Во-первых, нам нужно определить, какие части страницы должны быть выровнены с макетами сетки. Можно определить один макет сетки для всей страницы. Однако для веб-сайтов с очень сложной структурой (например, новостные веб-сайты), обработка большой сетки быстро становится сложной для обсуждения. В этом случае я рекомендую разбить вещи на несколько независимых сеточных контейнеров.
Подобный этому:

Где вы проводите линию между тем, что является и не является сеткой? Вот личное эмпирическое правило, которому я следую:
Если макет в определенной части страницы не помещается в сетку смежной или окружающей части страницы, сделайте эту часть своим собственным контейнером сетки.
Я нарисовал линии сетки в разделе страницы с классом .container-main
на следующем рисунке вы можете заметить, что раздел с .container-inner
классом из разметки не вписывается точно в сетку строк.

Вот еще один возможный макет, где небольшие участки помещаются в окружающую сетку, если выбран более тонкий линейный растр. Отдельный сеточный контейнер здесь совершенно не нужен.

Чтобы начать это, давайте .container-main
в сеточный контейнер. Это основной строительный блок для CSS Grid-превращение элемента в контейнер сетки со display
свойством:
.container-main {
display: grid;
}
Мы хотим сделать то же самое с другими нашими сеточными контейнерами:
.container-inner {
display: grid;
}
.container-nav {
display: grid;
}
#Используйте grid-template-columns для определения необходимых столбцов
Затем мы определим количество столбцов, которые нам нужны в каждом контейнере сетки, и насколько широкими должны быть эти столбцы. Мое руководство по количеству столбцов: используйте наименьшее общее кратное максимальному количеству столбцов, необходимых для разных размеров экрана.
Как это работает? .container-main
Элемент имеет в общей сложности два столбца на средних экранах. Если мы возьмем это и умножим на количество столбцов на больших экранах (три), мы получим в общей сложности шесть столбцов.
Мы можем сделать то же самое для нашей навигации, .container-inner
стихии. Есть три столбца на средних экранах, которые мы умножаем на один столбец на больших экранах, чтобы получить в общей сложности три столбца.
.container-nav
Элемент не предоставляет никакого количества столбцов. В этом случае система сетки должна автоматически настроить количество столбцов на количество элементов меню. Обычно можно добавлять или удалять элементы в навигации, и было бы здорово, если бы он ответил соответствующим образом, что является чем-то, что сетка может помочь нам немного позже.
Итак, мы определили количество столбцов для каждого контейнера сетки. Давайте использовать grid-template-columns
свойство, чтобы установить их на место. Но, во-первых пара незначительных деталей:
grid-template-columns
Свойство используется только для контейнера сетки. Другими словами, вы не найдете его используемым (по крайней мере правильно) на элементе сетки внутри контейнера.- Свойство принимает множество различных значений, которые одновременно определяют количество столбцов и их ширину. Тот, который нас интересует здесь, - это дробная (
fr
) единица. Я настоятельно рекомендую проверить обзор Робина, потому что он уникален для grid и делает удивительную работу, делая вычисления, чтобы решить, как элементы сетки помещаются внутри контейнера сетки.
Нам нужно шесть колонок одинаковой ширины .container-main
. Мы можем написать вот так::
.container-main {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}
Или же мы можем обратиться к repeat()
функции, чтобы упростить ее во что - то более читаемое:
.container-main {
display: grid;
grid-template-columns: repeat(6, 1fr);
}
Давайте возьмем это знание и применим его также к нашему .container-inner
элементу, который, как мы решили, нуждается в трех столбцах.
.container-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
#Используйте grid-gap для добавления расстояния между элементами сетки
По умолчанию grid использует все пространство, имеющееся в контейнере grid, для размещения элементов сетки. Наличие элементов заподлицо друг с другом может быть требованием к дизайну, но не для конкретного макета, который мы делаем. Мы хотим немного передышки между вещами!
У нас есть grid-gap
недвижимость для этого. Опять же, это свойство предназначено только для контейнеров сетки, и оно создает вертикальное и горизонтальное расстояние между элементами сетки. Это на самом деле свойство стенографии, которое сочетает в себе вертикальные интервальные полномочия grid-row-gap
и горизонтальные интервальные полномочия grid-column-gap
. Это удобно, что мы можем разбить вещи, как это, но, в такие времена, как это, где мы работаем с одинаковым количеством интервалов в каждом направлении, стенография grid-gap
гораздо лучше писать.
Нам нужно 20px
пространство между элементами сетки внутри.container-main
, 10px
пространство внутри .container-inner
и 5px
пространство внутри .container-nav
. Никаких проблем! Все оно принимает ОДН-вкладыш на каждом контейнере решетки.
.container-main{
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 20px;
}
.container-inner {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.container-nav {
display: grid;
grid-gap: 5px;
}
#Используйте сетку-столбец и сетку-строку для определения размера отдельных элементов сетки
Теперь пришло время привести макет в форму, которую мы хотим!
Во-первых, это grid-column
свойство, которое позволяет нам расширить элемент сетки через n столбцов, где n-число столбцов, чтобы охватить. Если вы думаете, что это звучит очень похоже на rowspan
атрибут, который позволяет нам расширять ячейки через несколько строк в таблицах HTML, вы не ошибетесь.
Это выглядит так, когда мы используем его на сетке .item
в нашем .container-main
элементе, а на .inner-item
элементах внутри .container-inner
:
.item {
grid-column: span 6;
}
.item-inner {
grid-column: span 3;
}
Мы говорим здесь о том, что каждый элемент занимает шесть строк в нашем основном контейнере и три строки во внутреннем контейнере — это общее количество столбцов в каждом контейнере.
Интересная вещь о CSS Grid заключается в том, что мы можем назвать линии сетки . Они приходят с неявными именами из коробки, но называние их-это мощный способ различать начальные и конечные строки для каждого столбца на треке.
Мы можем изменить количество столбцов и строк, которые элементы должны охватывать в разных точках останова:
@media screen and (min-width: 600px) {
.item-type-b {
grid-column: span 3;
}
.item-inner {
grid-column: span 1;
}
}
@media screen and (min-width: 900px) {
.item {
grid-column: span 2;
grid-row: span 2;
}
.item-type-b{
grid-row: span 1;
}
.item-inner{
grid-column: span 3;
}
}
#Использование grid-auto-flow для управления размещением элементов
CSS сетка помещает элементы один ряд за другим. Вот почему результат в нашем примере выглядит именно так на данный момент:

Размещение по столбцам может быть достигнуто путем установки grid-auto-flow
свойству column ( row
это значение по умолчанию). Наш макет будет получать прибыль от размещения столбцов в двух случаях. Во-первых, это делает наши пункты меню, наконец, появляются в горизонтальной ориентации. Во-вторых, он приводит элементы контейнерного класса в нужную группировку.
#Окончательный результат
Сеточная система позволяет нам работать под девизом: "сделайте столько спецификаций, сколько необходимо, но как можно меньше.” Мы рассмотрели только несколько спецификаций, необходимых для превращения элементов в контейнер CSS grid, а элементов внутри него в элементы сетки, чтобы показать, насколько мало вам нужно знать, чтобы построить даже сложные макеты с помощью CSS Grid.
CSS Grid поддерживает дополнительные случаи использования, когда:
- Мы хотим сделать еще меньше спецификаций, чтобы вместо этого больше полагаться на автоматическое позиционирование.
- Мы хотим сделать еще больше спецификаций, чтобы определить больше деталей полученного макета.
Если применяется первый случай, то стоит рассмотреть следующие дополнительные параметры сетки:
- При создании сетки с
grid-template-columns
, вы можете иметь систему сетки автоматически определять ширину отдельных столбцов с ключевым словом auto или адаптировать его к существующему контенту с настройкамиmin-content
,max-content
, илиfit-content
. - Вы можете позволить сеточной системе автоматически определять количество необходимых столбцов с помощью
repeat
,auto-fill
,auto-fit
, иminmax
. Даже запросы мультимедиа могут стать избыточными, и эти инструменты помогают сделать вещи гибкими без добавления дополнительных запросов мультимедиа.
Если применяется второй случай, CSS Grid предлагает еще больше параметров настройки для вас:
- Вы можете явно указать ширину столбцов в выбранном вами блоке (например
px
, или%
), используяgrid-template-columns
свойство. Кроме того, свойствоgrid-template-rows
доступно для определения количества и ширины строк, если существует определенное их количество. - Вы также можете определить конкретные номера столбцов или строк для позиционирования в качестве значений для
grid-column
andgrid-row
(или использовать свойстваgrid-column-start
,grid-column-end
,grid-row-start
, orgrid-row-end
).
И мы даже не попали в выравнивание сетки CSS ! Тем не менее, тот факт, что мы можем достичь так много, даже не затрагивая эту тему, показывает, насколько мощна сетка CSS.