Конечное положение колонки сетки

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

Пример

Номер линии

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

col-end-4

1 2 3 4 5 6 col-end-4

col-start-2 col-end-6

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

col-start-1 col-end-7

1 2 3 4 5 6 col-start-1 col-end-7

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-end-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-end-4 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">col-end-4</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">col-start-2 col-end-6</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-end-6 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">col-start-2 col-end-6</span>
    </div>
  </div>
  <div class="flex flex-col gap-1">
    <code class="text-1/2 color-on-surface-variant">col-start-1 col-end-7</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-1 col-end-7 p-1 bg-tertiary-container color-on-tertiary-container radius-ui">col-start-1 col-end-7</span>
    </div>
  </div>
</div>

Классы

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

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

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

Применение

Как выбрать

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

Начало и конец

HTML

<div class="grid grid-col-6 gap-2">
  <div class="col-start-2 col-end-6">Колонки со второй по пятую</div>
</div>

Ограничения

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

Навигация

Главное

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

Содержание