Flexbox и Grid
Утилиты для управления размером неявно созданных столбцов сетки.
| Class | Styles |
|---|---|
auto-cols-auto | grid-auto-columns: auto; |
auto-cols-min | grid-auto-columns: min-content; |
auto-cols-max | grid-auto-columns: max-content; |
auto-cols-fr | grid-auto-columns: minmax(0, 1fr); |
auto-cols-(<custom-property>) | grid-auto-columns: var(<custom-property>); |
auto-cols-[<value>] | grid-auto-columns: <value>; |
Используйте утилиты типа auto-cols-min и auto-cols-max для управления размером неявно созданных столбцов сетки:
<div class="grid auto-cols-max grid-flow-col"> <div>01</div> <div>02</div> <div>03</div></div>Используйте синтаксис auto-cols-[<value>] , чтобы задать size of implicitly-created grid columns на основе полностью пользовательского значения:
<div class="auto-cols-[minmax(0,2fr)] ..."> <!-- ... --></div>Для переменных CSS вы также можете использовать синтаксис: auto-cols-(<custom-property>)
<div class="auto-cols-(--my-auto-cols) ..."> <!-- ... --></div>Это просто сокращение, auto-cols-[var(<custom-property>)] которое автоматически добавляет функцию var().
Префикс a grid-auto-columns утилита с вариантом контрольной точки, например md:, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="grid grid-flow-col auto-cols-max md:auto-cols-min ..."> <!-- ... --></div>Подробнее об использовании вариантов читайте в документации по вариантам.