Bootstrap 5 CSS Grid: используем сетку с умом

Введение в CSS Grid

CSS Grid — это современный метод разметки, который позволяет создавать сложные сетки с легкостью. В отличие от стандартной сетки Bootstrap, основанной на flexbox, CSS Grid предоставляет более гибкий и мощный подход к распределению элементов на странице.

Как это работает

В Bootstrap 5 мы добавлена опция для включения отдельной грид-системы, построенной на CSS Grid, но с элементами Bootstrap. Вы по-прежнему получаете классы, которые по прихоти можете применять для создания адаптивных макетов, но с другим подходом под капотом.

• CSS Grid включен. Отключите сеточную систему по умолчанию, установив $enable-grid-classes: false и включите CSS Grid, установив $enable-cssgrid: true. Затем перекомпилируйте свой Sass.
• Замените экземпляры .row на .grid. .grid Класс устанавливает display: grid и создает grid-template, на основе которого вы создаете свой HTML.
• Замените .col-* классы на .g-col-* classes . Это потому, что в столбцах CSS Grid используется grid-column свойство вместо width.
• Размеры столбцов и желобов задаются с помощью переменных CSS. Установите их в родительском файле .grid и настройте так, как вы хотите, встроенно или в таблице стилей, с помощью --bs-columns и --bs-gap.

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

Ключевые отличия

По сравнению с грид-системой по умолчанию:

• Утилиты Flex не влияют на столбцы CSS Grid таким же образом.
• Gaps заменяет желоба gap. Свойство заменяет горизонталь padding из сетки по умолчанию и функционирует больше как margin.

• Таким образом, в отличие от .rows, .grids не имеют отрицательных полей, и утилиты margin utilities нельзя использовать для изменения желобов сетки. Пробелы в сетке по умолчанию применяются по горизонтали и вертикали. Смотрите Раздел настройки для получения более подробной информации.

• Встроенные и пользовательские стили следует рассматривать как замену классов-модификаторов (например, style="--bs-columns: 3;" vs class="row-cols-3").

• Вложенность работает аналогично, но может потребовать сброса количества столбцов для каждого экземпляра вложенного файла .grid. Подробнее см. в разделе о вложенности.

Примеры

Три столбца

С помощью .g-col-4 классов можно создать три столбца одинаковой ширины для всех видовых экранов и устройств. Добавьте адаптивные классы, чтобы изменить макет по размеру видового экрана.

<div class="grid text-center">
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Адаптивный

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

<div class="grid text-center">
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
  <div class="g-col-6 g-col-md-4">.g-col-6 .g-col-md-4</div>
</div>

Сравните это с макетом из двух столбцов на всех видовых экранах.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Перенос

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

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Запускается

Начальные классы призваны заменить классы смещения нашей сетки по умолчанию, но это не совсем одно и то же. CSS Grid создает шаблон сетки с помощью стилей, которые сообщают браузерам ”начинать с этого столбца“ и "заканчивать этим столбцом”. Этими свойствами являются grid-column-start и grid-column-end. Начальные классы являются сокращением для первых. Соедините их с классами столбцов, чтобы увеличить и выровнять столбцы так, как вам нужно. Start classes начинаются с, 1 поскольку 0 это недопустимое значение для этих свойств.

<div class="grid text-center">
  <div class="g-col-3 g-start-2">.g-col-3 .g-start-2</div>
  <div class="g-col-4 g-start-6">.g-col-4 .g-start-6</div>
</div>

Автоматические столбцы

Если у элементов сетки нет классов (непосредственных дочерних элементов a .grid), размер каждого элемента сетки автоматически будет равен одному столбцу.

<div class="grid text-center">
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Такое поведение может быть смешано с классами столбцов сетки.

<div class="grid text-center">
  <div class="g-col-6">.g-col-6</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
  <div>1</div>
</div>

Вложенность

Аналогично нашей сеточной системе по умолчанию, наша CSS Grid позволяет легко вложить .grids. Однако, в отличие от стандартной, эта сетка наследует изменения в строках, столбцах и пробелах. Рассмотрим пример ниже:

