Skip to main content
Figuration v3 Preview Available!
Components

Reusable components built to provide alerts, button groups, cards, input groups, media objects, navigation, and much more.

Grid Lines

Grid lines is a simple component to create visual lines (rules) between content containers.

Grid lines have support for both a table style layout, along with both the opt-in flexbox and full flexbox modes. To use the opt-in method, simply add a .gridline-flex class to the .gridline element.

Contents

Basics

Start off with a parent .gridline container and add .gridline-item child containers to generate the grid lines. If you are using only horizontal grid lines the .gridline-item containers are optional.

To get consitent spacing, some elements might require utility classes or custom styles. .gridline-item containers can be mixed with the grid system to create the layout.

Header Level 4

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.

Header Level 5

Pellentesque massa nibh, bibendum in lorem id, cursus porttitor augue! In quis lorem rutrum, bibendum nunc in, pharetra sapien. Nam eu vestibulum mi. Aliquam at luctus libero.

Header Level 4

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum.

Header Level 4

Raw denim you probably haven't heard of them jean shorts Austin.

Header Level 4

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin.

<div class="gridline gridline-vr gridline-hr">
    <div class="gridline-item col-md-6">
        <h4>Header Level 4</h4>
        <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.</p>
        <h5>Header Level 5</h5>
        <p>Pellentesque massa nibh, bibendum in lorem id, cursus porttitor augue! In quis lorem rutrum, bibendum nunc in, pharetra sapien. Nam eu vestibulum mi. Aliquam at luctus libero.</p>
    </div>
    <div class="gridline-item col-md-6">
        <h4>Header Level 4</h4>
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum.</p>
    </div>
</div>
<div class="gridline gridline-hr">
    <div class="gridline-item col-md-6">
        <h4>Header Level 4</h4>
        <p>Raw denim you probably haven't heard of them jean shorts Austin.</p>
    </div>
    <div class="gridline-item col-md-6">
        <h4>Header Level 4</h4>
        <p>Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin.</p>
    </div>
</div>

Options

The grid line options for horizontal and vertical lines both use the responsive grid system for showing the rules to that a responsive layout that converts from rows to columns is supported.

Use .gridline-{breakpoint}-hr for horizontal lines, and .gridline-{breakpoint}-vr for vertical lines. Please refer to how our breakpoint nomenclature is used.

Horizontal

Horizontal grid lines are created when there are mutliple .gridline-*-hr elements as sibling containers. The last item (or only item) in a series will not get a bottom grid line.

Vertical

Vertical grid lines are created when there are multiple .gridline-item elements as sibling containers. The first item (or only item) in a series will not get a left grid line.

Bordered

To add an outer border, just add the class .gridline-bordered to a container around your .gridline items.

Examples

Single Column

Rule: Horizontal

Row 1 - Column 1

Row 2 - Column 1

Row 3 - Column 1

<strong>Rule: Horizontal</strong>
<div class="gridline gridline-hr">
    <div class="gridline-item col-md-12">
        <p>Row 1 - Column 1</p>
    </div>
</div>
<div class="gridline gridline-hr">
    <div class="gridline-item col-md-12">
        <p>Row 2 - Column 1</p>
    </div>
</div>
<div class="gridline gridline-hr">
    <div class="gridline-item col-md-12">
        <p>Row 3 - Column 1</p>
    </div>
</div>

Double Column

Rule: Vertical

Column 1

Column 2

<strong>Rule: Vertical</strong>
<div class="gridline gridline-md-vr">
    <div class="gridline-item col-md-6">
        <p>Column 1</p>
    </div>
    <div class="gridline-item col-md-6">
        <p>Column 2</p>
    </div>
</div>
Rule: Horizontal

Row 1 - Column 1

Row 1 - Column 2

Row 2 - Column 1

Row 2 - Column 2

Row 3 - Column 1

Row 3 - Column 2

<strong>Rule: Horizontal</strong>
<div class="gridline gridline-hr">
    <div class="gridline-item col-md-6">
        <p>Row 1 - Column 1</p>
    </div>
    <div class="gridline-item col-md-6">
        <p>Row 1 - Column 2</p>
    </div>
</div>
<div class="gridline gridline-hr">
    <div class="gridline-item col-md-6">
        <p>Row 2 - Column 1</p>
    </div>
    <div class="gridline-item col-md-6">
        <p>Row 2 - Column 2</p>
    </div>
</div>
<div class="gridline gridline-hr">
    <div class="gridline-item col-md-6">
        <p>Row 3 - Column 1</p>
    </div>
    <div class="gridline-item col-md-6">
        <p>Row 3 - Column 2</p>
    </div>
</div>
Rule: Both

