Перейти к основному содержанию Перейти к навигации по документам
Добавлено в v5.1Cмотреть на GitHub

CSS-сетка

Использование и настройка нашей альтернативной системы макета, основанной на CSS Grid, с примерами и фрагментами кода.

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

Внимание! Наша система CSS Grid является экспериментальной и поддерживает версию 5.1.0! Мы включили ее в 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 используют свойство 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. Добавьте отзывчивые классы, чтобы изменить макет по размеру области просмотра.

.g-col-4
.g-col-4
.g-col-4
html
<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>

Адаптивность

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

.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
.g-col-6 .g-col-md-4
html
<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>

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

.g-col-6
.g-col-6
html
<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 применяется к горизонтальным и вертикальным промежуткам между элементами сетки.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html
<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-column-start и grid-column-end. Стартовые классы являются сокращением для первых. Соедините их с классами столбцов, чтобы задать размер и выровнять столбцы, как вам нужно. Начальные классы начинаются с 1, поскольку 0 является недопустимым значением для этих свойств.

.g-col-3 .g-start-2
.g-col-4 .g-start-6
html
<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), размер каждого элемента сетки автоматически будет равен одному столбцу.

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

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

.g-col-6
1
1
1
1
1
1
html
<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 (наше значение по умолчанию).
  • В третьем автоколонке нет вложенного содержимого.

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

Первая автоколонка
Автоколонка
Автоколонка
Вторая автоколонка
6 из 12
4 из 12
2 из 12
Третья автоколонка
html
<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.

Переменная Резервное значение Описание
--bs-rows 1 Количество строк в шаблоне сетки
--bs-columns 12 Количество столбцов в шаблоне сетки
--bs-gap 1.5rem Размер промежутка между столбцами (по вертикали и горизонтали)

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

Без классов сетки

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

Автоколонка
Автоколонка
Автоколонка
html
<div class="grid text-center" style="--bs-columns: 3;">
  <div>Автоколонка</div>
  <div>Автоколонка</div>
  <div>Автоколонка</div>
</div>

Столбцы и промежутки

Отрегулируйте количество столбцов и промежутков.

.g-col-2
.g-col-2
html
<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>
.g-col-6
.g-col-4
html
<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>

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

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

Автоколонка
Автоколонка
Автоколонка
html
<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 можно изменить по мере необходимости.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html
<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.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
html
<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 (например, .g-col-4).

14 колонок
.g-col-4
html
<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>