Grid Infrastructure
Foundational layout patterns for diverse SaaS needs. Predictable 12-column systems, auto-wrapping cards, and fixed-fluid layouts without the magic numbers.
Live Preview
Dashboard Overview
Revenue
$48.2k+12.5%
Users
2,400+4.1%
Bounce Rate
42%-0.8%
Active
1,024+8.2%
Traffic Overview
Recent Users
Alice Freeman
Admin
Bob Smith
Editor
Charlie Kim
Viewer
Best Practices
- Use 12-col for main dashboard layouts. It divides cleanly by 2, 3, 4, and 6.
- Use Fixed Sidebar Split (
280px 1fr) for settings to prevent sidebar collapse.
Common Mistakes
- Avoid magic numbers (e.g.
w-[350px]). Use grid fractions or auto-fit. - Do not use Grid for 1D layouts (navbars, lists). Use Flexbox instead.