Grid System

---

Stylizer grid system gives you the ability to take advantage of flexbox for laying out a grid while having a reliable inline-block fallback for older browsers.

At the time of writing, browser flexbox support is at 96.63% so it's definitely time to forge ahead with flexbox, especially with a reliable inline-block fallback. Where flexbox isn't supported, your basic grid structure will remain intact and most of the layout classes still work. Try this page out in a browser that does not support flexbox (such as Internet Explorer 9) to see for yourself!

Why Stylizer grid system ?.

• Where flexbox is supported, columns are all the same height by default.
• Stylizer grid cells never push each other out of the way (as with floated grids).
• Supports semantic elements e.g. you can use ul as a grid.
• Supports nested grids.
• Good cross browser support.
• Easily customizable and extendable.

Intended use.

• Creating complex nested flexbox grids which take advantage of flexbox layout properties.
• Using a flexbox layout inside a CSS grid page layout.
• Generating a flexbox grid with dynamic content of varying height e.g. a list of products.
• An addition or replacement for your current css layout framework.
• A set of vendor-prefixed mixins and helper classes to get your flexbox solution off the ground faster.

Browser Support.

All browser specific implementations of flexbox are supported via vendor prefixes, including the slightly problematic IE10 implementation of an early draft of the flexbox specification. Internet Explorer 6 and 7 are explicitly not supported because there are so many issues and quirks that it renders the exercise futile. However, the basic grid still works in those browsers.

Breakpoints in ie8.

If you want to use the grid with breakpoints in ie8 you will need to use respond.js which enables media query support in those browsers via JavaScript. There's very little downside to adding this because it's very lightweight and performs well.

HTML5 Element.

If you wish to use html5 elements such as section in older browsers such as ie8 and 9, you will need to use html5Shiv. Again, there's very little downside to using this considering the extra peace of mind it gives you when using html5 elements.

ie10 and ie11 grid heights.

ie10 and ie11 have a flexbox rendering bug which means that unless the height of the grid is set with an unit value, flex items will only stretch to be as large as their largest sibling. The grid will still work in these browsers, but it won't entirely fill the height of it's container unless a height in units is specified for the grid.

Please note that min-height and percentage heights will not work. The height must be set with px em or vh. There's further reading to be had on the bug itself if you wish to understand it further. You can use a CSS hack for ie10 and ie11 to set a unit height and solve these issues in your grid implementation.

.grid {
    min-height: 300px;

    @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
        height: 600px;
    }
}

Exemple.

<div class="row">
    <div class="col-6">
        <content>
    </div>
    <div class="col-6">
        <content>
    </div>
</div>

A closer look.

Grid parent.

Example : Row

This is the top level container element. Any .col element that is a direct child of a .row is a flex item and their layout can be affected by any modifer classes placed on the parent .row.

Column child

Example : .col-10 .col-md .col-auto

Modifier classes can be applied to the .row element to modify the layout of it's direct children elements.

Grid modifier

Example : .align-end .no-wrap .justify-center

Modifier classes can be applied to the .row element to modify the layout of it's direct children elements.

Semantic markup.

You don't have to use div for your grid and ideally you should use the most semantically appropriate markup for your use case with no visible difference.

Divs

<div class="row">
    <div class="col-6">
        <content>
    </div>
</div>

Unordered list

<ul class="row">
    <li class="col-6">
        <content>
    </li>
</ul>

Html5 elements

<section class="row">
    <article class="col-6">
        <content>
    </article>
</section>

Numbered columns.

By default Stylizer grid is a 12 column grid but this can be easily changed. Regardless of how many columns you need, you will likely require extra control over the breakpoints at which your grid columns revert to 100% width. To do this you will need to use these modifier classes which determine grid columns at various viewport sizes. A grid built using numbered columns in this way will remain fully intact in the inline-block fallback.

The Stylizer grid breakpoints can be easily re-defined but are set to these values by default:

• .col- : does not collapse
• .col-xs- : collapses below 576px
• .col-sm : collapses below 768px
• .col-md : collapses below 992px
• .col-lg : collapses below 1200px
• .col-xlg : collapses below 1600px

Auto Colmuns

You can add any number of auto sizing .col-auto columns to a .row and therefore avoid using numbered columns. You can also use the breakpoint sensitive classes such as .col-sm-auto to determine when your columns revert to 100% width. A grid built using auto columns will not remain fully intact in the inline-block fallback. For full browser support, you need to use numbered columns.

Containers

---

A Stylizer grid will fill the full width of it's parent element which means you can drop it into any containing element you may already have in place.

However, Stylizer grid has a responsive .container class available which uses a combination of margins and padding to maintain layout between elements both inside and outside of the grid. By default this uses the same breakpoints as the numbered columns. However, It is possible to modify the max width and breakpoints of the .container class by modifying the included variables.scss file and building a new css file.

Responsive Container

<div class="container">
    <p>This element is inside the container but outside of the row</p>
    <div class="row">
        <div class="col-6">
            <p>An element inside the row</p>
        </div>
        <div class="col-6">
            <p>Another element inside the row</p>
        </div>
    </div>
</div>

Full width container

If you desire a full width container without a max width but with the same combination of margins and padding to maintain layout between elements both inside and outside of the grid there is also a .container-full class available.

<div class="container-full">
    <p>This element is inside the <em>full width</em> container but outside of the grid</p>
    <div class="row">
        <div class="col-6">
            <p>An element inside the row</p>
        </div>
        <div class="col-6">
            <p>Another element inside the row</p>
        </div>
    </div>
</div>

Row

---

Nested row.

It's possible to nest rows inside each other. Start a new .row inside a .col-x element and everything lines up correctly.

<div class="row">
    <div class="col-sm-6">
        <content>
    </div>
    <div class="col-sm-6">
        <div class="row">
            <div class="col-6">
                <content>
            </div>
            <div class="col-6">
                <content>
            </div>
            <div class="col-6">
                <content>
            </div>
            <div class="col-6">
                <content>
            </div>
        </div>
    </div>
</div>

Colmuns

---

You can override the cross axis alignment of a single col-x element by using these modifers.

.align-self-stretch

When applied to col-x sets align-self: stretch

.align-self-start

When applied to col-x sets align-self: flex-start

.align-self-end

When applied to col-x sets align-self: flex-end

Cross axis positioning

These modifers set the value of align-content which determine the position of your grid elements when there is extra space available in the cross-axis (usually because you've set a height on the grid that is larger than the contents). These modifiers can be added to your .row element but also to the .col-x elements inside the row.

This modifier has no effect when there is only one line of col-x elements in the grid so cannot be used when no-wrap is present on the grid or when you only have a single row of columns

Stretch by default

In browsers that support flexbox we have equal height columns that stretch to fill the available space by default because the default value of align-content is stretch

See the example