auto-cols-* / auto-rows-* size implicitly created tracks (auto, min, max, fr). This family contains 8 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
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-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); |
Example#
example
<div class="grid auto-rows-fr gap-4">Equal-height rows</div>Responsive & variants#
Every class here accepts screen prefixes (sm: … xl:) and state variants — md:hover:p-4 style stacks compile to a single media query. See responsive/index|Responsive design and variants/index|Variants.
Best practices#
- auto-rows-fr equalizes row heights automatically
Related#
utilities/flexbox/flex-direction|Flexbox · utilities/spacing/gap|Gap