• Мы переопределяем количество столбцов по умолчанию локальной переменной CSS: --bs-columns: 3.
• В первом автоматическом столбце количество столбцов наследуется, и каждый столбец составляет одну треть доступной ширины.
• Во втором автоматическом столбце мы сбросили количество столбцов во вложенном .grid до 12 (по умолчанию).
• Третий автоматический столбец не имеет вложенного содержимого.

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

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    Первый автоматический столбец
    <div class="grid">
      <div>Автоматическое создание столбца</div>
      <div>Автоматическое создание столбца</div>
    </div>
  </div>
  <div>
    Второй автоматический столбец
    <div class="grid" style="--bs-columns: 12;">
      <div class="g-col-6">6 of 12</div>
      <div class="g-col-4">4 of 12</div>
      <div class="g-col-2">2 of 12</div>
    </div>
  </div>
  <div>Третий автоматический столбец</div>
</div>

Настройка

Настройте количество столбцов, количество строк и ширину пробелов с помощью локальных переменных CSS.

Эти переменные CSS не имеют значения по умолчанию; вместо этого они применяют резервные значения, которые используются до предоставления локального экземпляра. Например, мы используем var(--bs-rows, 1) для наших строк CSS Grid, которые игнорируются, --bs-rows потому что это еще нигде не было установлено. Как только это будет сделано, .grid экземпляр будет использовать это значение вместо резервного 1.

Нет классов сетки

Непосредственные дочерние элементы .grid являются элементами сетки, поэтому их размер будет определяться без явного добавления .g-col класса.

<div class="grid text-center" style="--bs-columns: 3;">
  <div>Auto-column</div>
  <div>Auto-column</div>
  <div>Auto-column</div>
</div>

Столбцы и пробелы

Отрегулируйте количество столбцов и зазор.

<div class="grid text-center" style="--bs-columns: 4; --bs-gap: 5rem;">
  <div class="g-col-2">.g-col-2</div>
  <div class="g-col-2">.g-col-2</div>
</div>

<div class="grid text-center" style="--bs-columns: 10; --bs-gap: 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Добавление строк

Добавление дополнительных строк и изменение расположения столбцов:

<div class="grid text-center" style="--bs-rows: 3; --bs-columns: 3;">
  <div>Auto-column</div>
  <div class="g-start-2" style="grid-row: 2">Auto-column</div>
  <div class="g-start-3" style="grid-row: 3">Auto-column</div>
</div>

Пробелы

Измените вертикальные промежутки, только изменив row-gap. Обратите внимание, что мы используем gap on .grids, но row-gap и column-gap могут быть изменены по мере необходимости.

<div class="grid text-center" style="row-gap: 0;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Из-за этого у вас могут быть разные вертикали и горизонтали gap, которые могут принимать одно значение (со всех сторон) или пару значений (по вертикали и горизонтали). Это можно применить с помощью встроенного стиля для gap или с помощью нашей --bs-gap переменной CSS.

<div class="grid text-center" style="--bs-gap: .25rem 1rem;">
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
  <div class="g-col-6">.g-col-6</div>
</div>

Sass

Одним из ограничений CSS Grid является то, что наши классы по умолчанию по-прежнему генерируются двумя переменными Sass, $grid-columns и $grid-gutter-width. Это фактически предопределяет количество классов, генерируемых в нашем скомпилированном CSS. Здесь у вас есть два варианта:

• Измените переменные Sass по умолчанию и перекомпилируйте свой CSS.
• Используйте встроенные или пользовательские стили для расширения предоставляемых классов.

Например, вы можете увеличить количество столбцов и изменить размер промежутка, а затем изменить размер ваших “столбцов” с помощью сочетания встроенных стилей и предопределенных классов столбцов CSS Grid (например, .g-col-4).

<div class="grid text-center" style="--bs-columns: 18; --bs-gap: .5rem;">
  <div style="grid-column: span 14;">14 columns</div>
  <div class="g-col-4">.g-col-4</div>
</div>

Заключение

CSS Grid — это мощный инструмент, который позволяет нам создавать сложные макеты с минимальными усилиями. Используйте его в своих проектах, чтобы достичь гибкости и красоты в дизайне! ?