grid-flow-row/col/dense — direction and hole-filling for implicit tracks. This family contains 5 generated classes in Nakshora 3.0.
Classes#
| Class | Generated CSS |
|---|---|
grid-flow-row | grid-auto-flow: row; |
grid-flow-col | grid-auto-flow: column; |
grid-flow-dense | grid-auto-flow: dense; |
grid-flow-row-dense | grid-auto-flow: row dense; |
grid-flow-col-dense | grid-auto-flow: column dense; |
Example#
example
<div class="grid grid-flow-col auto-cols-max gap-4">Horizontal scroller</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#
- grid-flow-col + auto-cols-max = horizontal snap rails
- dense backfills gaps at the cost of visual order
Related#
utilities/flexbox/flex-direction|Flexbox · utilities/spacing/gap|Gap