This page is being translated; the original is shown (Русский ).
Автоматическая ширина столбцов сетки
Классы auto-cols-* задают grid-auto-columns — ширину колонок, которых нет
в шаблоне и которые сетка создаёт сама. Берите их вместе с grid-flow-col,
когда число колонок зависит от числа элементов: панель кнопок, ряд вкладок,
лента карточек.
Пример
Ширина колонок
Сетка с grid-flow-col без шаблона колонок: каждый элемент получает свою
колонку. Подпись над образцом — класс контейнера.
auto-cols
Короткий
Элемент с длинным текстом
Средний текст
auto-cols-min
Короткий
Элемент с длинным текстом
Средний текст
auto-cols-max
Короткий
Элемент с длинным текстом
Средний текст
auto-cols-fr
Короткий
Элемент с длинным текстом
Средний текст
HTML wrap_text Wrap source lines content_copy Copy
<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" >auto-cols</code >
<div class ="grid grid-flow-col auto-cols gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >Короткий</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >Элемент с длинным текстом</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >Средний текст</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >auto-cols-min</code >
<div class ="grid grid-flow-col auto-cols-min gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >Короткий</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >Элемент с длинным текстом</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >Средний текст</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >auto-cols-max</code >
<div class ="grid grid-flow-col auto-cols-max gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >Короткий</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >Элемент с длинным текстом</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >Средний текст</span >
</div >
</div >
<div class ="flex flex-col gap-1" >
<code class ="text-1/2 color-on-surface-variant" >auto-cols-fr</code >
<div class ="grid grid-flow-col auto-cols-fr gap-1 p-1 border border-dashed border-outline radius-ui" >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >Короткий</span >
<span class ="p-1 bg-tertiary-container color-on-tertiary-container radius-ui" >Элемент с длинным текстом</span >
<span class ="p-1 bg-primary-container color-on-primary-container radius-ui" >Средний текст</span >
</div >
</div >
</div >
Классы
Класс
CSS
Значения
auto-colsgrid-auto-columns: auto—
auto-cols-mingrid-auto-columns: -webkit-min-content; grid-auto-columns: min-content—
auto-cols-maxgrid-auto-columns: -webkit-max-content; grid-auto-columns: max-content—
auto-cols-frgrid-auto-columns: minmax(0, 1fr)—
Условия (что это ): ширина экрана — sm:, md:, lg:, xl:, xxl:; состояния — нет. Например: sm:auto-cols.
Классы и переменные собраны из CSS выпуска и обновляются вместе с ним.
Применение
Как выбрать
auto-cols — по содержимому, а свободное место делится между колонками.
Это значение по умолчанию.auto-cols-min — по самому длинному слову: текст переносится, колонки
самые узкие.auto-cols-max — по тексту без переносов; свободное место остаётся.auto-cols-fr — колонки равной ширины, сколько бы их ни было.
Кнопки равной ширины
HTML wrap_text Wrap source lines content_copy Copy
<div class ="grid grid-flow-col auto-cols-fr gap-1" >
<button type ="button" >Назад</button >
<button type ="button" >Сохранить черновик</button >
<button type ="button" >Далее</button >
</div >
Ограничения
Классы действуют только на колонки вне шаблона: при grid-col-* они
касаются колонок, которые элементы добавили справа от шаблона.
См. также
Предыдущая Сетка Следующая Автоматическое формирование сетки
