Columns with auto width

Just place column into row

Responsive columns

Use prefixes to change column width on different screens

Nested grid

You can place column in column, but you need to wrap nested columns to apply gutter

Auto width for column

Use prefix "auto" if you don't want to apply width on column

Alignment for rows

By default all columns in row are stretched

Use prefixes "top", "middle", "bottom" to align all columns in row

Distribution for rows

Use prefixes "right", "left", "center", "around", "between" to align all columns in row

Right aligned columns

Left aligned columns

Centered columns

Arround alignment

Between alignment

Direction for rows

Use prefixes "row", "row-reverse", "column", "column-reverse"

By default all rows has "row" direction. you don't need to use "row" prefix.

Note: to avoid collapsing bug in IE11 for column and column-reverse direction "stretch" prefix should be used for columns (col-stretch | col-xs-stretch).
If you don't need to support IE11 no need to use "stretch" prefix.

Reversed row

Column direction

Reversed column direction

Alignment for columns

Use prefixes "top", "middle", "bottom" to align column

Ordering for columns

Use prefixes "first", "last", "ordered" to order columns

Offsets for columns

Use offset prefixes for column to apply custom offset

Gutters

Use gutter prefixes for rows to customize gutters

Default (without prefixes)

Without gutters (row--gutter-none)

Large gutter (row--gutter-large)

grid2flex examples

Text alignment

Use "baseline" prefix to better bottom text alignment

Footer at bottom using grid2flex