# A real two-dimensional _CSS Grid_ grid-system

Use `css-grid-system.scss` to generate a real two-dimensional **CSS Grid** grid-system.

Notes:

1. Unlike the traditional columnar 12-col grid systems, here _you get to choose_ how many columns you need for your layout: 1,2,3,4,5 or 6 (max).
2. You will probably never need to use more than 6 columns (in fact, usually you will use less than 6). But if you do, then change the `$grid--max-cols` variable. **Warning:** don't go much higher than 6 columns, because this will massively increase your outputted CSS!
3. RTL and LTR languages are supported.

## Grid system (at all viewport widths)

### Grid Classes

* `.grid`
* `.grid--cols-1` ... `.grid--cols-6` -- choose to have 1,2,3,4,5 or 6 columns.
* `.grid--gap`

### Grid-item Classes

* `.col--1` ... `.col--6` -- single-column items in positions 1,2,3,4,5 or 6 (to be paired with your chosen `.grid--cols-1` ... `.grid--cols-6`).
* **Column spanning** -- multiple permutations, e.g.:
	* `.col--1-3` -- spans columns 1-3.
	* `.col--2-4` -- spans columns 2-4.
* `.row--1` ... `.row--6` -- single-row items in positions 1,2,3,4,5 or 6.
* **Row spanning** -- multiple permutations, e.g.:
	* `.row--1-3` -- spans rows 1-3.
	* `.row--2-4` -- spans rows 2-4.
* **Justification (horizontal)** -- within grid area:
	*  `.justify--left`
	*  `.justify--right`
	*  `.justify--center`
	*  `.justify--stretch`
* **Alignment (vertical)** -- within grid area:
	*  `.align--top`
	*  `.align--bottom`
	*  `.align--center`
	*  `.align--stretch`

## Responsive (viewport width) modifiers

### Grid Classes

* `.grid--cols-1` ... `.grid--cols-6` -- all viewport widths
* `.grid-md--cols-1` ... `.grid-md--cols-6` -- 768px width up
* `.grid-lg--cols-1` ... `.grid-lg--cols-6` -- 1024px width up

### Grid-item Classes

* All viewport widths:
	* `col-`
	* `row-`
	* `justify-`
	* `align-`
* Viewport widths 768px up:
	* `col-md-`
	* `row-md-`
	* `justify-md-`
	* `align-md-`
* Viewport widths 1024px up:
	* `col-lg-`
	* `row-lg-`
	* `justify-lg-`
	* `align-lg-`

## Examples

Simple:

```
<div class="grid grid--cols-3">
  <div>First grid item</div>
  <div>Second grid item</div>
  <div>Third grid item</div>
  <div>Fourth grid item</div>
  <div>Fifth grid item</div>
  <div>sixth grid item</div>
</div>
```

Row spanning:

```
<div class="grid grid--cols-2 grid--gap">
  <div class="col--1 row--1-3">First grid item</div>
  <div>Second grid item</div>
  <div>Third grid item</div>
  <div>Fourth grid item</div>
</div>
```

Layout 1 (all viewport widths):

```
<div class="grid grid--cols-4">
  <div class="col--1-4">Header</div>
  <div class="col--1-4">Menubar</div>
  <div class="col--1-3 row--3-5">Main article</div>
  <div>Sidebar (right) -- top third</div>
  <div>Sidebar (right) -- middle third</div>
  <div>Sidebar (right) -- bottom third</div>
  <div class="col--1-4">Footer</div>
</div>
```

Layout 2 (viewport widths 768px up) -- exemplifying grid nesting, column re-ordering and center-justifying:

```
<div class="grid grid-md--cols-4">
  <div class="col-md--1 col-lg--4">Sidebar</div>
  <div class="col-md--2-4 col-lg--1-3 row-md--1">
    <div>Article<div>
    <div class="grid grid-md--cols-3">
      <div>Nested<div>
      <div>Nested<div>
      <div>Nested<div>
    </div>
  </div>
  <div class="justify-md--center">Centered footer</div>
</div>
```