EZPZ Flexbox Grid

Using mixins

The grid can also be used without the autogenerated css, but by using your own css and the grid mixins.

1: Grid and cells

1
2
2.1
2.2
2.3
2.4 
article {
    @include create-grid();

    > section {
        @include create-grid-cell();
    }
}

1.1: Cell

1
2
3
.col-{number} {
    @include create-cell({fraction});
}

1.2: Cell order

1
2
3
4
section {
    @include cell-order(start);
    // or
    @include cell-order(end);
    // or
    @include cell-order({number});
}

1.3: Cell offset

1
2
3
section {
    @include cell-offset({fraction});
}

2: Direction of all cells within a grid section

2.1: Horizontal (default)

1
2
3
article {
    @include grid-layout(horizontal);
}

2.1: Vertical

1
2
3
article {
    @include grid-layout(vertical);
}

3: Alignment of all cells within a grid section

3.1: Align stretch (default)

1
2
3
article {
    @include grid-align(stretch);
}

3.2: Align start

1
2
3
article {
    @include grid-align(start);
}

3.3: Align end

1
2
3
article {
    @include grid-align(end);
}

3.4: Align center

1
2
3
article {
    @include grid-align(center);
}

4: Wrapping of cells within a grid section

4.1: No wrap (default)

1
2
3
4
5
6
7
8
9
10
11
12
article {
    @include grid-wrap(nowrap);
}

4.2: Wrap

1
2
3
4
5
6
7
8
9
10
11
12
article {
    @include grid-wrap(wrap);
}

4.3: Reversed wrap

1
2
3
4
5
6
7
8
9
10
11
12
article {
    @include grid-wrap(reverse);
}

5: Alignment of individual cells

1
2
3
4
section {
    @include cell-align(stretch); // default
    // or
    @include cell-align(start);
    // or
    @include cell-align(end);
    // or
    @include cell-align(center);
}

6: Collapsed gutters

6.1: For all cells

article {
    > section {
        @include gutter-collapsed();
    }
}

6.2: For a specific cell

1
4
section {
    &.is-collapsed {
        @include gutter-collapsed();
    }
}