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