CSS-сетка
Узнайте, как включить, использовать и настроить нашу альтернативную систему макетов, построенную на CSS Grid, с примерами и фрагментами кода.
Система сеток 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
. -
Таким образом, в отличие от
.row
s,.grid
s не имеет отрицательных отступов, и утилиты отступов нельзя использовать для изменения желобов сетки. По умолчанию зазоры сетки применяются по горизонтали и вертикали. См. раздел настройки для более подробной информации. -
Встроенные и пользовательские стили следует рассматривать как замену классам модификаторов (например,
style="--bs-columns: 3;"
vsclass="row-cols-3"
). -
Вложение работает аналогично, но может потребовать сброса количества столбцов для каждого экземпляра вложенного файла
.grid
. Подробности смотрите в разделе вложенности .
Примеры
Три столбца
.g-col-4
С помощью классов можно создать три столбца одинаковой ширины для всех окон просмотра и устройств . Добавьте адаптивные классы , чтобы изменить макет по размеру области просмотра.
<div class="grid">
<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">
<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">
<div class="g-col-6">.g-col-6</div>
<div class="g-col-6">.g-col-6</div>
</div>
Оберточная бумага
Элементы сетки автоматически переносятся на следующую строку, когда по горизонтали больше нет места. Обратите внимание, что gap
применяется к горизонтальным и вертикальным промежуткам между элементами сетки.
<div class="grid">
<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">
<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">
<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">
<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
s. Однако, в отличие от сетки по умолчанию, эта сетка наследует изменения в строках, столбцах и промежутках. Рассмотрим пример ниже:
- Мы переопределяем количество столбцов по умолчанию с помощью локальной переменной CSS:
--bs-columns: 3
. - В первом автостолбце количество столбцов наследуется, и каждый столбец составляет одну треть доступной ширины.
- Во втором автостолбце мы сбросили количество столбцов во вложенных столбцах
.grid
до 12 (наше значение по умолчанию). - Третий автоматический столбец не имеет вложенного содержимого.
На практике это позволяет создавать более сложные и настраиваемые макеты по сравнению с нашей системой сетки по умолчанию.
<div class="grid" 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.
Переменная | Резервное значение | Описание |
---|---|---|
--bs-rows |
1 |
Количество строк в вашем шаблоне сетки |
--bs-columns |
12 |
Количество столбцов в вашем шаблоне сетки |
--bs-gap |
1.5rem |
Размер зазора между столбцами (вертикальным и горизонтальным) |
Эти переменные CSS не имеют значения по умолчанию; вместо этого они применяют резервные значения, которые используются до тех пор , пока не будет предоставлен локальный экземпляр. Например, мы используем var(--bs-rows, 1)
строки CSS Grid, которые игнорируются --bs-rows
, потому что они еще нигде не установлены. Как только это произойдет, .grid
экземпляр будет использовать это значение вместо резервного значения 1
.
Нет классов сетки
Непосредственные дочерние элементы .grid
являются элементами сетки, поэтому их размер будет изменяться без явного добавления .g-col
класса.
<div class="grid" style="--bs-columns: 3;">
<div>Auto-column</div>
<div>Auto-column</div>
<div>Auto-column</div>
</div>
Столбцы и пробелы
Отрегулируйте количество столбцов и зазор.
<div class="grid" 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" 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" 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 .grid
s, но row-gap
и column-gap
можно изменить по мере необходимости.
<div class="grid" 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
s, которые могут принимать одно значение (все стороны) или пару значений (вертикальное и горизонтальное). Это можно применить с помощью встроенного стиля для gap
или с помощью нашей --bs-gap
переменной CSS.
<div class="grid" 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" 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>