The Flex Grid

The Flex Grid is a lightweight 12 columns grid, build with CSS3 feature flexbox. The grid is made for modern browsers like Chrome, Firefox, Safari & IE10+. No support for dinosaurs. Feel free to download the grid or fork the project on Github.

Fluid grid

<div class="grid">
    <div class="row">
        <div class="col-12">
            <div class="content"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-1">
            <div class="content"></div>
        </div>
        <div class="col-11">
            <div class="content"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-2">
            <div class="content"></div>
        </div>
        <div class="col-10">
            <div class="content"></div>
        </div>
    </div>    
    <div class="row">
        <div class="col-3">
            <div class="content"></div>
        </div>
        <div class="col-9">
            <div class="content"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            <div class="content"></div>
        </div>
        <div class="col-8">
            <div class="content"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-5">
            <div class="content"></div>
        </div>
        <div class="col-7">
            <div class="content"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-6">
            <div class="content"></div>
        </div>
        <div class="col-6">
            <div class="content"></div>
        </div>
    </div>
</div>

Responsive grid

<div class="grid">
    <div class="row">
        <div class="col-large-12 col-medium-6">
            <div class="content"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-large-3 col-medium-6 col-small-12">
            <div class="content"></div>
        </div>
        <div class="col-large-9 col-medium-9 col-small-12">
            <div class="content"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-large-4">
            <div class="content"></div>
        </div>
        <div class="col-large-8">
            <div class="content"></div>
        </div>
    </div>
    <div class="row">
        <div class="col-large-6">
            <div class="content"></div>
        </div>
        <div class="col-large-6">
            <div class="content"></div>
        </div>
    </div>
</div>

Smart columns

<div class="grid">
    <div class="row">
        <div class="col-large-4 col-medium-4 col-small-4">
            <div class="content"></div>
        </div>
        <div class="col">
            <div class="content">smart column</div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="content">smart column</div>
        </div>
        <div class="col-large-2 col-medium-2 col-small-2">
            <div class="content"></div>
        </div>
        <div class="col-large-3 col-medium-3 col-small-3">
            <div class="content"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="content">smart column</div>
        </div>
        <div class="col-large-2 col-medium-8 col-small-12">
            <div class="content"></div>
        </div>
    </div>
    <div class="row">
        <div class="col">
            <div class="content">smart column</div>
        </div>
        <div class="col">
            <div class="content">smart column</div>
        </div>
        <div class="col">
            <div class="content">smart column</div>
        </div>
    </div>
</div>

Gutterless

<div class="grid gutterless">
    <div class="row">
        <div class="col">
            <div class="content"></div>
        </div>
        <div class="col">
            <div class="content darkblue"></div>
        </div>
        <div class="col">
            <div class="content"></div>
        </div>
    </div>
</div>

Nested grid / Subgrid

The Flex Grid is nestable. Every nested grid needs the .grid container.

<div class="grid">
    <div class="row">
        <div class="col-6">
            <div class="content">
                <div class="grid">
                    <div class="row">
                        <div class="col-6">
                            <div class="content">.col-6</div>
                        </div>
                        <div class="col-6">
                            <div class="content">.col-6</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-3">
                            <div class="content">.col-3</div>
                        </div>
                        <div class="col-9">
                            <div class="content">.col-9</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="content">
                <div class="grid">
                    <div class="row">
                        <div class="col-7">
                            <div class="content">.col-7</div>
                        </div>
                        <div class="col-5">
                            <div class="content">.col-5</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4">
                            <div class="content">.col-4</div>
                        </div>
                        <div class="col-8">
                            <div class="content">.col-8</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Reverse order

Extend a row with the row-reverse class to reverse the order of the columns. For responsive use row-small-reverse, row-medium-reverse or row-large-reverse.

<div class="grid">
    <div class="row row-reverse">
        <div class="col-4">
            <div class="content">1</div>
        </div>
        <div class="col-4">
            <div class="content">2</div>
        </div>
        <div class="col-4">
            <div class="content">3</div>
        </div>
    </div>
</div>

Alignment

Align left

Extend a row with the row-left class to align the columns to the left. For responsive use row-small-left, row-medium-left or row-large-left.

<div class="grid">
    <div class="row row-left">
        <div class="col-2">
            <div class="content"></div>
        </div>
        <div class="col-3">
            <div class="content"></div>
        </div>
        <div class="col-2">
            <div class="content"></div>
        </div>
    </div>
</div>

Align right

Extend a row with the row-right class to align the columns to the right. For responsive use row-small-right, row-medium-right or row-large-right.

<div class="grid">
    <div class="row row-right">
        <div class="col-2">
            <div class="content"></div>
        </div>
        <div class="col-3">
            <div class="content"></div>
        </div>
        <div class="col-2">
            <div class="content"></div>
        </div>
    </div>
</div>

Align center

Extend a row with the row-center class to align the columns to the center. For responsive use row-small-right, row-medium-right or row-large-right.

<div class="grid">
    <div class="row row-center">
        <div class="col-2">
            <div class="content"></div>
        </div>
        <div class="col-3">
            <div class="content"></div>
        </div>
        <div class="col-2">
            <div class="content"></div>
        </div>
    </div>
</div>

Space between

Extend a row with the row-space-between class to distribute the columns evenly in the line. The first column will be aligned to the left and the last column to the right. For responsive use row-small-space-between, row-medium-space-between or row-large-space-between.

