Как создать универсальную сетку с помощью CSS Grid

Сетка с одной строкой и 12 столбцами

Для поддержки различных макетов мы создадим макет CSS Grid, представляющий собой одну строку с 12 столбцами.

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

Почему 12 столбцов

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

Если говорить коротко, то он очень гибкий.

Почему только одна строка

Это упрощает кодирование и делает его более универсальным.

Каждая строка в HTML будет иметь свой родительский элемент. Мы можем складывать их столько, сколько нам нужно, чтобы создавать уникальные макеты.

Приступим!

Определение строки

Для этой системы будем использовать очень некреативное имя класса .row для строки контента.

Мы установим display на grid, зададим для grid-template-columns 12 повторяющихся столбцов шириной 1fr, а для grid-template-rows свойство 1fr.

Мы также добавим column-gap, но промежуток между строками будем обрабатывать отдельно (возможно, с помощью утилитарных классов или чего-то в этом роде).

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 1fr auto;
  column-gap: 1em;
}

Определение столбцов: простой способ

В своих личных проектах я предпочитаю использовать дробные имена для столбцов.

Такие вещи, как .col-third (треть) и .col-fourth (четверть), делают невероятно очевидным размер колонки.

Для каждого класса .col-* мы определим свойство grid-column с начальной линией сетки auto и конечной линией сетки span {width}, где {width} — количество столбцов, которые он должен охватить.

Это упорядочивает колонки, но указывает CSS, какой ширины делать каждый элемент.

.col-fourth {
  grid-column: auto / span 3;
}

.col-third {
  grid-column: auto / span 4;
}

.col-two-thirds {
  grid-column: auto / span 8;
}

.col-half {
  grid-column: auto / span 6;
}

.col-three-fourths {
  grid-column: auto / span 9;
}

Теперь мы можем делать вот так...

<div class="row">
  <div class="col-third">Third</div>
  <div class="col-two-thirds">Two Thirds</div>
</div>

<div class="row">
  <div class="col-fourth">Fourth</div>
  <div class="col-half">Half</div>
  <div class="col-fourth">Fourth</div>
</div>

See the Pen

Определение столбцов: более сложный способ

Для более надёжных систем можно определить классы столбцов по количеству столбцов, которые они охватывают.

Например, .col-third станет .col-4, поскольку он охватывает четыре колонки. Класс .col-half станет .col-6, поскольку он охватывает шесть колонок.

Это даёт больше возможностей для управления, но требует дополнительных усилий при создании макетов.

.col-1 {
  grid-column: auto / span 1;
}

.col-2 {
  grid-column: auto / span 2;
}

.col-3 {
  grid-column: auto / span 3;
}

.col-4 {
  grid-column: auto / span 4;
}

.col-5 {
  grid-column: auto / span 5;
}

.col-6 {
  grid-column: auto / span 6;
}

.col-7 {
  grid-column: auto / span 7;
}

.col-8 {
  grid-column: auto / span 8;
}

.col-9 {
  grid-column: auto / span 9;
}

.col-10 {
  grid-column: auto / span 10;
}

.col-11 {
  grid-column: auto / span 11;
}

Контроль, где начинаются элементы

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

Для этого создадим несколько классов .col-start-*. Для каждого из них определим свойство grid-column-start, в котором будет указан столбец сетки, с которой должен начинаться элемент.

Также необходимо определить grid-row-start, равное 1, для каждого элемента. Я использую селектор атрибутов, чтобы сделать это проще.

Для удобства снова используем простые дробные названия.

[class*="col-start-"] {
  grid-row-start: 1;
}

.col-start-first {
  grid-column-start: 1;
}

.col-start-fourth {
  grid-column-start: 4;
}

.col-start-third {
  grid-column-start: 5;
}

.col-start-half {
  grid-column-start: 7;
}

.col-start-two-thirds {
  grid-column-start: 9;
}

.col-start-three-fourths {
  grid-column-start: 10;
}

Теперь можно делать такие вещи...

<div class="row">
  <div class="col-two-thirds col-start-third">Two Thirds</div>
</div>

<div class="row">
  <div class="col-fourth">Fourth</div>
  <div class="col-fourth col-start-three-fourths">Fourth</div>
</div>

<div class="row">
  <div class="col-third">First in HTML</div>
  <div class="col-two-thirds col-start-first">Second in HTML</div>
</div>

See the Pen

Одна колонка на малых областях просмотра

Обычно я оборачиваю свою систему сетки в медиа-запрос...

@media (min-width: 40rem) {
  /* Начало CSS системы сетки */
}

На небольших областях просмотра пользователи получают одно колоночный макет. Как только они переходят в достаточно большое окно просмотра, сетка включается и переходит в многоколоночный макет.

Модификаторы и утилитарные классы

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

<div class="row margin-bottom-small">
  <!-- ... -->
</div>

<div class="row margin-bottom-large">
  <!-- ... -->
</div>

Я также часто включаю модификаторы для класса .row, чтобы увеличить или уменьшить column-gap.

.row-gap-large {
  column-gap: 2rem;
}

.row-no-gap {
  column-gap: 0;
}

Не стесняйтесь добавлять дополнительные классы, чтобы подтолкнуть и подправить что-либо по мере необходимости.

• Введение в CSS Grid
• HUG CSS, как я подхожу к архитектуре CSS