ezpz-grid/docs/mixins-usage.md

A lightweight Sass (.scss) flexbox grid system that's easy to setup and offers a lot of customisation.

# EZPZ Flexbox grid Documentation

[Documentation](docs.md) > Mixins usage

## Mixins
The grid autogenerates the classes it needs to be functional. This can be turned off if you want to generate your own classes and be more flexible or it can be used next to eachother.

### Mandatory
Turn the autogenerated css off to reduce the grid footprint. Optional.

```scss
@use 'pkg:ezpz-grid' with (
  $ezpz-auto-generate: false;
);
```

The grid requires some default styles to properly function. It needs a container which will include the cells. The `main` and `section` element can be replaced with any element or class you want.

```scss

@use 'sass:math';

@use 'pkg:ezpz-grid';

main {
    @include  ezpz-grid.create-grid();

    > section {
        @include ezpz-grid.create-cell(math.div(1, 4));
    }
}
```

### Grid mixins
| mixin | options |
| :--- | :--- |
| ```@include ezpz-grid.grid-layout({option});``` | 'horizontal' (default) or 'vertical' |
| ```@include ezpz-grid.grid-align({option});``` | 'stretch' (default), 'start', 'center' or 'end' |
| ```@include ezpz-grid.grid-wrap({option});``` | 'nowrap' (default), 'wrap' or 'reverse' |

### Cell mixins
| mixin | options |
| :--- | :--- |
| ```@include ezpz-grid.create-cell({fraction});``` | A fraction: for example `math.div(1, 4)` |
| ```@include ezpz-grid.cell-order({option});``` | 'start', 'end' or a number |
| ```@include ezpz-grid.cell-offset({fraction});``` | A fraction: for example `math.div(1, 6)` |
| ```@include ezpz-grid.cell-align({option});``` | 'stretch' (default), 'start', 'center' or 'end' |
| ```@include ezpz-grid.gutter-collapsed();``` | No gutter |

## Demo
For a more in-depth explanation with examples please visit [the demo](http://vicompany.github.io/ezpz-flexbox-grid/mixins.html).