Flexbox и Grid
Утилиты для указания строк в макете сетки.
Class | Styles |
---|---|
grid-rows-<number> | grid-template-rows: repeat(<number>, minmax(0, 1fr)); |
grid-rows-none | grid-template-rows: none; |
grid-rows-subgrid | grid-template-rows: subgrid; |
grid-rows-[<value>] | grid-template-rows: <value>; |
grid-rows-(<custom-property>) | grid-template-rows: var(<custom-property>); |
Используйте утилиты grid-rows-<number>
типа grid-rows-2
и grid-rows-4
для создания сеток с n строками одинакового размера:
<div class="grid grid-flow-col grid-rows-4 gap-4"> <div>01</div> <!-- ... --> <div>09</div></div>
Используйте утилиту grid-rows-subgrid
для принятия треков строк, определенных родителем элемента:
<div class="grid grid-flow-col grid-rows-4 gap-4"> <div>01</div> <!-- ... --> <div>05</div> <div class="row-span-3 grid grid-rows-subgrid gap-4"> <div class="row-start-2">06</div> </div> <div>07</div> <!-- ... --> <div>10</div></div>
Используйте синтаксис grid-rows-[<value>]
, чтобы задать rows на основе полностью пользовательского значения:
<div class="grid-rows-[200px_minmax(900px,1fr)_100px] ..."> <!-- ... --></div>
Для переменных CSS вы также можете использовать синтаксис: grid-rows-(<custom-property>)
<div class="grid-rows-(--my-grid-rows) ..."> <!-- ... --></div>
Это просто сокращение, grid-rows-[var(<custom-property>)]
которое автоматически добавляет функцию var()
.
Префикс a grid-template-rows
утилита с вариантом контрольной точки, например md:
, чтобы применить утилиту только при размерах экрана medium и выше:
<div class="grid grid-rows-2 md:grid-rows-6 ..."> <!-- ... --></div>
Подробнее об использовании вариантов читайте в документации по вариантам.