⌘ K
esc

    Grid System

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Class Properties
    grid display: flex; flex-wrap: wrap; margin-right: -0.5rem; margin-left: -0.5rem; margin-top: -0.5rem;
    grid-nogutter margin-right: 0; margin-left: 0; margin-top: 0;
    col flex-grow: 1; flex-basis: 0; padding: $gutter;
    col-fixed flex: 0 0 auto; padding: $gutter;
    col-1 flex: 0 0 auto; padding: $gutter; width: 8.3333%;
    col-2 flex: 0 0 auto; padding: $gutter; width: 16.6667%;
    col-3 flex: 0 0 auto; padding: $gutter; width: 25%;
    col-4 flex: 0 0 auto; padding: $gutter; width: 33.3333%;
    col-5 flex: 0 0 auto; padding: $gutter; width: 41.6667%;
    col-6 flex: 0 0 auto; padding: $gutter; width: 50%;
    col-7 flex: 0 0 auto; padding: $gutter; width: 58.3333%;
    col-8 flex: 0 0 auto; padding: $gutter; width: 66.6667%;
    col-9 flex: 0 0 auto; padding: $gutter; width: 75%;
    col-10 flex: 0 0 auto; padding: $gutter; width: 83.3333%;
    col-11 flex: 0 0 auto; padding: $gutter; width: 91.6667%;
    col-12 flex: 0 0 auto; padding: $gutter; width: 100%;
    col-offset-0 margin-left: 0;
    col-offset-1 margin-left: 8.3333%;
    col-offset-2 margin-left: 16.6667%;
    col-offset-3 margin-left: 25%;
    col-offset-4 margin-left: 33.3333%;
    col-offset-5 margin-left: 41.6667%;
    col-offset-6 margin-left: 50%;
    col-offset-7 margin-left: 58.3333%;
    col-offset-8 margin-left: 66.6667%;
    col-offset-9 margin-left: 75%;
    col-offset-10 margin-left: 83.3333%;
    col-offset-11 margin-left: 91.6667%;
    col-offset-12 margin-left: 100%;
    Getting Started

    FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit A Complete Guide to Flexbox. A basic grid is defined by giving a container grid class and children the col class. Children of the grid will have the same width and scale according to the width of the parent.

    
    <div class="grid">
        <div class="col">1</div>
        <div class="col">2</div>
        <div class="col">3</div>
    </div>
    
    1
    2
    3
    12 Column Grid

    FlexGrid includes a 12 column based layout utility where width of a column is defined with the col-{number} style class. Columns with prefined widths can be used with columns with auto width (col) as well.

    In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.

    
    <div class="grid">
        <div class="col-4">4</div>
        <div class="col">1 </div>
        <div class="col">1 </div>
        <div class="col">1 </div>
        <div class="col">1 </div>
        <div class="col">1 </div>
        <div class="col">1 </div>
        <div class="col">1 </div>
        <div class="col">1 </div>
    </div>
    
    <div class="grid">
        <div class="col-2">2</div>
        <div class="col-6">6</div>
        <div class="col-4">4</div>
    </div>
    
    4
    1
    1
    1
    1
    1
    1
    1
    1
    2
    6
    4
    MultiLine

    When the number of columns exceed 12, columns wrap to a new line.

    
    <div class="grid">
        <div class="col-6">6</div>
        <div class="col-6">6</div>
        <div class="col-6">6</div>
        <div class="col-6">6</div>
    </div>
    
    6
    6
    6
    6
    Fixed Width Column

    A column can have a fixed width while siblings having auto width. Apply col-fixed class to fix a column width.

    
    <div class="grid">
        <div class="col-fixed" style="width:100px">Fixed</div>
        <div class="col">Auto</div>
    </div>
    
    100px
    auto
    Offset

    Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.

    
    <div class="grid">
        <div class="col-6 col-offset-3">6</div>
    </div>
    
    <div class="grid">
        <div class="col-4">4 </div>
        <div class="col-4 col-offset-4">4</div>
    </div>
    
    6
    4
    4
    Nested

    Columns can be nested to create more complex layouts.

    
    <div class="grid">
        <div class="col-8">
            <div class="grid">
                <div class="col-6">
                    6
                </div>
                <div class="col-6">
                    6
                </div>
                <div class="col-12">
                    12
                </div>
            </div>
        </div>
        <div class="col-4">
            4
        </div>
    </div>
    
    6
    6
    12
    4
    Gutter

    A .5rem padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply .grid-nogutter class to the container. Gutters can also be removed on an ndividual columns with the same class name.

    
    <div class="grid grid-nogutter">
        <div class="col">1</div>
        <div class="col grid-nogutter">2</div>
        <div class="col">3</div>
    </div>
    
    Responsive

    Breakpoints define how the display property should be defined depending on the screen size. Design is mobile first so smaller values can also apply to larger values e.g. md also applies to lg or xl if they are not explicitly defined.

    • sm: small screens e.g. phones
    • md: medium screens e.g. tablets
    • lg: large screens e.g. notebooks
    • xl: larger screens .e.g monitors

    Resize to change boxes width.

    col-12 md:col-6 lg:col-3
    col-12 md:col-6 lg:col-3
    col-12 md:col-6 lg:col-3
    col-12 md:col-6 lg:col-3
    
    <div class="grid">
        <div class="col-12 md:col-6 lg:col-3">A</div>
        <div class="col-12 md:col-6 lg:col-3">B</div>
        <div class="col-12 md:col-6 lg:col-3">C</div>
        <div class="col-12 md:col-6 lg:col-3">D</div>
    </div>