flexbox-grid-mixins
Version:
Sass Mixins to generate Flexbox grid
1,485 lines • 81.2 kB
HTML
<!DOCTYPE html>
<html>
<head>
<title>Flexbox Grid Mixins - Flexbox Grid Mixins Example - Stick out</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-11">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-10">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-9">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-8">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col-5">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-7">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col-6">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-6">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>No Gutter Grid</h3>
<div class="grid--no-gutter">
<div class="grid__col-12">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-11">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-10">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-9">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-8">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-5">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-7">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid--no-gutter">
<div class="grid__col-6">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-6">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Auto Size Grid</h3>
<div class="grid">
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--auto">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Equal Size Grid</h3>
<div class="grid">
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Nesting Grid</h3>
<div class="grid">
<div class="grid__col-6">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-6">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
<div class="grid--no-gutter">
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
</div>
</div>
<div class="grid">
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-10">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
<div class="grid--no-gutter">
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-10">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
<div class="grid--no-gutter">
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-10">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
<div class="grid--no-gutter">
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-10">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<h2>Multi-line Grid</h2>
<div class="grid--multi-line">
<div class="grid__col-12">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-11">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-10">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-9">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-8">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-5">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-7">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-6">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-6">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Multi-line Grid using ul</h3>
<ul class="grid">
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
<li class="grid__col-3">hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</li>
</ul>
<h2 id="grid-columns">Grid Columns</h2>
<h3>Default 12 Columns</h3>
<div class="grid">
<div class="grid__col-12">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col-6">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-6">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-9">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>3 Columns</h3>
<div class="grid-3-columns">
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid-3-columns">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>24 Columns</h3>
<div class="grid-24-columns">
<div class="grid__col-24">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid-24-columns">
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid-24-columns">
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid-24-columns">
<div class="grid__col-8">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-8">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-8">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid-24-columns">
<div class="grid__col-12">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-12">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3><number> - @include grid-col($col: <number>);</h3>
<div class="grid">
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>equal - @include grid-col($col: equal);</h3>
<div class="grid">
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--equal">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>positive number - @include grid-col($col: positive);</h3>
<div class="grid">
<div class="grid__col--positive">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--positive-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--positive">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--positive-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--positive-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--positive">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--positive-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--positive">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<div class="grid">
<div class="grid__col--positive-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col--positive-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Row Reverse - @include grid($flex-direction: row-reverse);</h3>
<div class="grid--row-reverse">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Column - @include grid($flex-direction: column);</h3>
<div class="grid--column">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Column Reverse - @include grid($flex-direction: column-reverse);</h3>
<div class="grid--column-reverse">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>nowrap - @include grid($flex-wrap: nowrap);</h3>
<div class="grid--wrap-nowrap">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>wrap - @include grid($flex-wrap: wrap);</h3>
<div class="grid--wrap">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>wrap reverse - @include grid($flex-wrap: wrap-reverse);</h3>
<div class="grid--wrap-reverse">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Center row - @include grid($justify-content: center);</h3>
<div class="grid--center-row">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Right row - @include grid($justify-content: flex-end);</h3>
<div class="grid--right-row">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Space around row - @include grid($justify-content: space-around);</h3>
<div class="grid--space-around-row">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Space between row - @include grid($justify-content: space-between);</h3>
<div class="grid--space-between-row">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Space evenly row - @include grid($justify-content: space-evenly);</h3>
<div class="grid--space-evenly-row">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Top row - @include grid($align-items: flex-start);</h3>
<div class="grid--top-row">
<div class="grid__col-1">
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
</div>
</div>
<h3>Middle row - @include grid($align-items: center);</h3>
<div class="grid--middle-row">
<div class="grid__col-1">
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
</div>
</div>
<h3>Bottom row - @include grid($align-items: flex-end);</h3>
<div class="grid--bottom-row">
<div class="grid__col-1">
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
</div>
</div>
<h3>Stretch row - @include grid($align-items: stretch);</h3>
<div class="grid--stretch-row">
<div class="grid__col-1">
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
</div>
</div>
<h3>Baseline row - @include grid($align-items: baseline);</h3>
<div class="grid--baseline-row">
<div class="grid__col-1">
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
hello<br>
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
</div>
</div>
<h3>Centered row</h3>
<div class="grid--centered-row">
<div class="grid__col-centered">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
</div>
<div class="grid__col-centered">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
</div>
<div class="grid__col-centered">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<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>
hello hello hello hello<br>
hello hello hello hello<br>
hello hello hello hello<br>
hello hello hello hello<br>
hello hello hello hello<br>
hello hello hello hello<br>
</div>
<div class="grid__col-auto">
<strong>$align-self: auto</strong><br>
hello hello hello hello<br>
</div>
<div class="grid__col-top">
<strong>$align-self: flex-start</strong><br>
hello hello hello hello<br>
</div>
<div class="grid__col-middle">
<strong>$align-self: center</strong><br>
hello hello hello hello<br>
</div>
<div class="grid__col-bottom">
<strong>$align-self: flex-end</strong><br>
hello hello hello hello<br>
</div>
<div class="grid__col-stretch">
<strong>$align-self: stretch</strong><br>
hello hello hello hello<br>
</div>
<div class="grid__col-baseline">
<strong>$align-self: baseline</strong><br>
hello hello hello hello<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">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Center column - @include grid($align-items: center);</h3>
<div class="grid--center-column">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Right column - @include grid($align-items: flex-end);</h3>
<div class="grid--right-column">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Centered column</h3>
<div class="grid--centered-column">
<div class="grid__col-centered">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<br>
</div>
<div class="grid__col-centered">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello<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>
hello hello hello hello<br>
hello hello hello hello<br>
hello hello hello hello<br>
hello hello hello hello<br>
hello hello hello hello<br>
hello hello hello hello<br>
</div>
<div class="grid__col-auto">
<strong>$align-self: auto</strong><br>
hello hello hello hello<br>
</div>
<div class="grid__col-top">
<strong>$align-self: flex-start</strong><br>
hello hello hello hello<br>
</div>
<div class="grid__col-middle">
<strong>$align-self: center</strong><br>
hello hello hello hello<br>
</div>
<div class="grid__col-bottom">
<strong>$align-self: flex-end</strong><br>
hello hello hello hello<br>
</div>
</div>
<h2 id="row-order">Row Order</h2>
<div class="grid">
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Ordered</h3>
<div class="grid--order-row">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-5">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h2 id="column-order">Column Order</h2>
<div class="grid--column">
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h3>Ordered</h3>
<div class="grid--order-column">
<div class="grid__col-1">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-2">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-4">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-5">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
<h2>Width</h2>
<div class="grid--width">
<div class="grid__col-200">
<strong>$max-width: 200px</strong><br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-100">
<strong>$max-width: 100px</strong><br>
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
<div class="grid__col-3">
hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello
</div>
</div>
</div>
</body>
</html>