Grid

The grid provides structure for website content. The flexible design adjusts for different devices.

Source Code

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