Grid, with rows and columns, see ->

A number of classes have been added to control the layout in a
grid-based way.

To start `row` is wrapped the elements you wish to group in a horizontal
line.

Next up, `grid-small` and `grid-large` relate to columns and behavior on
screen size. For example, `grid-large` will trigger layout changes when
the screen reaches a "desktop size" and `grid-small` for "mobile size".

The list of available column widths:

* half
* one-fourth
* three-fourths
* one-third
* two-thirds

Going in the order they are declared, for example, columns A,B - when A is
one-third and B is two-thirds. This means A will occupy 33% and B will
occupy 66%.

Additionally, look at _sass-mq.scss file if you want to define different
screen sizes.

EXAMPLE:
```
<div class="row">
  <div class="grid-large two-thirds">
    2/3
  </div>
  <div class="grid-large one-third">
    1/3
  </div>
</div>
```

===Sass API===
We have a helper called `media-query`. It directs calls to the sass-mq
library. Say we wanted to include a breakpoint in your sass files, do the following:

```
@include media-query($from: mobile) {
  // content
}
```
You are now generating a media-queries for mobile screens.

To understand what arguments can be passed to `media-query` then look at
the sass-mq documentation. [https://sass-mq.github.io/sass-mq/](https://sass-mq.github.io/sass-mq/)

=== Other ===
Technical - implementation being used in grid is flexbox. Do not expect
support for standard HTML Grid Layout.

public/style.css

@@ -191,6 +191,76 @@ a:active {
   margin-right: 15px;
 }
 
+/**
+ * Grid
+ */
+.grid-small,
+.grid-large {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.row {
+  margin-left: -1rem;
+  margin-right: -1rem;
+}
+
+.row {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.grid-small,
+.grid-large {
+  flex-basis: 100%;
+  margin-bottom: 1rem;
+}
+
+/* Small screen breakpoint */
+@media (min-width: 20em) {
+  .grid-small {
+    flex: 1;
+    margin-bottom: 0;
+  }
+  .grid-small.half {
+    flex: 0 0 50%;
+  }
+  .grid-small.one-fourth {
+    flex: 0 0 25%;
+  }
+  .grid-small.three-fourths {
+    flex: 0 0 75%;
+  }
+  .grid-small.one-third {
+    flex: 0 0 33.3333333333%;
+  }
+  .grid-small.two-thirds {
+    flex: 0 0 66.6666666667%;
+  }
+}
+/* Large screen breakpoint */
+@media (min-width: 61.25em) {
+  .grid-large {
+    flex: 1;
+    margin-bottom: 0;
+  }
+  .grid-large.half {
+    flex: 0 0 50%;
+  }
+  .grid-large.one-fourth {
+    flex: 0 0 25%;
+  }
+  .grid-large.three-fourths {
+    flex: 0 0 75%;
+  }
+  .grid-large.one-third {
+    flex: 0 0 33.3333333333%;
+  }
+  .grid-large.two-thirds {
+    flex: 0 0 66.6666666667%;
+  }
+}
 .header {
   width: 100%;
   height: 56px;

src/scss/_mixins.scss

@@ -1,2 +0,0 @@
-// Vendor
-@import "vendor/_sass-mq.scss";

src/scss/helpers.scss

@@ -1 +1,2 @@
 @import "helpers/image";
+@import "helpers/media-query";

src/scss/helpers/_media-query.scss

@@ -0,0 +1,7 @@
+@import "../vendor/_sass-mq.scss";
+
+@mixin media-query($args...) {
+  @include mq.mq($args...) {
+    @content;
+  }
+}

src/scss/objects.scss

@@ -0,0 +1 @@
+@import "objects/grid";

src/scss/objects/_grid.scss

@@ -0,0 +1,79 @@
+/**
+ * Grid
+ */
+
+$column-padding: 1rem;
+$margin-bottom: 1rem;
+
+// The rows have a negative margin  which are offset by the padding on the columns.
+%column-padding {
+  @include padding-left($column-padding);
+  @include padding-right($column-padding);
+}
+
+%row-margin {
+  @include margin-left(-$column-padding);
+  @include margin-right(-$column-padding);
+}
+
+// Flex row
+.row {
+  @extend %row-margin;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.grid-small,
+.grid-large {
+  @extend %column-padding;
+  flex-basis: 100%;
+  margin-bottom: $margin-bottom;
+}
+
+/* Small screen breakpoint */
+
+@include media-query($from: mobile) {
+  .grid-small {
+    flex: 1;
+    margin-bottom: 0;
+    &.half {
+      flex: 0 0 calc(1 / 2 * 100%);
+    }
+    &.one-fourth {
+      flex: 0 0 calc(1 / 4 * 100%);
+    }
+    &.three-fourths {
+      flex: 0 0 calc(3 / 4 * 100%);
+    }
+    &.one-third {
+      flex: 0 0 calc(1 / 3 * 100%);
+    }
+    &.two-thirds {
+      flex: 0 0 calc(2 / 3 * 100%);
+    }
+  }
+}
+
+/* Large screen breakpoint */
+@include media-query($from: desktop) {
+  .grid-large {
+    flex: 1;
+    margin-bottom: 0;
+    &.half {
+      flex: 0 0 calc(1 / 2 * 100%);
+    }
+    &.one-fourth {
+      flex: 0 0 calc(1 / 4 * 100%);
+    }
+    &.three-fourths {
+      flex: 0 0 calc(3 / 4 * 100%);
+    }
+    &.one-third {
+      flex: 0 0 calc(1 / 3 * 100%);
+    }
+    &.two-thirds {
+      flex: 0 0 calc(2 / 3 * 100%);
+    }
+  }
+}

src/scss/styles.scss

@@ -1,13 +1,13 @@
 @use "~sass-mq/mq";
-@import "helpers";
 @import "~rfs/scss";
 @import "settings";
-@import "mixins";
+@import "helpers";
 @import "maps";
 @import "utils";
 @import "core";
 @import "global";
 @import "colors";
 @import "container";
+@import "objects";
 @import "components";
 @import "~responsive-nav/responsive-nav.css";