CSS Grid

Система сетки Bootstrap по умолчанию представляет собой кульминацию более чем десятилетия техник CSS-макетов, опробованных и проверенных миллионами людей. Однако она также была создана без многих современных возможностей и техник CSS, которые мы видим в браузерах, таких как новый 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-*. Это потому, что наши колонки CSS Grid используют свойство grid-column вместо width.

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

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

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

<div class="grid text-center overflow-x-auto" 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>Авто-колонка</div>
  <div>Авто-колонка</div>
  <div>Авто-колонка</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>Авто-колонка</div>
  <div class="g-start-2" style="grid-row: 2">Авто-колонка</div>
  <div class="g-start-3" style="grid-row: 3">Авто-колонка</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 колонок</div>
  <div class="g-col-4">.g-col-4</div>
</div>