flexbox-grid-mixins
Version:
Sass Mixins to generate Flexbox grid
1,711 lines (1,540 loc) • 26.4 kB
HTML
<html>
<head>
<title>Flexbox Grid Mixins - Flexbox Grid Mixins Example</title>
<link rel="stylesheet" href="../css/default.css">
<link rel="stylesheet" href="../css/example.css">
</head>
<body>
<div class="header">
<h1 class="header-title">Flexbox Grid Mixins</h1>
<p class="header-description">Sass Mixins to generate Flexbox grid</p>
</div>
<div class="container">
<h2 id="flexbox-grid-mixins-example">Flexbox Grid Mixins Example</h2>
<div class="grid">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>No Gutters Grid</h3>
<div class="grid--no-gutter">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>Auto Size Grid</h3>
<div class="grid">
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto auto auto auto auto auto auto auto auto auto auto auto auto auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto
</div>
</div>
<h3>Equal Size Grid</h3>
<div class="grid">
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal equal equal equal equal equal equal equal equal equal equal equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal
</div>
</div>
<h3>Nesting Grid</h3>
<div class="grid">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
<div class="grid--no-gutter">
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
</div>
</div>
<div class="grid">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
<div class="grid--no-gutter">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
<div class="grid--no-gutter">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
<div class="grid--no-gutter">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Multi-line Grid</h2>
<div class="grid--multi-line">
<div class="grid__col-12">
12
</div>
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
<h3>Multi-line Grid using ul</h3>
<ul class="grid">
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
<li class="grid__col-3">3</li>
</ul>
<h2 id="grid-columns">Grid Columns</h2>
<h3>Default 12 Columns</h3>
<div class="grid">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid">
<div class="grid__col-6">
6 / 12
</div>
<div class="grid__col-6">
6 / 12
</div>
</div>
<div class="grid">
<div class="grid__col-3">
3 / 12
</div>
<div class="grid__col-9">
9 / 12
</div>
</div>
<h3>3 Columns</h3>
<div class="grid-3-columns">
<div class="grid__col-3">
3
</div>
</div>
<div class="grid-3-columns">
<div class="grid__col-1">
1 / 3
</div>
<div class="grid__col-2">
2 / 3
</div>
</div>
<h3>24 Columns</h3>
<div class="grid-24-columns">
<div class="grid__col-24">
24
</div>
</div>
<div class="grid-24-columns">
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
<div class="grid__col-2">
2 / 24
</div>
</div>
<div class="grid-24-columns">
<div class="grid__col-4">
4 / 24
</div>
<div class="grid__col-4">
4 / 24
</div>
<div class="grid__col-4">
4 / 24
</div>
<div class="grid__col-4">
4 / 24
</div>
<div class="grid__col-4">
4 / 24
</div>
<div class="grid__col-4">
4 / 24
</div>
</div>
<div class="grid-24-columns">
<div class="grid__col-8">
8 / 24
</div>
<div class="grid__col-8">
8 / 24
</div>
<div class="grid__col-8">
8 / 24
</div>
</div>
<div class="grid-24-columns">
<div class="grid__col-12">
12 / 24
</div>
<div class="grid__col-12">
12 / 24
</div>
</div>
<h2 id="preset-grid-columns">Preset Grid Columns</h2>
<h3>null - @include grid-col($col: null);</h3>
<div class="grid">
<div class="grid__col--null">
null
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<div class="grid">
<div class="grid__col--null">
null
</div>
<div class="grid__col--null">
null null null null null null null null null null null null null null null null null null
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>initial - @include grid-col($col: initial);</h3>
<div class="grid">
<div class="grid__col--initial">
initial
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<div class="grid">
<div class="grid__col--initial">
initial
</div>
<div class="grid__col--initial">
initial initial initial initial initial initial initial initial initial initial initial initial
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3><number> - @include grid-col($col: <number>);</h3>
<div class="grid">
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<div class="grid">
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<div class="grid">
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>auto - @include grid-col($col: auto);</h3>
<div class="grid">
<div class="grid__col--auto">
auto
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
auto
</div>
<div class="grid__col--auto">
auto auto auto auto auto auto auto auto auto auto auto auto auto auto
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>equal - @include grid-col($col: equal);</h3>
<div class="grid">
<div class="grid__col--equal">
equal
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
equal
</div>
<div class="grid__col--equal">
equal equal equal equal equal equal equal equal equal equal
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>none - @include grid-col($col: none);</h3>
<div class="grid">
<div class="grid__col--none">
none
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<div class="grid">
<div class="grid__col--none">
none
</div>
<div class="grid__col--none">
none none none none none none none none none none none none
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>positive number - @include grid-col($col: positive);</h3>
<div class="grid">
<div class="grid__col--positive">
grow: 1
</div>
<div class="grid__col--positive-2">
grow: 2
</div>
</div>
<div class="grid">
<div class="grid__col--positive">
grow: 1
</div>
<div class="grid__col--positive-2">
grow: 2
</div>
<div class="grid__col--positive-3">
grow: 3
</div>
</div>
<div class="grid">
<div class="grid__col--positive">
grow: 1
</div>
<div class="grid__col--positive-2">
grow: 2
</div>
<div class="grid__col--positive">
grow: 1
</div>
</div>
<div class="grid">
<div class="grid__col--positive-2">
grow: 2
</div>
<div class="grid__col--positive-4">
grow: 4
</div>
</div>
<h2 id="grid-direction">Grid Direction</h2>
<h3>Row - @include grid($flex-direction: row);</h3>
<div class="grid--row">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Row Reverse - @include grid($flex-direction: row-reverse);</h3>
<div class="grid--row-reverse">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Column - @include grid($flex-direction: column);</h3>
<div class="grid--column">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Column Reverse - @include grid($flex-direction: column-reverse);</h3>
<div class="grid--column-reverse">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h2 id="wrap-alignment">Wrap Alignment</h2>
<h3>null - @include grid($flex-wrap: null);</h3>
<div class="grid--wrap-null">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
2
</div>
<div class="grid__col-3">
2
</div>
</div>
<h3>nowrap - @include grid($flex-wrap: nowrap);</h3>
<div class="grid--wrap-nowrap">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
2
</div>
<div class="grid__col-3">
2
</div>
</div>
<h3>wrap - @include grid($flex-wrap: wrap);</h3>
<div class="grid--wrap">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
2
</div>
<div class="grid__col-3">
2
</div>
</div>
<h3>wrap reverse - @include grid($flex-wrap: wrap-reverse);</h3>
<div class="grid--wrap-reverse">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-3">
2
</div>
<div class="grid__col-3">
2
</div>
</div>
<h2 id="row-alignment">Row Alignment</h2>
<h3>Left row - @include grid($justify-content: flex-start);</h3>
<div class="grid--left-row">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Center row - @include grid($justify-content: center);</h3>
<div class="grid--center-row">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Right row - @include grid($justify-content: flex-end);</h3>
<div class="grid--right-row">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Space around row - @include grid($justify-content: space-around);</h3>
<div class="grid--space-around-row">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Space between row - @include grid($justify-content: space-between);</h3>
<div class="grid--space-between-row">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Space evenly row - @include grid($justify-content: space-evenly);</h3>
<div class="grid--space-evenly-row">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Top row - @include grid($align-items: flex-start);</h3>
<div class="grid--top-row">
<div class="grid__col-1">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
3<br>
</div>
</div>
<h3>Middle row - @include grid($align-items: center);</h3>
<div class="grid--middle-row">
<div class="grid__col-1">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
3<br>
</div>
</div>
<h3>Bottom row - @include grid($align-items: flex-end);</h3>
<div class="grid--bottom-row">
<div class="grid__col-1">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
3<br>
</div>
</div>
<h3>Stretch row - @include grid($align-items: stretch);</h3>
<div class="grid--stretch-row">
<div class="grid__col-1">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
3<br>
</div>
</div>
<h3>Baseline row - @include grid($align-items: baseline);</h3>
<div class="grid--baseline-row">
<div class="grid__col-1">
1<br>
1<br>
1<br>
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
3<br>
</div>
</div>
<h3>Centered row</h3>
<div class="grid--centered-row">
<div class="grid__col-centered">
3<br>
</div>
<div class="grid__col-centered">
3<br>
</div>
<div class="grid__col-centered">
3<br>
</div>
</div>
<h3 id="items-row-alignment">Items row Alignment</h3>
<div class="grid--items-row-alignment">
<div class="grid__col">
<strong>$align-self: null</strong><br>
null<br>
null<br>
null<br>
null<br>
null<br>
null<br>
</div>
<div class="grid__col-auto">
<strong>$align-self: auto</strong><br>
Auto<br>
</div>
<div class="grid__col-top">
<strong>$align-self: flex-start</strong><br>
Top<br>
</div>
<div class="grid__col-middle">
<strong>$align-self: center</strong><br>
Middle<br>
</div>
<div class="grid__col-bottom">
<strong>$align-self: flex-end</strong><br>
Bottom<br>
</div>
<div class="grid__col-stretch">
<strong>$align-self: stretch</strong><br>
Stretch<br>
</div>
<div class="grid__col-baseline">
<strong>$align-self: baseline</strong><br>
Baseline<br>
</div>
</div>
<h2>Column Alignment</h2>
<h3>Left column - @include grid($align-items: flex-start);</h3>
<div class="grid--left-column">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Center column - @include grid($align-items: center);</h3>
<div class="grid--center-column">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Right column - @include grid($align-items: flex-end);</h3>
<div class="grid--right-column">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
</div>
<h3>Centered column</h3>
<div class="grid--centered-column">
<div class="grid__col-centered">
3<br>
</div>
<div class="grid__col-centered">
3<br>
</div>
</div>
<h3 id="items-column-alignment">Items column Alignment</h3>
<div class="grid--items-column-alignment">
<div class="grid__col">
<strong>$align-self: null</strong><br>
null<br>
null<br>
null<br>
null<br>
null<br>
null<br>
</div>
<div class="grid__col-auto">
<strong>$align-self: auto</strong><br>
Auto<br>
</div>
<div class="grid__col-top">
<strong>$align-self: flex-start</strong><br>
Top<br>
</div>
<div class="grid__col-middle">
<strong>$align-self: center</strong><br>
Middle<br>
</div>
<div class="grid__col-bottom">
<strong>$align-self: flex-end</strong><br>
Bottom<br>
</div>
</div>
<h2 id="row-order">Row Order</h2>
<div class="grid">
<div class="grid__col-2">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-2">
3
</div>
<div class="grid__col-2">
4
</div>
<div class="grid__col-2">
5
</div>
</div>
<h3>Ordered</h3>
<div class="grid--order-row">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-4">
4
</div>
<div class="grid__col-5">
5
</div>
</div>
<h2 id="column-order">Column Order</h2>
<div class="grid--column">
<div class="grid__col-2">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-2">
3
</div>
<div class="grid__col-2">
4
</div>
<div class="grid__col-2">
5
</div>
</div>
<h3>Ordered</h3>
<div class="grid--order-column">
<div class="grid__col-1">
1
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3
</div>
<div class="grid__col-4">
4
</div>
<div class="grid__col-5">
5
</div>
</div>
<h2 id="multi-line-alignment">Multi-line Alignment</h2>
<h3>Top Line - @include grid($align-content: flex-start);</h3>
<div class="grid--multi-line-top">
<div class="grid__col-1">
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
</div>
<div class="grid__col-4">
4<br>
4<br>
</div>
<div class="grid__col-5">
5<br>
5<br>
</div>
<div class="grid__col-6">
6<br>
</div>
</div>
<h3>Middle Line - @include grid($align-content: center);</h3>
<div class="grid--multi-line-middle">
<div class="grid__col-1">
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
</div>
<div class="grid__col-4">
4<br>
4<br>
</div>
<div class="grid__col-5">
5<br>
5<br>
</div>
<div class="grid__col-6">
6<br>
</div>
</div>
<h3>Bottom Line - @include grid($align-content: flex-end);</h3>
<div class="grid--multi-line-bottom">
<div class="grid__col-1">
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
</div>
<div class="grid__col-4">
4<br>
4<br>
</div>
<div class="grid__col-5">
5<br>
5<br>
</div>
<div class="grid__col-6">
6<br>
</div>
</div>
<h3>Space between Line - @include grid($align-content: space-between);</h3>
<div class="grid--multi-line-space-between">
<div class="grid__col-1">
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
</div>
<div class="grid__col-4">
4<br>
4<br>
</div>
<div class="grid__col-5">
5<br>
5<br>
</div>
<div class="grid__col-6">
6<br>
</div>
</div>
<h3>Space around Line - @include grid($align-content: space-around);</h3>
<div class="grid--multi-line-space-around">
<div class="grid__col-1">
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
</div>
<div class="grid__col-4">
4<br>
4<br>
</div>
<div class="grid__col-5">
5<br>
5<br>
</div>
<div class="grid__col-6">
6<br>
</div>
</div>
<h3>Stretch Line - @include grid($align-content: stretch);</h3>
<div class="grid--multi-line-stretch">
<div class="grid__col-1">
1<br>
1<br>
1<br>
</div>
<div class="grid__col-2">
2
</div>
<div class="grid__col-3">
3<br>
3<br>
</div>
<div class="grid__col-4">
4<br>
4<br>
</div>
<div class="grid__col-5">
5<br>
5<br>
</div>
<div class="grid__col-6">
6<br>
</div>
</div>
<h2>Width</h2>
<div class="grid--width">
<div class="grid__col-200">
<strong>$max-width: 200px</strong><br>
200
</div>
<div class="grid__col-100">
<strong>$max-width: 100px</strong><br>
100 100 100 100 100
</div>
<div class="grid__col-3">
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
</div>
<div class="grid__col-3">
3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3 3
</div>
</div>
<h2 id="condense">condense - @include grid-col($condense: true);</h2>
<div class="grid--condense">
<div class="grid__col-12">
12
</div>
</div>
<div class="grid--condense">
<div class="grid__col-1">
1
</div>
<div class="grid__col-11">
11
</div>
</div>
<div class="grid--condense">
<div class="grid__col-2">
2
</div>
<div class="grid__col-10">
10
</div>
</div>
<div class="grid--condense">
<div class="grid__col-3">
3
</div>
<div class="grid__col-9">
9
</div>
</div>
<div class="grid--condense">
<div class="grid__col-4">
4
</div>
<div class="grid__col-8">
8
</div>
</div>
<div class="grid--condense">
<div class="grid__col-5">
5
</div>
<div class="grid__col-7">
7
</div>
</div>
<div class="grid--condense">
<div class="grid__col-6">
6
</div>
<div class="grid__col-6">
6
</div>
</div>
</div>
</body>
</html>