<div class="grid">
    <div class="row row-space-between">
        <div class="col-2">
            <div class="content"></div>
        </div>
        <div class="col-3">
            <div class="content"></div>
        </div>
        <div class="col-2">
            <div class="content"></div>
        </div>
    </div>
</div>

Space around

Extend a row with the row-space-around class to distribute the columns evenly in the line. The columns will have equal space between them. The space at the begin and the end of the line will be half of the space between the columns. For responsive use row-small-space-between, row-medium-space-between or row-large-space-between.

<div class="grid">
    <div class="row row-space-around">
        <div class="col-2">
            <div class="content"></div>
        </div>
        <div class="col-3">
            <div class="content"></div>
        </div>
        <div class="col-2">
            <div class="content"></div>
        </div>
    </div>
</div>

Column height & alignment

Individual height align top

<div class="grid">
    <div class="row row-top">
        <div class="col-4">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga.
            </div>
        </div>
        <div class="col-4">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga, perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
        <div class="col-4">
            <div class="content">
                Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
    </div>
</div>

Individual height align center

<div class="grid">
    <div class="row row-middle">
        <div class="col-4">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga.
            </div>
        </div>
        <div class="col-4">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga, perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
        <div class="col-4">
            <div class="content">
                Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
    </div>
</div>

Individual height align bottom

<div class="grid">
    <div class="row row-bottom">
        <div class="col-4">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga.
            </div>
        </div>
        <div class="col-4">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga, perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
        <div class="col-4">
            <div class="content">
                Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
    </div>
</div>

Align single column

In case of row-top, row-middle or row-bottom you can overwrite the vertical alignment of a single column.

<div class="grid">
    <div class="row row-top">
        <div class="col-3 col-bottom">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati.
            </div>
        </div>
        <div class="col-3">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga, perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
        <div class="col-3 col-top">
            <div class="content">
                Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
        <div class="col-3 col-middle">
            <div class="content">
                Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
    </div>
</div>

Equal column height

Default the columns of The Flex Grid have equal height, but the row-equal allows you to make the child element of all columns the same height. Usefull if you need borders or border-radius.

<div class="grid">
    <div class="row row-equal">
        <div class="col-4">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga.
            </div>
        </div>
        <div class="col-4">
            <div class="content">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga, perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
        <div class="col-4">
            <div class="content">
                Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.
            </div>
        </div>
    </div>
</div>

Nested grid with equal column height

In a nested grid it's still possible to use the equal column height feature. Add the row-equal class to every row that needs to have equal height.

<div class="grid">
    <div class="row row-equal">
        <div class="col-6">
            <div class="content">
                <div class="grid">
                    <div class="row row-equal">
                        <div class="col-6">
                            <div class="content">Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.</div>
                        </div>
                        <div class="col-6">
                            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga, perspiciatis tenetur, veniam modi corrupti corporis.</div>
                        </div>
                    </div>
                    <div class="row row-equal">
                        <div class="col-3">
                            <div class="content">Veniam modi</div>
                        </div>
                        <div class="col-9">
                            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="content">
                <div class="grid">
                    <div class="row">
                        <div class="col-4">
                            <div class="content">Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.</div>
                        </div>
                        <div class="col-8">
                            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga, perspiciatis tenetur, veniam modi corrupti corporis.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-7">
                            <div class="content">Veniam modi</div>
                        </div>
                        <div class="col-5">
                            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Nested grid with full grid height

When using a row with equal heights it's possible to fill the full height of a column with a nested grid by using the full-height on the nested grid container.
Note: the size of the column height will be based on the amount of content.

<div class="grid">
    <div class="row row-equal">
        <div class="col-6">
            <div class="content">
                <div class="grid full-height">
                    <div class="row row-equal">
                        <div class="col-6">
                            <div class="content">Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.</div>
                        </div>
                        <div class="col-6">
                            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga, perspiciatis tenetur, veniam modi corrupti corporis.</div>
                        </div>
                    </div>
                    <div class="row row-equal">
                        <div class="col-3">
                            <div class="content">Veniam modi</div>
                        </div>
                        <div class="col-9">
                            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-6">
            <div class="content">
                <div class="grid">
                    <div class="row">
                        <div class="col-4">
                            <div class="content">Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.</div>
                        </div>
                        <div class="col-8">
                            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga, perspiciatis tenetur, veniam modi corrupti corporis.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-7">
                            <div class="content">Veniam modi</div>
                        </div>
                        <div class="col-5">
                            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-4">
                            <div class="content">Perspiciatis tenetur, veniam modi corrupti corporis. Asperiores, veritatis quia.</div>
                        </div>
                        <div class="col-8">
                            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere odio, totam ullam iusto aliquid obcaecati nulla unde temporibus praesentium magni fuga, perspiciatis tenetur, veniam modi corrupti corporis.</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-7">
                            <div class="content">Veniam modi</div>
                        </div>
                        <div class="col-5">
                            <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Hide column for current breakpoint

<div class="grid">
    <div class="row row-bottom">
        <div class="col-4 hide-small">
            <div class="content">small</div>
        </div>
        <div class="col-4 hide-medium">
            <div class="content">medium</div>
        </div>
        <div class="col-4 hide-large">
            <div class="content">large</div>
        </div>
    </div>
</div>