Колонки

Классы layout-col-* задают свойство column-count: содержимое блока перетекает из колонки в колонку, как текст в газете. Берите их для длинного текста, списков и карточек разной высоты; для сетки с ячейками по строкам берите грид.

Пример

Число колонок

Шесть одинаковых элементов в двух, трёх и четырёх колонках. Браузер выравнивает колонки по высоте.

layout-col-2

1 2 3 4 5 6

layout-col-3

1 2 3 4 5 6

layout-col-4

1 2 3 4 5 6

HTML

<div class="flex flex-col gap-4 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">layout-col-2</code>
    <div class="layout-col-2 col-gap-3 p-1 border border-dashed border-outline radius-ui">
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">2</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">4</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">6</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">layout-col-3</code>
    <div class="layout-col-3 col-gap-3 p-1 border border-dashed border-outline radius-ui">
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">2</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">4</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">6</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">layout-col-4</code>
    <div class="layout-col-4 col-gap-3 p-1 border border-dashed border-outline radius-ui">
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">1</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">2</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">3</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">4</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">5</span>
      <span class="block m-bottom-1 p-1 bg-primary-container color-on-primary-container radius-ui">6</span>
    </div>
  </div>
</div>

Ширина экрана

С префиксом ширины класс действует от указанной ширины и шире. Меняйте ширину окна просмотра: на узком экране текст идёт в одну колонку, с ширины md — в две, с ширины xl — в три.

HTML

<div class="flex flex-col gap-1 color-on-surface">
  <code class="text-1/2 color-on-surface-variant">layout-col-1 md:layout-col-2 xl:layout-col-3</code>
  <div class="layout-col-1 md:layout-col-2 xl:layout-col-3 col-gap-3 p-1 border border-dashed border-outline radius-ui">
    <div class="m-bottom-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Абзац 1. Текст делится на колонки одинаковой ширины. Браузер выравнивает их по высоте и переносит строки из одной колонки в другую.</div>
    <div class="m-bottom-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Абзац 2. Текст делится на колонки одинаковой ширины. Браузер выравнивает их по высоте и переносит строки из одной колонки в другую.</div>
    <div class="m-bottom-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Абзац 3. Текст делится на колонки одинаковой ширины. Браузер выравнивает их по высоте и переносит строки из одной колонки в другую.</div>
    <div class="m-bottom-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Абзац 4. Текст делится на колонки одинаковой ширины. Браузер выравнивает их по высоте и переносит строки из одной колонки в другую.</div>
    <div class="m-bottom-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Абзац 5. Текст делится на колонки одинаковой ширины. Браузер выравнивает их по высоте и переносит строки из одной колонки в другую.</div>
    <div class="m-bottom-1 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">Абзац 6. Текст делится на колонки одинаковой ширины. Браузер выравнивает их по высоте и переносит строки из одной колонки в другую.</div>
  </div>
</div>

Классы

Класс	CSS	Значения
`layout-col-1`	`column-count: 1`	—
`layout-col-2`	`column-count: 2`	—
`layout-col-3`	`column-count: 3`	—
`layout-col-4`	`column-count: 4`	—
`layout-col-5`	`column-count: 5`	—
`layout-col-6`	`column-count: 6`	—
`layout-col-7`	`column-count: 7`	—
`layout-col-8`	`column-count: 8`	—
`layout-col-9`	`column-count: 9`	—
`layout-col-10`	`column-count: 10`	—
`layout-col-11`	`column-count: 11`	—
`layout-col-12`	`column-count: 12`	—
`layout-col-auto`	`column-count: auto`	—

Условия (что это): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:layout-col-1.

Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.

Применение

Колонки и интервал

Расстояние между колонками задают col-gap-*, разрывы — break-before-*, break-after-* и break-inside-*.

HTML

<div class="layout-col-1 md:layout-col-2 col-gap-4">
  <article class="break-inside-avoid">Карточка 1</article>
  <article class="break-inside-avoid">Карточка 2</article>
</div>

Отмена колонок

layout-col-1 возвращает одну колонку, например с префиксом ширины поверх класса для узкого экрана.

HTML

<div class="layout-col-2 lg:layout-col-1">
  <!-- абзацы -->
</div>

Ограничения

layout-col-auto задаёт column-count: auto. Без ширины колонки (column-width, утилиты для неё нет) браузер не делит блок на колонки, и содержимое остаётся в одной колонке.
Порядок чтения в колонках — сверху вниз, затем в следующую колонку. Для карточек, которые читают по строкам, берите грид.
У семейства нет префиксов состояния.

Навигация

Главное

Документация

Содержание

Колонки

Пример

Число колонок

Ширина экрана

Классы

Применение

Колонки и интервал

Отмена колонок

Ограничения

См. также

Settings