Home Flexbox Grid

Flexbox Grid

Simple Flexbox Grid

A simple responsive grid system using flexbox for layout.

Auto
Half
Auto

By default the grid includes a gutter (defined in SCSS as $gutter: 1rem !default;) and cells are auto-sized with flex: 1;.

Cell One
Cell Two
Cell Three
Cell One
Cell Two
Cell Three
Cell Four

Remove the gutters by adding the no-gutters class to the grid.

Cell One
Cell Two
Cell Three
Cell One
Cell Two
Cell Three
Cell Four

Default cells auto-fit contents so you can have as many as make sense in your design.

Auto
Auto
Auto
Auto
Auto
Auto
Auto

When resized below the mobile width (defined in SCSS as $mobile-width: 30rem !default;) cells become full-width and stack vertically.

So this:

Auto
Auto
Auto

Becomes this:

Auto
Auto
Auto

You can specify a size for one or more cells in a row and they will keep that ratio. Resize the window to see it in action.

Fourth
Auto
Third
Auto
Third
Auto
Auto
Third
Auto
Half
Auto
Auto
Auto
Two-Thirds

By default rows align contents to the left (flex-start). Horizontal spacing can be modified by adding classes to the row.

Third
Third

With center:

Third
Third

With right:

Third
Third

With spread:

Third
Third

With spaced:

Third
Third

Grids can be nested indefinitely, and default cells use the full height of their row. However, you can specify a cell’s vertical alignment.

Half
Third
Two-Thirds
Auto
Auto
Auto Top
Auto Center
Auto Bottom

Here’s the markup for those nested grids:

<div class="grid">
    <div class="row">
        <div class="cell half">
            Half
            <div class="grid"><!-- Second level grid -->
                <div class="row">
                    <div class="cell third">Third</div>
                    <div class="cell two-thirds">
                        Two-Thirds
                        <div class="grid"><!-- Third level grid -->
                            <div class="row">
                                <div class="cell">Auto</div>
                                <div class="cell">Auto</div>
                            </div>
                        </div><!-- Third level grid -->
                    </div>
                </div>
            </div><!-- Second level grid -->
        </div>
        <div class="cell top">Auto Top</div>
        <div class="cell center">Auto Center</div>
        <div class="cell bottom">Auto Bottom</div>
    </div>
</div>

This website uses cookies to enhance user experience and to analyze performance and traffic on our website. We also share information about your use of our site with our social media, advertising, and analytics partners. Cookie Information Notice