CSS-сетка

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

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

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

• CSS Grid является опциональным. Отключите систему сетки по умолчанию, установив $enable-grid-classes: falseи включив сетку CSS, установив $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.

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

• Встроенные и пользовательские стили следует рассматривать как замену классам модификаторов (например, 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. Начальные классы являются сокращением от первого. Соедините их с классами столбцов, чтобы изменить размер и выровнять столбцы так, как вам нужно. Начальные классы начинаются 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 позволяет легко вкладывать .grids. Однако, в отличие от сетки по умолчанию, эта сетка наследует изменения в строках, столбцах и промежутках. Рассмотрим пример ниже:

• Мы переопределяем количество столбцов по умолчанию с помощью локальной переменной 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 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. Обратите внимание, что мы используем gapon .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>

Из-за этого у вас могут быть разные вертикальные и горизонтальные gaps, которые могут принимать одно значение (все стороны) или пару значений (вертикальное и горизонтальное). Это можно применить с помощью встроенного стиля для 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>

Сасс

Одним из ограничений 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>