Grid and layout
The grid provides structure for website content. The flexible design adjusts for different devices.
Repository
-
cf-grid
Grid in the Capital Framework
StyleView 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