Bootstrap 5: Сеточная система

Bootstrap Grid — это способ делить страницу на колонки. В основе лежит 12-колоночная сетка: любой ряд можно делить на части, кратные 12.

Базовая структура

Сетка работает через три класса: container, row, col-*.

<div class="container">
  <div class="row">
    <div class="col-4">Левая колонка</div>
    <div class="col-4">Центральная</div>
    <div class="col-4">Правая колонка</div>
  </div>
</div>

col-4 + col-4 + col-4 = 12 — колонки занимают всю ширину ряда. Можно делить иначе: col-3 + col-9, col-6 + col-6, и так далее.

Точки останова (Breakpoints)

Bootstrap включает пять точек останова:

Классы работают снизу вверх: col-md-6 означает «6 колонок начиная с планшета и шире, на мобиле — полная ширина».

Адаптивные колонки

<div class="row">
  <!-- На мобиле 12 (полная), на планшете 6, на десктопе 4 -->
  <div class="col-12 col-md-6 col-lg-4">Карточка 1</div>
  <div class="col-12 col-md-6 col-lg-4">Карточка 2</div>
  <div class="col-12 col-md-6 col-lg-4">Карточка 3</div>
</div>

Правило: Несколько классов col-* на одном элементе задают ширину для разных экранов.

Автоматические колонки

Если не указывать число, Bootstrap делит пространство поровну:

<div class="row">
  <div class="col">Автоширина 1</div>
  <div class="col">Автоширина 2</div>
  <div class="col">Автоширина 3</div>
</div>

Три элемента col — каждый займёт треть ряда.

Смещение колонок (offset)

<div class="row">
  <div class="col-md-6 offset-md-3">
    Контент по центру (пропускает 3 колонки слева)
  </div>
</div>

offset-md-3 сдвигает элемент на 3 колонки вправо. Работает со всеми точками останова: offset-lg-2, offset-sm-1 и т.д.

Вложенные сетки

Сетки можно вкладывать: внутри колонки снова размещают row:

<div class="row">
  <div class="col-md-8">
    <div class="row">
      <div class="col-6">Вложенная левая</div>
      <div class="col-6">Вложенная правая</div>
    </div>
  </div>
  <div class="col-md-4">Боковая панель</div>
</div>

Пример: сетка карточек DevBlog

Три карточки в ряд на десктопе, одна на мобиле:

<div class="container py-4">
  <div class="row g-4">
    <!-- g-4 задаёт отступы между карточками (gutters) -->
    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Статья 1</h5>
          <p class="card-text">Краткое описание статьи блога.</p>
          <a href="#" class="btn btn-primary">Читать</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Статья 2</h5>
          <p class="card-text">Краткое описание статьи блога.</p>
          <a href="#" class="btn btn-primary">Читать</a>
        </div>
      </div>
    </div>

    <div class="col-12 col-md-6 col-lg-4">
      <div class="card h-100">
        <div class="card-body">
          <h5 class="card-title">Статья 3</h5>
          <p class="card-text">Краткое описание статьи блога.</p>
          <a href="#" class="btn btn-primary">Читать</a>
        </div>
      </div>
    </div>
  </div>
</div>

Поведение:
- Телефон: 1 карточка в ряд (col-12)
- Планшет: 2 карточки в ряд (col-md-6)
- Десктоп: 3 карточки в ряд (col-lg-4)

Выравнивание внутри row

<!-- Вертикальное выравнивание -->
<div class="row align-items-center">...</div>
<div class="row align-items-start">...</div>

<!-- Горизонтальное выравнивание -->
<div class="row justify-content-center">...</div>
<div class="row justify-content-between">...</div>

Эти классы — обёртки над Flexbox: row в Bootstrap является flex-контейнером.