Сітка 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. Початкові заняття є скороченням для першого. Поєднайте їх із класами стовпців, щоб задати розмір і вирівняти стовпці, як вам потрібно. Початок класів починається з 1as 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 дозволяє легко вкладати .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, які ігноруються --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>