Grid Columns

Soupee is build with flexbox to manage grids and columns.

# Basic grid

To setup a grid of items seperated in columns Soupee uses:

  1. a .flex-grid wrapper container.
  2. a .row container.
  3. Use many .col as columns required.
  4. A set of column size modifiers.

.flex-grid

.row

.col

.col

.col

.col

# Column Sizes

.half

.half

.one-thirds

.two-thirds

.one-quarters

.three-quarters

.one-fifths

.four-fifths

.five-twelfths

.seven-twelfths

.one-tenths

.nine-tenths

# Column Sizes Responsive

Use -sm, -md, -lg or -xl suffix for responsive breakpoints.

.full .one-thirds-sm .one-fifths-md

.half .two-thirds-sm .one-fifths-md

.half .two-thirds-sm .one-fifths-md

.half .one-thirds-sm .one-fifths-md

.half .full-sm .one-fifths-md