Layout System
The foundation of any visual design. Layouts create structure, hierarchy, and rhythm.
1. The Grid System
Grids organize design elements into a consistent framework. A strong grid system ensures alignment and balance across different screen sizes.
- Columns: Vertical divisions of the screen.
- Gutters (Gaps): Space between columns.
- Margins: Space outside the grid.
Grid System Playground
Adjust the parameters to see how the grid responds.
✓ Do
- Use `gap` utility for consistent spacing
- Align main content containers to the grid
- Use standard 4px/8px spacing scale
✕ Don't
- Don't use random margins to push content
- Don't mix different grid systems in one page
- Don't hardcode pixel widths for columns
2. Common Structures
Beyond grids, certain high-level layout patterns have become standard in web application design.
Common Layout Structures
Essential structural patterns used in modern web applications.
When to use Sidebar Layout:
Standard dashboard layout with fixed sidebar
3. Code Challenge
Design often happens in code. Try modifying the Tailwind classes below to change the card's appearance.
- Change
rounded-xltorounded-full - Change
bg-whitetobg-blue-500 - Add
rotate-3to see what happens
className="...")4. Responsive Design
Layouts must adapt to different viewport sizes. You generally choose between:
Elements resize proportionally. Good for full-immersion apps (maps, dashboards).
Container locks at a max-width (e.g. 1280px). Best for reading and content consumption.
Common breakpoints include:
5. Common Patterns
F-Pattern
Users scan the screen in an F-shape. Ideal for text-heavy content.
Z-Pattern
Users scan from top-left to top-right, then diagonally down. Ideal for landing pages.