fusengine Also covers multi-directional spacing (gap, space-x/space-y) and multi-axis alignment utilities.
Tailwind CSS Layout Utilities (v4.1)
Layout utilities for building responsive layouts with Flexbox, Grid, Positioning, and Container Queries.
Core Topics
- Flexbox:
flex,flex-direction,justify-content,align-items,gap - Grid:
grid,grid-template-columns,grid-template-rows,place-items,place-content - Position:
absolute,relative,fixed,sticky,inset,z-index - Display:
block,inline,inline-block,flex,grid,hidden - Container Queries:
@container,@md,@lg, responsive container sizing - Spacing:
gap,space-x,space-y, multi-directional spacing - Alignment:
justify-start,items-center,place-content, multi-axis alignment - Inset:
inset,inset-x,inset-y,top,right,bottom,left
Display
<div class="block">Block</div>
<div class="inline">Inline</div>
<div class="inline-block">Inline-block</div>
<div class="flex">Flex</div>
<div class="grid">Grid</div>
<div class="hidden">Hidden</div>
References
/flexbox.md- Flexbox utilities, flex direction, flex grow/shrink/grid.md- Grid layout, columns, rows, gaps, placement/position.md- Position utilities, absolute/relative/fixed/sticky, stacking