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

Перевод MasterNik / 06 апреля 2020 г. / 3341

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-columnand grid-row(или использовать свойства grid-column-start, grid-column-end, grid-row-start, or grid-row-end).

И мы даже не попали в выравнивание сетки CSS ! Тем не менее, тот факт, что мы можем достичь так много, даже не затрагивая эту тему, показывает, насколько мощна сетка CSS.