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

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