CSS-сетка
Использование и настройка нашей альтернативной системы макета, основанной на 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-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" 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
.
<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 (например, .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>