Row 1 - Column 1

Row 1 - Column 2

Row 2 - Column 1

Row 2 - Column 2

Row 3 - Column 1

Row 3 - Column 2

<strong>Rule: Both</strong>
<div class="gridline gridline-hr gridline-md-vr">
    <div class="gridline-item col-md-6">
        <p>Row 1 - Column 1</p>
    </div>
    <div class="gridline-item col-md-6">
        <p>Row 1 - Column 2</p>
    </div>
</div>
<div class="gridline gridline-hr gridline-md-vr">
    <div class="gridline-item col-md-6">
        <p>Row 2 - Column 1</p>
    </div>
    <div class="gridline-item col-md-6">
        <p>Row 2 - Column 2</p>
    </div>
</div>
<div class="gridline gridline-hr gridline-md-vr">
    <div class="gridline-item col-md-6">
        <p>Row 3 - Column 1</p>
    </div>
    <div class="gridline-item col-md-6">
        <p>Row 3 - Column 2</p>
    </div>
</div>

Triple Column

Rule: Vertical

Column 1

Column 2

Column 3

<strong>Rule: Vertical</strong>
<div class="gridline gridline-md-vr">
    <div class="gridline-item col-md-4">
        <p>Column 1</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Column 2</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Column 3</p>
    </div>
</div>
Rule: Horizontal

Row 1 - Column 1

Row 1 - Column 2

Row 1 - Column 3

Row 2 - Column 1

Row 2 - Column 2

Row 2 - Column 3

Row 3 - Column 1

Row 3 - Column 2

Row 3 - Column 3

<strong>Rule: Horizontal</strong>
<div class="gridline gridline-hr">
    <div class="gridline-item col-md-4">
        <p>Row 1 - Column 1</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 1 - Column 2</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 1 - Column 3</p>
    </div>
</div>
<div class="gridline gridline-hr">
    <div class="gridline-item col-md-4">
        <p>Row 2 - Column 1</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 2 - Column 2</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 2 - Column 3</p>
    </div>
</div>
<div class="gridline gridline-hr">
    <div class="gridline-item col-md-4">
        <p>Row 3 - Column 1</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 3 - Column 2</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 3 - Column 3</p>
    </div>
</div>
Rule: Both

Row 1 - Column 1

Row 1 - Column 2

Row 1 - Column 3

Row 2 - Column 1

Row 2 - Column 2

Row 2 - Column 3

Row 3 - Column 1

Row 3 - Column 2

Row 3 - Column 3

<strong>Rule: Both</strong>
<div class="gridline gridline-hr gridline-md-vr">
    <div class="gridline-item col-md-4">
        <p>Row 1 - Column 1</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 1 - Column 2</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 1 - Column 3</p>
    </div>
</div>
<div class="gridline gridline-hr gridline-md-vr">
    <div class="gridline-item col-md-4">
        <p>Row 2 - Column 1</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 2 - Column 2</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 2 - Column 3</p>
    </div>
</div>
<div class="gridline gridline-hr gridline-md-vr">
    <div class="gridline-item col-md-4">
        <p>Row 3 - Column 1</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 3 - Column 2</p>
    </div>
    <div class="gridline-item col-md-4">
        <p>Row 3 - Column 3</p>
    </div>
</div>

Bordered

Row 1 - Column 1

Row 1 - Column 2

Row 1 - Column 3

Row 2 - Column 1

Row 2 - Column 2

Row 2 - Column 3

Row 3 - Column 1

Row 3 - Column 2

Row 3 - Column 3

<div class="gridline-bordered">
    <div class="gridline gridline-hr gridline-md-vr">
        <div class="gridline-item col-md-4">
            <p>Row 1 - Column 1</p>
        </div>
        <div class="gridline-item col-md-4">
            <p>Row 1 - Column 2</p>
        </div>
        <div class="gridline-item col-md-4">
            <p>Row 1 - Column 3</p>
        </div>
    </div>
    <div class="gridline gridline-md-hr gridline-md-vr">
        <div class="gridline-item col-md-4">
            <p>Row 2 - Column 1</p>
        </div>
        <div class="gridline-item col-md-4">
            <p>Row 2 - Column 2</p>
        </div>
        <div class="gridline-item col-md-4">
            <p>Row 2 - Column 3</p>
        </div>
    </div>
    <div class="gridline gridline-lg-hr gridline-md-vr">
        <div class="gridline-item col-md-4">
            <p>Row 3 - Column 1</p>
        </div>
        <div class="gridline-item col-md-4">
            <p>Row 3 - Column 2</p>
        </div>
        <div class="gridline-item col-md-4">
            <p>Row 3 - Column 3</p>
        </div>
    </div>
</div>