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