From 2673f2b0f009ff8d6a4789b78cf9eb9c6b21a014 Mon Sep 17 00:00:00 2001
From: Jeremy Thomas <bbxdesign@gmail.com>
Date: Thu, 22 Sep 2016 23:23:30 +0100
Subject: [PATCH] Add grid modules

---
 bulma.sass                                    |    1 +
 docs/css/bulma-docs.css                       | 1731 +++++++++--------
 sass/components/components.sass               |    1 -
 .../grid.sass => grid/columns.sass}           |   32 -
 sass/grid/grid.sass                           |    4 +
 sass/grid/tiles.sass                          |   34 +
 6 files changed, 909 insertions(+), 894 deletions(-)
 rename sass/{components/grid.sass => grid/columns.sass} (90%)
 create mode 100644 sass/grid/grid.sass
 create mode 100644 sass/grid/tiles.sass

diff --git a/bulma.sass b/bulma.sass
index 091d8e90..bfe4defd 100644
--- a/bulma.sass
+++ b/bulma.sass
@@ -3,4 +3,5 @@
 @import "sass/base/base.sass"
 @import "sass/elements/elements.sass"
 @import "sass/components/components.sass"
+@import "sass/grid/grid.sass"
 @import "sass/layout/layout.sass"
diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
index 515a23fc..2b028cce 100644
--- a/docs/css/bulma-docs.css
+++ b/docs/css/bulma-docs.css
@@ -2987,867 +2987,6 @@ a.box:active {
   border-radius: 5px;
 }
 
