Grid
The grid provides structure for website content. The flexible design adjusts for different devices.
Source Code
-
cf-grid
Grid in Capital Framework
Style View code
Twelve-column grid with flexible column widths and fixed gutters. The width of the padding on the left and right edge of the grid depends on device size.
- 30px fixed gutter width
- Max width 1230px, background colors may bleed to edge
- Desktop: 30px padding on each side
- Tablet: 30px padding on each side
- Mobile: 15px padding on each side
one
one
one
one
one
one
one
one
one
one
one
one
two
two
two
two
two
two
two
three
two
three
two
three
three
three
three
four
four
four
six
six
twelve
Breakpoints
Five major breakpoints standardize large-scale changes like navigation and sidebar behavior. Use other breakpoints as necessary.
- xs: 0-600px
- sm: 601-900px
- med: 901-1020px
- lg: 1021-1230px
- xl: 1231px and up