Начальное положение колонки сетки

Классы col-start-* задают grid-column-start — линию сетки, с которой начинается элемент. Берите их, чтобы сдвинуть элемент вправо, оставив пустые колонки слева, или поставить его в нужную колонку независимо от порядка разметки.

Пример

Номер линии

Сетка из шести колонок; верхний ряд пронумерован. Линия 1 — левый край первой колонки, поэтому col-start-3 ставит элемент в третью колонку.

col-start-3

1 2 3 4 5 6 col-start-3

col-start-2 col-span-4

1 2 3 4 5 6 col-start-2 col-span-4

col-start-5 col-span-2

1 2 3 4 5 6 col-start-5 col-span-2

HTML

<div class="flex flex-col gap-3 color-on-surface">
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">col-start-3</code>
    <div class="grid grid-col-6 gap-1 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">1</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">2</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">3</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">4</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">5</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">6</span>
      <span class="col-start-3 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">col-start-3</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">col-start-2 col-span-4</code>
    <div class="grid grid-col-6 gap-1 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">1</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">2</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">3</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">4</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">5</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">6</span>
      <span class="col-start-2 col-span-4 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">col-start-2 col-span-4</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">col-start-5 col-span-2</code>
    <div class="grid grid-col-6 gap-1 p-1 border border-dashed border-outline radius-ui">
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">1</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">2</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">3</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">4</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">5</span>
      <span class="p-1 bg-secondary-container color-on-secondary-container radius-ui">6</span>
      <span class="col-start-5 col-span-2 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">col-start-5 col-span-2</span>
    </div>
  </div>
</div>

Классы

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

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

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

Применение

Как выбрать

col-start-1 … col-start-13 — номер линии, с которой начинается элемент. В сетке из двенадцати колонок линий тринадцать.
col-start-auto — место выбирает раскладка; класс нужен, чтобы отменить col-start-* на другой ширине экрана.

С col-span-* класс задаёт начало и ширину; с col-end-* — начало и конец.

Блок по центру сетки

HTML

<div class="grid grid-col-12 gap-2">
  <article class="col-span-12 md:col-start-3 md:col-span-8">Текст статьи</article>
</div>

Ограничения

Номер больше числа линий шаблона добавляет колонки справа от шаблона.
Линии считаются по направлению письма: при dir="rtl" линия 1 — правый край сетки.

Навигация

Главное

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

Содержание