Grid System
Flexible and responsive grid layouts for modern web applications
12-Column Grid
Our standard grid system is based on a 12-column layout, providing maximum flexibility for complex layouts.
1
2
3
4
5
6
7
8
9
10
11
12
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--spacing-md);
Column Spanning
Elements can span multiple columns to create varied layouts.
Span 6
Span 6
Span 4
Span 4
Span 4
Span 3
Span 3
Span 3
Span 3
Span 8
Span 4
Full Width
Auto-Fit Grid
Responsive grid that automatically adjusts columns based on available space.
Auto
Auto
Auto
Auto
Auto
Auto
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
Gap Spacing
Control the spacing between grid items using our spacing tokens.
Extra Small Gap (4px)
1
2
3
Small Gap (8px)
1
2
3
Medium Gap (16px)
1
2
3
Large Gap (24px)
1
2
3
Responsive Breakpoints
Breakpoint System
Our grid system adapts to different screen sizes using these breakpoints:
Mobile
320px - 768px
Single column layout, stacked content
Tablet
768px - 1024px
2-3 columns, flexible layouts
Desktop
1024px - 1440px
Full 12-column grid available
Wide
1440px+
Maximum width container, centered content
/* Mobile First Approach */
@media (min-width: 768px) { }
@media (min-width: 1024px) { }
@media (min-width: 1440px) { }
Nested Grids
Grids can be nested within grid items for complex layouts.
A
B
C
D
Single Item
Single Item
E
F
Common Layouts
Sidebar Layout
Sidebar
Main Content
Three Column Layout
Column 1
Column 2
Column 3
Card Grid
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Implementation
CSS Grid Properties
/* Container */
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: var(--spacing-md);
align-items: start | center | end | stretch;
justify-items: start | center | end | stretch;
/* Items */
grid-column: span 6;
grid-row: span 2;
align-self: start | center | end;
justify-self: start | center | end;