CSS Сетка

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

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

В 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-*. Это связано с тем, что столбцы нашей CSS-сетки используют свойство grid-column, а не width.

• Размеры столбцов и отступов задаются через переменные CSS. Установите их на родительском элементе .grid и настройте их по своему усмотрению, как в строке, так и в стиле CSS, используя --bs-columns и --bs-gap.

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

Ключевые различия

По сравнению со стандартной системой сеток:

• Утилиты Flex не влияют на столбцы CSS Grid таким же образом.

• Отступы заменены на промежутки. Свойство gap заменяет горизонтальные padding из нашей стандартной системы сеток и функционирует больше как margin.

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

• Встроенные и пользовательские стили следует рассматривать как замену модификаторным классам (например, style="--bs-columns: 3;" против 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. Классы начала — это сокращённая запись для первого. Используйте их вместе с классами столбцов для размера и выравнивания столбцов по мере необходимости. Классы начала начинаются с 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>

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

Когда на элементах сетки (непосредственных потомках .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ы. Однако, в отличие от стандартной, эта сетка наследует изменения в строках, столбцах и промежутках. Рассмотрим пример:

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

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

<div class="grid text-center" style="--bs-columns: 3;">
  <div>
    First auto-column
    <div class="grid">
      <div>Auto-column</div>
      <div>Auto-column</div>
    </div>
  </div>
  <div>
    Second auto-column
    <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>Third auto-column</div>
</div>

Настройка

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

Эти переменные CSS не имеют значения по умолчанию; вместо этого они применяют значения по умолчанию, которые используются до тех пор, пока не будет предоставлено локальное значение. Например, мы используем var(--bs-rows, 1) для строк нашей CSS-сетки, что игнорирует --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 для .gridов, но 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, или с помощью нашей переменной CSS --bs-gap.

<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>