Flexbox Grid Mixins

Unit-Set Grid (Experimental stage)

The use of CSS calc() is experimental stage. If $col sets <number> or <width> and $gutter sets <length>, use CSS calc().

$gutter: 12px;

$gutter: 2em;

$col and $gutter are same Unit-Set

$col: 200px, $gutter: 15px

$col: 30em, $gutter: 2em

$col: 25%, $gutter: 5%

$col and $gutter are different Unit-Set

$col: 4, $gutter: 40px, using CSS calc()

$col: 200px, $gutter: 5%

$col: 200px, $gutter: 2em

$col: 30em, $gutter: 5%

$col: 30em, $gutter: 15px

$col: 25%, $gutter: 15px

$col: 25%, $gutter: 2em