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.
spongycake
spongycake