Grid System

Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.

Classes#

ClassProperties
griddisplay: flex;
flex-wrap: wrap;
margin-right: -0.5rem;
margin-left: -0.5rem;
margin-top: -0.5rem;
grid-noguttermargin-right: 0;
margin-left: 0;
margin-top: 0;
colflex-grow: 1;
flex-basis: 0;
padding: $gutter;
col-fixedflex: 0 0 auto;
padding: $gutter;
col-1flex: 0 0 auto;
padding: $gutter;
width: 8.3333%;
col-2flex: 0 0 auto;
padding: $gutter;
width: 16.6667%;
col-3flex: 0 0 auto;
padding: $gutter;
width: 25%;
col-4flex: 0 0 auto;
padding: $gutter;
width: 33.3333%;
col-5flex: 0 0 auto;
padding: $gutter;
width: 41.6667%;
col-6flex: 0 0 auto;
padding: $gutter;
width: 50%;
col-7flex: 0 0 auto;
padding: $gutter;
width: 58.3333%;
col-8flex: 0 0 auto;
padding: $gutter;
width: 66.6667%;
col-9flex: 0 0 auto;
padding: $gutter;
width: 75%;
col-10flex: 0 0 auto;
padding: $gutter;
width: 83.3333%;
col-11flex: 0 0 auto;
padding: $gutter;
width: 91.6667%;
col-12flex: 0 0 auto;
padding: $gutter;
width: 100%;
col-offset-0margin-left: 0;
col-offset-1margin-left: 8.3333%;
col-offset-2margin-left: 16.6667%;
col-offset-3margin-left: 25%;
col-offset-4margin-left: 33.3333%;
col-offset-5margin-left: 41.6667%;
col-offset-6margin-left: 50%;
col-offset-7margin-left: 58.3333%;
col-offset-8margin-left: 66.6667%;
col-offset-9margin-left: 75%;
col-offset-10margin-left: 83.3333%;
col-offset-11margin-left: 91.6667%;
col-offset-12margin-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.

1
2
3
<div class="grid">
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">1</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">2</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">3</div>
    </div>
</div>

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.

4
1
1
1
1
1
1
1
1
2
6
4
<div class="grid">
    <div class="col-4">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">4</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">1</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">1</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">1</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">1</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">1</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">1</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">1</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">1</div>
    </div>
</div>

<div class="grid">
    <div class="col-2">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">2</div>
    </div>
    <div class="col-6">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">6</div>
    </div>
    <div class="col-4">
        <div class="text-center p-3 border-round-sm bg-primary font-bold ">4</div>
    </div>
</div>

Multiline#

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

6
6
6
6
<div class="grid">
    <div class="col-6">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">6</div>
    </div>
    <div class="col-6">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">6</div>
    </div>
    <div class="col-6">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">6</div>
    </div>
    <div class="col-6">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">6</div>
    </div>
</div>

Fixed Width Column#

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

100px
auto
<div class="grid">
    <div class="col-fixed" style="width:100px">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">100px</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">auto</div>
    </div>
</div>

Offset#

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

6
4
4
<div class="grid">
    <div class="col-6 col-offset-3">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">6</div>
    </div>
</div>

<div class="grid">
    <div class="col-4">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">4</div>
    </div>
    <div class="col-4 col-offset-4">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">4</div>
    </div>
</div>

Nested#

Columns can be nested to create more complex layouts.

6
6
12
4
<div class="grid nested-grid">
    <div class="col-8">
        <div class="grid">
            <div class="col-6">
                <div class="text-center p-3 border-round-sm bg-primary font-bold">6</div>
            </div>
            <div class="col-6">
                <div class="text-center p-3 border-round-sm bg-primary font-bold">6</div>
            </div>
            <div class="col-12">
                <div class="text-center p-3 border-round-sm bg-primary font-bold">12</div>
            </div>
        </div>
    </div>
    <div class="col-4">
        <div class="text-center p-3 border-round-sm h-full bg-primary font-bold">4</div>
    </div>
</div>

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 individual columns with the same class name.

1
1
1
<div class="grid grid-nogutter">
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">1</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">1</div>
    </div>
    <div class="col">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">1</div>
    </div>
</div>

Responsive#

Responsive alternatives are available for customizations based on screen size. Add the responsive breakpoint keyword followed by a semi-colon as a prefix such as md:col-6 to use a responsive class.

ClassDescription
sm:small screens e.g. phones
md:medium screens e.g. tablets
lg:large screens e.g. notebooks
xl:larger screens e.g monitors
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">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">col-12 md:col-6 lg:col-3</div>
    </div>
    <div class="col-12 md:col-6 lg:col-3">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">col-12 md:col-6 lg:col-3</div>
    </div>
    <div class="col-12 md:col-6 lg:col-3">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">col-12 md:col-6 lg:col-3</div>
    </div>
    <div class="col-12 md:col-6 lg:col-3">
        <div class="text-center p-3 border-round-sm bg-primary font-bold">col-12 md:col-6 lg:col-3</div>
    </div>
</div>
                    PrimeFlex 3.3.1 by PrimeTek