Layout Patterns

Responsive layouts that adapt seamlessly across all devices

Grid System

Our flexible grid system ensures consistent spacing and alignment across all screen sizes.

1
2
3
4
5
6
7
8
9
10
11
12

Full Width

12 columns

Two Columns

6 columns
6 columns

Three Columns

4 cols
4 cols
4 cols

Sidebar Layout

Sidebar
Main Content

Responsive Breakpoints

Our layouts adapt at key breakpoints to provide optimal experiences on every device.

Mobile

320px - 768px

  • Single column layouts
  • Stacked navigation
  • Full-width content
  • Touch-optimized controls

Tablet

769px - 1024px

  • Two column layouts
  • Collapsible sidebar
  • Flexible grids
  • Adaptive typography

Desktop

1025px+

  • Multi-column layouts
  • Persistent navigation
  • Maximum content width
  • Advanced interactions

Common Layout Patterns

Pre-built layout patterns for common use cases throughout the application.

Product Grid

Card Layout

Dashboard Layout

Split View

📐 Layout Best Practices

Consistent Spacing

Use our spacing scale (4px base) for all margins and padding to maintain visual rhythm.

Mobile-First Design

Start with mobile layouts and progressively enhance for larger screens.

Flexible Containers

Use percentage-based widths and CSS Grid for truly responsive layouts.

Content Priority

Ensure the most important content is visible without scrolling on all devices.