Grid System
Our grid system provides a consistent way to layout content across different screen sizes.
Grid System
Our grid system is based on Tailwind's grid utilities, providing a flexible 12-column layout system.
12-Column Grid
The foundation of our layout system
1
2
3
4
5
6
7
8
9
10
11
12
col-span-12
col-span-6
col-span-6
col-span-4
col-span-4
col-span-4
col-span-3
col-span-3
col-span-3
col-span-3
Responsive Breakpoints
Adapting layouts to different screen sizes
Default Breakpoints
| Breakpoint | Prefix | Minimum Width | CSS |
|---|---|---|---|
| Small | sm: | 640px | @media (min-width: 640px) { ... } |
| Medium | md: | 768px | @media (min-width: 768px) { ... } |
| Large | lg: | 1024px | @media (min-width: 1024px) { ... } |
| Extra Large | xl: | 1280px | @media (min-width: 1280px) { ... } |
| 2X Large | 2xl: | 1536px | @media (min-width: 1536px) { ... } |
Responsive Example
This example shows a grid that changes from 1 column on mobile to 2 columns on small screens, 3 columns on medium screens, and 4 columns on large screens.
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8