-@keyframes spin-around {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(359deg);
-  }
-}
-
-.column {
-  flex-basis: 0;
-  flex-grow: 1;
-  flex-shrink: 1;
-  padding: 10px;
-}
-
-.columns.is-mobile > .column.is-narrow {
-  flex: none;
-}
-
-.columns.is-mobile > .column.is-full {
-  flex: none;
-  width: 100%;
-}
-
-.columns.is-mobile > .column.is-three-quarters {
-  flex: none;
-  width: 75%;
-}
-
-.columns.is-mobile > .column.is-two-thirds {
-  flex: none;
-  width: 66.6666%;
-}
-
-.columns.is-mobile > .column.is-half {
-  flex: none;
-  width: 50%;
-}
-
-.columns.is-mobile > .column.is-one-third {
-  flex: none;
-  width: 33.3333%;
-}
-
-.columns.is-mobile > .column.is-one-quarter {
-  flex: none;
-  width: 25%;
-}
-
-.columns.is-mobile > .column.is-offset-three-quarters {
-  margin-left: 75%;
-}
-
-.columns.is-mobile > .column.is-offset-two-thirds {
-  margin-left: 66.6666%;
-}
-
-.columns.is-mobile > .column.is-offset-half {
-  margin-left: 50%;
-}
-
-.columns.is-mobile > .column.is-offset-one-third {
-  margin-left: 33.3333%;
-}
-
-.columns.is-mobile > .column.is-offset-one-quarter {
-  margin-left: 25%;
-}
-
-.columns.is-mobile > .column.is-1 {
-  flex: none;
-  width: 8.33333%;
-}
-
-.columns.is-mobile > .column.is-offset-1 {
-  margin-left: 8.33333%;
-}
-
-.columns.is-mobile > .column.is-2 {
-  flex: none;
-  width: 16.66667%;
-}
-
-.columns.is-mobile > .column.is-offset-2 {
-  margin-left: 16.66667%;
-}
-
-.columns.is-mobile > .column.is-3 {
-  flex: none;
-  width: 25%;
-}
-
-.columns.is-mobile > .column.is-offset-3 {
-  margin-left: 25%;
-}
-
-.columns.is-mobile > .column.is-4 {
-  flex: none;
-  width: 33.33333%;
-}
-
-.columns.is-mobile > .column.is-offset-4 {
-  margin-left: 33.33333%;
-}
-
-.columns.is-mobile > .column.is-5 {
-  flex: none;
-  width: 41.66667%;
-}
-
-.columns.is-mobile > .column.is-offset-5 {
-  margin-left: 41.66667%;
-}
-
-.columns.is-mobile > .column.is-6 {
-  flex: none;
-  width: 50%;
-}
-
-.columns.is-mobile > .column.is-offset-6 {
-  margin-left: 50%;
-}
-
-.columns.is-mobile > .column.is-7 {
-  flex: none;
-  width: 58.33333%;
-}
-
-.columns.is-mobile > .column.is-offset-7 {
-  margin-left: 58.33333%;
-}
-
-.columns.is-mobile > .column.is-8 {
-  flex: none;
-  width: 66.66667%;
-}
-
-.columns.is-mobile > .column.is-offset-8 {
-  margin-left: 66.66667%;
-}
-
-.columns.is-mobile > .column.is-9 {
-  flex: none;
-  width: 75%;
-}
-
-.columns.is-mobile > .column.is-offset-9 {
-  margin-left: 75%;
-}
-
-.columns.is-mobile > .column.is-10 {
-  flex: none;
-  width: 83.33333%;
-}
-
-.columns.is-mobile > .column.is-offset-10 {
-  margin-left: 83.33333%;
-}
-
-.columns.is-mobile > .column.is-11 {
-  flex: none;
-  width: 91.66667%;
-}
-
-.columns.is-mobile > .column.is-offset-11 {
-  margin-left: 91.66667%;
-}
-
-.columns.is-mobile > .column.is-12 {
-  flex: none;
-  width: 100%;
-}
-
-.columns.is-mobile > .column.is-offset-12 {
-  margin-left: 100%;
-}
-
-@media screen and (max-width: 768px) {
-  .column.is-narrow-mobile {
-    flex: none;
-  }
-  .column.is-full-mobile {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-three-quarters-mobile {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-two-thirds-mobile {
-    flex: none;
-    width: 66.6666%;
-  }
-  .column.is-half-mobile {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-one-third-mobile {
-    flex: none;
-    width: 33.3333%;
-  }
-  .column.is-one-quarter-mobile {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-three-quarters-mobile {
-    margin-left: 75%;
-  }
-  .column.is-offset-two-thirds-mobile {
-    margin-left: 66.6666%;
-  }
-  .column.is-offset-half-mobile {
-    margin-left: 50%;
-  }
-  .column.is-offset-one-third-mobile {
-    margin-left: 33.3333%;
-  }
-  .column.is-offset-one-quarter-mobile {
-    margin-left: 25%;
-  }
-  .column.is-1-mobile {
-    flex: none;
-    width: 8.33333%;
-  }
-  .column.is-offset-1-mobile {
-    margin-left: 8.33333%;
-  }
-  .column.is-2-mobile {
-    flex: none;
-    width: 16.66667%;
-  }
-  .column.is-offset-2-mobile {
-    margin-left: 16.66667%;
-  }
-  .column.is-3-mobile {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-3-mobile {
-    margin-left: 25%;
-  }
-  .column.is-4-mobile {
-    flex: none;
-    width: 33.33333%;
-  }
-  .column.is-offset-4-mobile {
-    margin-left: 33.33333%;
-  }
-  .column.is-5-mobile {
-    flex: none;
-    width: 41.66667%;
-  }
-  .column.is-offset-5-mobile {
-    margin-left: 41.66667%;
-  }
-  .column.is-6-mobile {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-offset-6-mobile {
-    margin-left: 50%;
-  }
-  .column.is-7-mobile {
-    flex: none;
-    width: 58.33333%;
-  }
-  .column.is-offset-7-mobile {
-    margin-left: 58.33333%;
-  }
-  .column.is-8-mobile {
-    flex: none;
-    width: 66.66667%;
-  }
-  .column.is-offset-8-mobile {
-    margin-left: 66.66667%;
-  }
-  .column.is-9-mobile {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-offset-9-mobile {
-    margin-left: 75%;
-  }
-  .column.is-10-mobile {
-    flex: none;
-    width: 83.33333%;
-  }
-  .column.is-offset-10-mobile {
-    margin-left: 83.33333%;
-  }
-  .column.is-11-mobile {
-    flex: none;
-    width: 91.66667%;
-  }
-  .column.is-offset-11-mobile {
-    margin-left: 91.66667%;
-  }
-  .column.is-12-mobile {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-offset-12-mobile {
-    margin-left: 100%;
-  }
-}
-
-@media screen and (min-width: 769px) {
-  .column.is-narrow, .column.is-narrow-tablet {
-    flex: none;
-  }
-  .column.is-full, .column.is-full-tablet {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-three-quarters, .column.is-three-quarters-tablet {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-two-thirds, .column.is-two-thirds-tablet {
-    flex: none;
-    width: 66.6666%;
-  }
-  .column.is-half, .column.is-half-tablet {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-one-third, .column.is-one-third-tablet {
-    flex: none;
-    width: 33.3333%;
-  }
-  .column.is-one-quarter, .column.is-one-quarter-tablet {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet {
-    margin-left: 75%;
-  }
-  .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet {
-    margin-left: 66.6666%;
-  }
-  .column.is-offset-half, .column.is-offset-half-tablet {
-    margin-left: 50%;
-  }
-  .column.is-offset-one-third, .column.is-offset-one-third-tablet {
-    margin-left: 33.3333%;
-  }
-  .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet {
-    margin-left: 25%;
-  }
-  .column.is-1, .column.is-1-tablet {
-    flex: none;
-    width: 8.33333%;
-  }
-  .column.is-offset-1, .column.is-offset-1-tablet {
-    margin-left: 8.33333%;
-  }
-  .column.is-2, .column.is-2-tablet {
-    flex: none;
-    width: 16.66667%;
-  }
-  .column.is-offset-2, .column.is-offset-2-tablet {
-    margin-left: 16.66667%;
-  }
-  .column.is-3, .column.is-3-tablet {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-3, .column.is-offset-3-tablet {
-    margin-left: 25%;
-  }
-  .column.is-4, .column.is-4-tablet {
-    flex: none;
-    width: 33.33333%;
-  }
-  .column.is-offset-4, .column.is-offset-4-tablet {
-    margin-left: 33.33333%;
-  }
-  .column.is-5, .column.is-5-tablet {
-    flex: none;
-    width: 41.66667%;
-  }
-  .column.is-offset-5, .column.is-offset-5-tablet {
-    margin-left: 41.66667%;
-  }
-  .column.is-6, .column.is-6-tablet {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-offset-6, .column.is-offset-6-tablet {
-    margin-left: 50%;
-  }
-  .column.is-7, .column.is-7-tablet {
-    flex: none;
-    width: 58.33333%;
-  }
-  .column.is-offset-7, .column.is-offset-7-tablet {
-    margin-left: 58.33333%;
-  }
-  .column.is-8, .column.is-8-tablet {
-    flex: none;
-    width: 66.66667%;
-  }
-  .column.is-offset-8, .column.is-offset-8-tablet {
-    margin-left: 66.66667%;
-  }
-  .column.is-9, .column.is-9-tablet {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-offset-9, .column.is-offset-9-tablet {
-    margin-left: 75%;
-  }
-  .column.is-10, .column.is-10-tablet {
-    flex: none;
-    width: 83.33333%;
-  }
-  .column.is-offset-10, .column.is-offset-10-tablet {
-    margin-left: 83.33333%;
-  }
-  .column.is-11, .column.is-11-tablet {
-    flex: none;
-    width: 91.66667%;
-  }
-  .column.is-offset-11, .column.is-offset-11-tablet {
-    margin-left: 91.66667%;
-  }
-  .column.is-12, .column.is-12-tablet {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-offset-12, .column.is-offset-12-tablet {
-    margin-left: 100%;
-  }
-}
-
-@media screen and (min-width: 980px) {
-  .column.is-narrow-desktop {
-    flex: none;
-  }
-  .column.is-full-desktop {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-three-quarters-desktop {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-two-thirds-desktop {
-    flex: none;
-    width: 66.6666%;
-  }
-  .column.is-half-desktop {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-one-third-desktop {
-    flex: none;
-    width: 33.3333%;
-  }
-  .column.is-one-quarter-desktop {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-three-quarters-desktop {
-    margin-left: 75%;
-  }
-  .column.is-offset-two-thirds-desktop {
-    margin-left: 66.6666%;
-  }
-  .column.is-offset-half-desktop {
-    margin-left: 50%;
-  }
-  .column.is-offset-one-third-desktop {
-    margin-left: 33.3333%;
-  }
-  .column.is-offset-one-quarter-desktop {
-    margin-left: 25%;
-  }
-  .column.is-1-desktop {
-    flex: none;
-    width: 8.33333%;
-  }
-  .column.is-offset-1-desktop {
-    margin-left: 8.33333%;
-  }
-  .column.is-2-desktop {
-    flex: none;
-    width: 16.66667%;
-  }
-  .column.is-offset-2-desktop {
-    margin-left: 16.66667%;
-  }
-  .column.is-3-desktop {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-3-desktop {
-    margin-left: 25%;
-  }
-  .column.is-4-desktop {
-    flex: none;
-    width: 33.33333%;
-  }
-  .column.is-offset-4-desktop {
-    margin-left: 33.33333%;
-  }
-  .column.is-5-desktop {
-    flex: none;
-    width: 41.66667%;
-  }
-  .column.is-offset-5-desktop {
-    margin-left: 41.66667%;
-  }
-  .column.is-6-desktop {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-offset-6-desktop {
-    margin-left: 50%;
-  }
-  .column.is-7-desktop {
-    flex: none;
-    width: 58.33333%;
-  }
-  .column.is-offset-7-desktop {
-    margin-left: 58.33333%;
-  }
-  .column.is-8-desktop {
-    flex: none;
-    width: 66.66667%;
-  }
-  .column.is-offset-8-desktop {
-    margin-left: 66.66667%;
-  }
-  .column.is-9-desktop {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-offset-9-desktop {
-    margin-left: 75%;
-  }
-  .column.is-10-desktop {
-    flex: none;
-    width: 83.33333%;
-  }
-  .column.is-offset-10-desktop {
-    margin-left: 83.33333%;
-  }
-  .column.is-11-desktop {
-    flex: none;
-    width: 91.66667%;
-  }
-  .column.is-offset-11-desktop {
-    margin-left: 91.66667%;
-  }
-  .column.is-12-desktop {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-offset-12-desktop {
-    margin-left: 100%;
-  }
-}
-
-@media screen and (min-width: 1180px) {
-  .column.is-narrow-widescreen {
-    flex: none;
-  }
-  .column.is-full-widescreen {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-three-quarters-widescreen {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-two-thirds-widescreen {
-    flex: none;
-    width: 66.6666%;
-  }
-  .column.is-half-widescreen {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-one-third-widescreen {
-    flex: none;
-    width: 33.3333%;
-  }
-  .column.is-one-quarter-widescreen {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-three-quarters-widescreen {
-    margin-left: 75%;
-  }
-  .column.is-offset-two-thirds-widescreen {
-    margin-left: 66.6666%;
-  }
-  .column.is-offset-half-widescreen {
-    margin-left: 50%;
-  }
-  .column.is-offset-one-third-widescreen {
-    margin-left: 33.3333%;
-  }
-  .column.is-offset-one-quarter-widescreen {
-    margin-left: 25%;
-  }
-  .column.is-1-widescreen {
-    flex: none;
-    width: 8.33333%;
-  }
-  .column.is-offset-1-widescreen {
-    margin-left: 8.33333%;
-  }
-  .column.is-2-widescreen {
-    flex: none;
-    width: 16.66667%;
-  }
-  .column.is-offset-2-widescreen {
-    margin-left: 16.66667%;
-  }
-  .column.is-3-widescreen {
-    flex: none;
-    width: 25%;
-  }
-  .column.is-offset-3-widescreen {
-    margin-left: 25%;
-  }
-  .column.is-4-widescreen {
-    flex: none;
-    width: 33.33333%;
-  }
-  .column.is-offset-4-widescreen {
-    margin-left: 33.33333%;
-  }
-  .column.is-5-widescreen {
-    flex: none;
-    width: 41.66667%;
-  }
-  .column.is-offset-5-widescreen {
-    margin-left: 41.66667%;
-  }
-  .column.is-6-widescreen {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-offset-6-widescreen {
-    margin-left: 50%;
-  }
-  .column.is-7-widescreen {
-    flex: none;
-    width: 58.33333%;
-  }
-  .column.is-offset-7-widescreen {
-    margin-left: 58.33333%;
-  }
-  .column.is-8-widescreen {
-    flex: none;
-    width: 66.66667%;
-  }
-  .column.is-offset-8-widescreen {
-    margin-left: 66.66667%;
-  }
-  .column.is-9-widescreen {
-    flex: none;
-    width: 75%;
-  }
-  .column.is-offset-9-widescreen {
-    margin-left: 75%;
-  }
-  .column.is-10-widescreen {
-    flex: none;
-    width: 83.33333%;
-  }
-  .column.is-offset-10-widescreen {
-    margin-left: 83.33333%;
-  }
-  .column.is-11-widescreen {
-    flex: none;
-    width: 91.66667%;
-  }
-  .column.is-offset-11-widescreen {
-    margin-left: 91.66667%;
-  }
-  .column.is-12-widescreen {
-    flex: none;
-    width: 100%;
-  }
-  .column.is-offset-12-widescreen {
-    margin-left: 100%;
-  }
-}
-
-.columns {
-  margin-left: -10px;
-  margin-right: -10px;
-  margin-top: -10px;
-}
-
-.columns:last-child {
-  margin-bottom: -10px;
-}
-
-.columns:not(:last-child) {
-  margin-bottom: 10px;
-}
-
-.columns.is-centered {
-  justify-content: center;
-}
-
-.columns.is-gapless {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-}
-
-.columns.is-gapless:last-child {
-  margin-bottom: 0;
-}
-
-.columns.is-gapless:not(:last-child) {
-  margin-bottom: 20px;
-}
-
-.columns.is-gapless > .column {
-  margin: 0;
-  padding: 0;
-}
-
-@media screen and (min-width: 769px) {
-  .columns.is-grid {
-    flex-wrap: wrap;
-  }
-  .columns.is-grid > .column {
-    max-width: 33.3333%;
-    padding: 10px;
-    width: 33.3333%;
-  }
-  .columns.is-grid > .column + .column {
-    margin-left: 0;
-  }
-}
-
-.columns.is-mobile {
-  display: flex;
-}
-
-.columns.is-multiline {
-  flex-wrap: wrap;
-}
-
-.columns.is-vcentered {
-  align-items: center;
-}
-
-@media screen and (min-width: 769px) {
-  .columns:not(.is-desktop) {
-    display: flex;
-  }
-}
-
-@media screen and (min-width: 980px) {
-  .columns.is-desktop {
-    display: flex;
-  }
-}
-
-.tile {
-  align-items: stretch;
-  flex-basis: auto;
-  flex-grow: 1;
-  flex-shrink: 1;
-  min-height: min-content;
-}
-
-.tile.is-ancestor {
-  margin-left: -10px;
-  margin-right: -10px;
-  margin-top: -10px;
-}
-
-.tile.is-ancestor:last-child {
-  margin-bottom: -10px;
-}
-
-.tile.is-ancestor:not(:last-child) {
-  margin-bottom: 10px;
-}
-
-.tile.is-child {
-  margin: 0 !important;
-}
-
-.tile.is-parent {
-  padding: 10px;
-}
-
-.tile.is-vertical {
-  flex-direction: column;
-}
-
-.tile.is-vertical > .tile.is-child:not(:last-child) {
-  margin-bottom: 20px !important;
-}
-
-@media screen and (min-width: 769px) {
-  .tile:not(.is-child) {
-    display: flex;
-  }
-  .tile.is-1 {
-    flex: none;
-    width: 8.33333%;
-  }
-  .tile.is-2 {
-    flex: none;
-    width: 16.66667%;
-  }
-  .tile.is-3 {
-    flex: none;
-    width: 25%;
-  }
-  .tile.is-4 {
-    flex: none;
-    width: 33.33333%;
-  }
-  .tile.is-5 {
-    flex: none;
-    width: 41.66667%;
-  }
-  .tile.is-6 {
-    flex: none;
-    width: 50%;
-  }
-  .tile.is-7 {
-    flex: none;
-    width: 58.33333%;
-  }
-  .tile.is-8 {
-    flex: none;
-    width: 66.66667%;
-  }
-  .tile.is-9 {
-    flex: none;
-    width: 75%;
-  }
-  .tile.is-10 {
-    flex: none;
-    width: 83.33333%;
-  }
-  .tile.is-11 {
-    flex: none;
-    width: 91.66667%;
-  }
-  .tile.is-12 {
-    flex: none;
-    width: 100%;
-  }
-}
-
 .highlight {
   background-color: #fdf6e3;
   color: #586e75;
@@ -5227,6 +4366,876 @@ a.panel-block:hover {
   }
 }
 
+.column {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: 10px;
+}
+
+.columns.is-mobile > .column.is-narrow {
+  flex: none;
+}
+
+.columns.is-mobile > .column.is-full {
+  flex: none;
+  width: 100%;
+}
+
+.columns.is-mobile > .column.is-three-quarters {
+  flex: none;
+  width: 75%;
+}
+
+.columns.is-mobile > .column.is-two-thirds {
+  flex: none;
+  width: 66.6666%;
+}
+
+.columns.is-mobile > .column.is-half {
+  flex: none;
+  width: 50%;
+}
+
+.columns.is-mobile > .column.is-one-third {
+  flex: none;
+  width: 33.3333%;
+}
+
+.columns.is-mobile > .column.is-one-quarter {
+  flex: none;
+  width: 25%;
+}
+
+.columns.is-mobile > .column.is-offset-three-quarters {
+  margin-left: 75%;
+}
+
+.columns.is-mobile > .column.is-offset-two-thirds {
+  margin-left: 66.6666%;
+}
+
+.columns.is-mobile > .column.is-offset-half {
+  margin-left: 50%;
+}
+
+.columns.is-mobile > .column.is-offset-one-third {
+  margin-left: 33.3333%;
+}
+
+.columns.is-mobile > .column.is-offset-one-quarter {
+  margin-left: 25%;
+}
+
+.columns.is-mobile > .column.is-1 {
+  flex: none;
+  width: 8.33333%;
+}
+
+.columns.is-mobile > .column.is-offset-1 {
+  margin-left: 8.33333%;
+}
+
+.columns.is-mobile > .column.is-2 {
+  flex: none;
+  width: 16.66667%;
+}
+
+.columns.is-mobile > .column.is-offset-2 {
+  margin-left: 16.66667%;
+}
+
+.columns.is-mobile > .column.is-3 {
+  flex: none;
+  width: 25%;
+}
+
+.columns.is-mobile > .column.is-offset-3 {
+  margin-left: 25%;
+}
+
+.columns.is-mobile > .column.is-4 {
+  flex: none;
+  width: 33.33333%;
+}
+
+.columns.is-mobile > .column.is-offset-4 {
+  margin-left: 33.33333%;
+}
+
+.columns.is-mobile > .column.is-5 {
+  flex: none;
+  width: 41.66667%;
+}
+
+.columns.is-mobile > .column.is-offset-5 {
+  margin-left: 41.66667%;
+}
+
+.columns.is-mobile > .column.is-6 {
+  flex: none;
+  width: 50%;
+}
+
+.columns.is-mobile > .column.is-offset-6 {
+  margin-left: 50%;
+}
+
+.columns.is-mobile > .column.is-7 {
+  flex: none;
+  width: 58.33333%;
+}
+
+.columns.is-mobile > .column.is-offset-7 {
+  margin-left: 58.33333%;
+}
+
+.columns.is-mobile > .column.is-8 {
+  flex: none;
+  width: 66.66667%;
+}
+
+.columns.is-mobile > .column.is-offset-8 {
+  margin-left: 66.66667%;
+}
+
+.columns.is-mobile > .column.is-9 {
+  flex: none;
+  width: 75%;
+}
+
+.columns.is-mobile > .column.is-offset-9 {
+  margin-left: 75%;
+}
+
+.columns.is-mobile > .column.is-10 {
+  flex: none;
+  width: 83.33333%;
+}
+
+.columns.is-mobile > .column.is-offset-10 {
+  margin-left: 83.33333%;
+}
+
+.columns.is-mobile > .column.is-11 {
+  flex: none;
+  width: 91.66667%;
+}
+
+.columns.is-mobile > .column.is-offset-11 {
+  margin-left: 91.66667%;
+}
+
+.columns.is-mobile > .column.is-12 {
+  flex: none;
+  width: 100%;
+}
+
+.columns.is-mobile > .column.is-offset-12 {
+  margin-left: 100%;
+}
+
+@media screen and (max-width: 768px) {
+  .column.is-narrow-mobile {
+    flex: none;
+  }
+  .column.is-full-mobile {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-three-quarters-mobile {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-two-thirds-mobile {
+    flex: none;
+    width: 66.6666%;
+  }
+  .column.is-half-mobile {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-one-third-mobile {
+    flex: none;
+    width: 33.3333%;
+  }
+  .column.is-one-quarter-mobile {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-three-quarters-mobile {
+    margin-left: 75%;
+  }
+  .column.is-offset-two-thirds-mobile {
+    margin-left: 66.6666%;
+  }
+  .column.is-offset-half-mobile {
+    margin-left: 50%;
+  }
+  .column.is-offset-one-third-mobile {
+    margin-left: 33.3333%;
+  }
+  .column.is-offset-one-quarter-mobile {
+    margin-left: 25%;
+  }
+  .column.is-1-mobile {
+    flex: none;
+    width: 8.33333%;
+  }
+  .column.is-offset-1-mobile {
+    margin-left: 8.33333%;
+  }
+  .column.is-2-mobile {
+    flex: none;
+    width: 16.66667%;
+  }
+  .column.is-offset-2-mobile {
+    margin-left: 16.66667%;
+  }
+  .column.is-3-mobile {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-3-mobile {
+    margin-left: 25%;
+  }
+  .column.is-4-mobile {
+    flex: none;
+    width: 33.33333%;
+  }
+  .column.is-offset-4-mobile {
+    margin-left: 33.33333%;
+  }
+  .column.is-5-mobile {
+    flex: none;
+    width: 41.66667%;
+  }
+  .column.is-offset-5-mobile {
+    margin-left: 41.66667%;
+  }
+  .column.is-6-mobile {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-offset-6-mobile {
+    margin-left: 50%;
+  }
+  .column.is-7-mobile {
+    flex: none;
+    width: 58.33333%;
+  }
+  .column.is-offset-7-mobile {
+    margin-left: 58.33333%;
+  }
+  .column.is-8-mobile {
+    flex: none;
+    width: 66.66667%;
+  }
+  .column.is-offset-8-mobile {
+    margin-left: 66.66667%;
+  }
+  .column.is-9-mobile {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-offset-9-mobile {
+    margin-left: 75%;
+  }
+  .column.is-10-mobile {
+    flex: none;
+    width: 83.33333%;
+  }
+  .column.is-offset-10-mobile {
+    margin-left: 83.33333%;
+  }
+  .column.is-11-mobile {
+    flex: none;
+    width: 91.66667%;
+  }
+  .column.is-offset-11-mobile {
+    margin-left: 91.66667%;
+  }
+  .column.is-12-mobile {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-offset-12-mobile {
+    margin-left: 100%;
+  }
+}
+
+@media screen and (min-width: 769px) {
+  .column.is-narrow, .column.is-narrow-tablet {
+    flex: none;
+  }
+  .column.is-full, .column.is-full-tablet {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-three-quarters, .column.is-three-quarters-tablet {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-two-thirds, .column.is-two-thirds-tablet {
+    flex: none;
+    width: 66.6666%;
+  }
+  .column.is-half, .column.is-half-tablet {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-one-third, .column.is-one-third-tablet {
+    flex: none;
+    width: 33.3333%;
+  }
+  .column.is-one-quarter, .column.is-one-quarter-tablet {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-three-quarters, .column.is-offset-three-quarters-tablet {
+    margin-left: 75%;
+  }
+  .column.is-offset-two-thirds, .column.is-offset-two-thirds-tablet {
+    margin-left: 66.6666%;
+  }
+  .column.is-offset-half, .column.is-offset-half-tablet {
+    margin-left: 50%;
+  }
+  .column.is-offset-one-third, .column.is-offset-one-third-tablet {
+    margin-left: 33.3333%;
+  }
+  .column.is-offset-one-quarter, .column.is-offset-one-quarter-tablet {
+    margin-left: 25%;
+  }
+  .column.is-1, .column.is-1-tablet {
+    flex: none;
+    width: 8.33333%;
+  }
+  .column.is-offset-1, .column.is-offset-1-tablet {
+    margin-left: 8.33333%;
+  }
+  .column.is-2, .column.is-2-tablet {
+    flex: none;
+    width: 16.66667%;
+  }
+  .column.is-offset-2, .column.is-offset-2-tablet {
+    margin-left: 16.66667%;
+  }
+  .column.is-3, .column.is-3-tablet {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-3, .column.is-offset-3-tablet {
+    margin-left: 25%;
+  }
+  .column.is-4, .column.is-4-tablet {
+    flex: none;
+    width: 33.33333%;
+  }
+  .column.is-offset-4, .column.is-offset-4-tablet {
+    margin-left: 33.33333%;
+  }
+  .column.is-5, .column.is-5-tablet {
+    flex: none;
+    width: 41.66667%;
+  }
+  .column.is-offset-5, .column.is-offset-5-tablet {
+    margin-left: 41.66667%;
+  }
+  .column.is-6, .column.is-6-tablet {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-offset-6, .column.is-offset-6-tablet {
+    margin-left: 50%;
+  }
+  .column.is-7, .column.is-7-tablet {
+    flex: none;
+    width: 58.33333%;
+  }
+  .column.is-offset-7, .column.is-offset-7-tablet {
+    margin-left: 58.33333%;
+  }
+  .column.is-8, .column.is-8-tablet {
+    flex: none;
+    width: 66.66667%;
+  }
+  .column.is-offset-8, .column.is-offset-8-tablet {
+    margin-left: 66.66667%;
+  }
+  .column.is-9, .column.is-9-tablet {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-offset-9, .column.is-offset-9-tablet {
+    margin-left: 75%;
+  }
+  .column.is-10, .column.is-10-tablet {
+    flex: none;
+    width: 83.33333%;
+  }
+  .column.is-offset-10, .column.is-offset-10-tablet {
+    margin-left: 83.33333%;
+  }
+  .column.is-11, .column.is-11-tablet {
+    flex: none;
+    width: 91.66667%;
+  }
+  .column.is-offset-11, .column.is-offset-11-tablet {
+    margin-left: 91.66667%;
+  }
+  .column.is-12, .column.is-12-tablet {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-offset-12, .column.is-offset-12-tablet {
+    margin-left: 100%;
+  }
+}
+
+@media screen and (min-width: 980px) {
+  .column.is-narrow-desktop {
+    flex: none;
+  }
+  .column.is-full-desktop {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-three-quarters-desktop {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-two-thirds-desktop {
+    flex: none;
+    width: 66.6666%;
+  }
+  .column.is-half-desktop {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-one-third-desktop {
+    flex: none;
+    width: 33.3333%;
+  }
+  .column.is-one-quarter-desktop {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-three-quarters-desktop {
+    margin-left: 75%;
+  }
+  .column.is-offset-two-thirds-desktop {
+    margin-left: 66.6666%;
+  }
+  .column.is-offset-half-desktop {
+    margin-left: 50%;
+  }
+  .column.is-offset-one-third-desktop {
+    margin-left: 33.3333%;
+  }
+  .column.is-offset-one-quarter-desktop {
+    margin-left: 25%;
+  }
+  .column.is-1-desktop {
+    flex: none;
+    width: 8.33333%;
+  }
+  .column.is-offset-1-desktop {
+    margin-left: 8.33333%;
+  }
+  .column.is-2-desktop {
+    flex: none;
+    width: 16.66667%;
+  }
+  .column.is-offset-2-desktop {
+    margin-left: 16.66667%;
+  }
+  .column.is-3-desktop {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-3-desktop {
+    margin-left: 25%;
+  }
+  .column.is-4-desktop {
+    flex: none;
+    width: 33.33333%;
+  }
+  .column.is-offset-4-desktop {
+    margin-left: 33.33333%;
+  }
+  .column.is-5-desktop {
+    flex: none;
+    width: 41.66667%;
+  }
+  .column.is-offset-5-desktop {
+    margin-left: 41.66667%;
+  }
+  .column.is-6-desktop {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-offset-6-desktop {
+    margin-left: 50%;
+  }
+  .column.is-7-desktop {
+    flex: none;
+    width: 58.33333%;
+  }
+  .column.is-offset-7-desktop {
+    margin-left: 58.33333%;
+  }
+  .column.is-8-desktop {
+    flex: none;
+    width: 66.66667%;
+  }
+  .column.is-offset-8-desktop {
+    margin-left: 66.66667%;
+  }
+  .column.is-9-desktop {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-offset-9-desktop {
+    margin-left: 75%;
+  }
+  .column.is-10-desktop {
+    flex: none;
+    width: 83.33333%;
+  }
+  .column.is-offset-10-desktop {
+    margin-left: 83.33333%;
+  }
+  .column.is-11-desktop {
+    flex: none;
+    width: 91.66667%;
+  }
+  .column.is-offset-11-desktop {
+    margin-left: 91.66667%;
+  }
+  .column.is-12-desktop {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-offset-12-desktop {
+    margin-left: 100%;
+  }
+}
+
+@media screen and (min-width: 1180px) {
+  .column.is-narrow-widescreen {
+    flex: none;
+  }
+  .column.is-full-widescreen {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-three-quarters-widescreen {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-two-thirds-widescreen {
+    flex: none;
+    width: 66.6666%;
+  }
+  .column.is-half-widescreen {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-one-third-widescreen {
+    flex: none;
+    width: 33.3333%;
+  }
+  .column.is-one-quarter-widescreen {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-three-quarters-widescreen {
+    margin-left: 75%;
+  }
+  .column.is-offset-two-thirds-widescreen {
+    margin-left: 66.6666%;
+  }
+  .column.is-offset-half-widescreen {
+    margin-left: 50%;
+  }
+  .column.is-offset-one-third-widescreen {
+    margin-left: 33.3333%;
+  }
+  .column.is-offset-one-quarter-widescreen {
+    margin-left: 25%;
+  }
+  .column.is-1-widescreen {
+    flex: none;
+    width: 8.33333%;
+  }
+  .column.is-offset-1-widescreen {
+    margin-left: 8.33333%;
+  }
+  .column.is-2-widescreen {
+    flex: none;
+    width: 16.66667%;
+  }
+  .column.is-offset-2-widescreen {
+    margin-left: 16.66667%;
+  }
+  .column.is-3-widescreen {
+    flex: none;
+    width: 25%;
+  }
+  .column.is-offset-3-widescreen {
+    margin-left: 25%;
+  }
+  .column.is-4-widescreen {
+    flex: none;
+    width: 33.33333%;
+  }
+  .column.is-offset-4-widescreen {
+    margin-left: 33.33333%;
+  }
+  .column.is-5-widescreen {
+    flex: none;
+    width: 41.66667%;
+  }
+  .column.is-offset-5-widescreen {
+    margin-left: 41.66667%;
+  }
+  .column.is-6-widescreen {
+    flex: none;
+    width: 50%;
+  }
+  .column.is-offset-6-widescreen {
+    margin-left: 50%;
+  }
+  .column.is-7-widescreen {
+    flex: none;
+    width: 58.33333%;
+  }
+  .column.is-offset-7-widescreen {
+    margin-left: 58.33333%;
+  }
+  .column.is-8-widescreen {
+    flex: none;
+    width: 66.66667%;
+  }
+  .column.is-offset-8-widescreen {
+    margin-left: 66.66667%;
+  }
+  .column.is-9-widescreen {
+    flex: none;
+    width: 75%;
+  }
+  .column.is-offset-9-widescreen {
+    margin-left: 75%;
+  }
+  .column.is-10-widescreen {
+    flex: none;
+    width: 83.33333%;
+  }
+  .column.is-offset-10-widescreen {
+    margin-left: 83.33333%;
+  }
+  .column.is-11-widescreen {
+    flex: none;
+    width: 91.66667%;
+  }
+  .column.is-offset-11-widescreen {
+    margin-left: 91.66667%;
+  }
+  .column.is-12-widescreen {
+    flex: none;
+    width: 100%;
+  }
+  .column.is-offset-12-widescreen {
+    margin-left: 100%;
+  }
+}
+
+.columns {
+  margin-left: -10px;
+  margin-right: -10px;
+  margin-top: -10px;
+}
+
+.columns:last-child {
+  margin-bottom: -10px;
+}
+
+.columns:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.columns.is-centered {
+  justify-content: center;
+}
+
+.columns.is-gapless {
+  margin-left: 0;
+  margin-right: 0;
+  margin-top: 0;
+}
+
+.columns.is-gapless:last-child {
+  margin-bottom: 0;
+}
+
+.columns.is-gapless:not(:last-child) {
+  margin-bottom: 20px;
+}
+
+.columns.is-gapless > .column {
+  margin: 0;
+  padding: 0;
+}
+
+@media screen and (min-width: 769px) {
+  .columns.is-grid {
+    flex-wrap: wrap;
+  }
+  .columns.is-grid > .column {
+    max-width: 33.3333%;
+    padding: 10px;
+    width: 33.3333%;
+  }
+  .columns.is-grid > .column + .column {
+    margin-left: 0;
+  }
+}
+
+.columns.is-mobile {
+  display: flex;
+}
+
+.columns.is-multiline {
+  flex-wrap: wrap;
+}
+
+.columns.is-vcentered {
+  align-items: center;
+}
+
+@media screen and (min-width: 769px) {
+  .columns:not(.is-desktop) {
+    display: flex;
+  }
+}
+
+@media screen and (min-width: 980px) {
+  .columns.is-desktop {
+    display: flex;
+  }
+}
+
+@keyframes spin-around {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
+.tile {
+  align-items: stretch;
+  flex-basis: auto;
+  flex-grow: 1;
+  flex-shrink: 1;
+  min-height: min-content;
+}
+
+.tile.is-ancestor {
+  margin-left: -10px;
+  margin-right: -10px;
+  margin-top: -10px;
+}
+
+.tile.is-ancestor:last-child {
+  margin-bottom: -10px;
+}
+
+.tile.is-ancestor:not(:last-child) {
+  margin-bottom: 10px;
+}
+
+.tile.is-child {
+  margin: 0 !important;
+}
+
+.tile.is-parent {
+  padding: 10px;
+}
+
+.tile.is-vertical {
+  flex-direction: column;
+}
+
+.tile.is-vertical > .tile.is-child:not(:last-child) {
+  margin-bottom: 20px !important;
+}
+
+@media screen and (min-width: 769px) {
+  .tile:not(.is-child) {
+    display: flex;
+  }
+  .tile.is-1 {
+    flex: none;
+    width: 8.33333%;
+  }
+  .tile.is-2 {
+    flex: none;
+    width: 16.66667%;
+  }
+  .tile.is-3 {
+    flex: none;
+    width: 25%;
+  }
+  .tile.is-4 {
+    flex: none;
+    width: 33.33333%;
+  }
+  .tile.is-5 {
+    flex: none;
+    width: 41.66667%;
+  }
+  .tile.is-6 {
+    flex: none;
+    width: 50%;
+  }
+  .tile.is-7 {
+    flex: none;
+    width: 58.33333%;
+  }
+  .tile.is-8 {
+    flex: none;
+    width: 66.66667%;
+  }
+  .tile.is-9 {
+    flex: none;
+    width: 75%;
+  }
+  .tile.is-10 {
+    flex: none;
+    width: 83.33333%;
+  }
+  .tile.is-11 {
+    flex: none;
+    width: 91.66667%;
+  }
+  .tile.is-12 {
+    flex: none;
+    width: 100%;
+  }
+}
+
+@keyframes spin-around {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+
 .hero-video {
   bottom: 0;
   left: 0;
diff --git a/sass/components/components.sass b/sass/components/components.sass
index 9d03779a..7ea178fa 100644
--- a/sass/components/components.sass
+++ b/sass/components/components.sass
@@ -1,7 +1,6 @@
 @charset "utf-8"
 
 @import "card"
-@import "grid"
 @import "highlight"
 @import "level"
 @import "media"
diff --git a/sass/components/grid.sass b/sass/grid/columns.sass
similarity index 90%
rename from sass/components/grid.sass
rename to sass/grid/columns.sass
index ff020766..e3f91aea 100644
--- a/sass/components/grid.sass
+++ b/sass/grid/columns.sass
@@ -251,35 +251,3 @@
     // Modifiers
     &.is-desktop
       display: flex
-
-.tile
-  align-items: stretch
-  flex-basis: auto
-  flex-grow: 1
-  flex-shrink: 1
-  min-height: min-content
-  // Modifiers
-  &.is-ancestor
-    margin-left: -10px
-    margin-right: -10px
-    margin-top: -10px
-    &:last-child
-      margin-bottom: -10px
-    &:not(:last-child)
-      margin-bottom: 10px
-  &.is-child
-    margin: 0 !important
-  &.is-parent
-    padding: 10px
-  &.is-vertical
-    flex-direction: column
-    & > .tile.is-child:not(:last-child)
-      margin-bottom: 20px !important
-  // Responsiveness
-  +tablet
-    &:not(.is-child)
-      display: flex
-    @for $i from 1 through 12
-      &.is-#{$i}
-        flex: none
-        width: ($i / 12) * 100%
diff --git a/sass/grid/grid.sass b/sass/grid/grid.sass
new file mode 100644
index 00000000..92a4634a
--- /dev/null
+++ b/sass/grid/grid.sass
@@ -0,0 +1,4 @@
+@charset "utf-8"
+
+@import "columns"
+@import "tiles"
diff --git a/sass/grid/tiles.sass b/sass/grid/tiles.sass
new file mode 100644
index 00000000..f4d5675e
--- /dev/null
+++ b/sass/grid/tiles.sass
@@ -0,0 +1,34 @@
+@import "../utilities/mixins.sass"
+@import "../utilities/variables.sass"
+
+.tile
+  align-items: stretch
+  flex-basis: auto
+  flex-grow: 1
+  flex-shrink: 1
+  min-height: min-content
+  // Modifiers
+  &.is-ancestor
+    margin-left: -10px
+    margin-right: -10px
+    margin-top: -10px
+    &:last-child
+      margin-bottom: -10px
+    &:not(:last-child)
+      margin-bottom: 10px
+  &.is-child
+    margin: 0 !important
+  &.is-parent
+    padding: 10px
+  &.is-vertical
+    flex-direction: column
+    & > .tile.is-child:not(:last-child)
+      margin-bottom: 20px !important
+  // Responsiveness
+  +tablet
+    &:not(.is-child)
+      display: flex
+    @for $i from 1 through 12
+      &.is-#{$i}
+        flex: none
+        width: ($i / 12) * 100%