Grid System
A responsive grid system for organizing content across different screen sizes.
Grid Columns
Use
grid-cols-* to define the number of columns.12
12
12
12
12
12
12
12
12
12
12
12
6
6
6
6
6
6
4
4
4
4
3
3
3
2
2
1
Grid Gaps
Use
gap-* to control the spacing between grid items.gap-2
gap-2
gap-2
gap-2
gap-4
gap-4
gap-4
gap-4
gap-8
gap-8
gap-8
gap-8
Usage Guidelines
Responsive: Use breakpoint prefixes (e.g., md:grid-cols-2) to change column counts based on screen size.
Gap: Consistent spacing is key. Use the spacing scale (4, 8, 12, etc.) for gaps.