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 1200px, background colors may bleed to edge
- Desktop: 60px padding
- Portrait tablet: 30px padding
- Portrait phone: 15px padding
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