Grid Lines

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

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>