Grid

Pier Design System's grid is an extention of Bootstrap's Grid System. Use these helper classes for advanced and responsive page and component layouts.

Auto-Layout Columns

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (shorter)

3 of 3

1 of 3

Variable width content

3 of 3

1 of 3

Variable width content

3 of 3

broken row

with -w-100

broken row

with -w-100

HTML markup

<div class="pier-container -m-b-6">
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">1 of 2</div>
        <div class="pier-column -p-a-2 -bd-1-gray">2 of 2</div>
    </div>
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">1 of 3</div>
        <div class="pier-column -p-a-2 -bd-1-gray">2 of 3</div>
        <div class="pier-column -p-a-2 -bd-1-gray">3 of 3</div>
    </div>
</div>
<div class="pier-container -m-b-6">
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">1 of 3</div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--6">
            2 of 3 (wider)
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray">3 of 3</div>
    </div>
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">1 of 3</div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--3">
            2 of 3 (shorter)
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray">3 of 3</div>
    </div>
</div>
<div class="pier-container -m-b-6">
    <div class="pier-row -justify-content-center">
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--lg-2">
            1 of 3
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--md-auto">
            Variable width content
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--lg-2">
            3 of 3
        </div>
    </div>
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">1 of 3</div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--md-auto">
            Variable width content
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--lg-2">
            3 of 3
        </div>
    </div>
</div>
<div class="pier-container">
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">broken row</div>
        <div class="pier-column -p-a-2 -bd-1-gray">with -w-100</div>
        <div class="-w-100"></div>
        <div class="pier-column -p-a-2 -bd-1-gray">broken row</div>
        <div class="pier-column -p-a-2 -bd-1-gray">with -w-100</div>
    </div>
</div>

<div class="pier-container -m-b-6">
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">1 of 2</div>
        <div class="pier-column -p-a-2 -bd-1-gray">2 of 2</div>
    </div>
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">1 of 3</div>
        <div class="pier-column -p-a-2 -bd-1-gray">2 of 3</div>
        <div class="pier-column -p-a-2 -bd-1-gray">3 of 3</div>
    </div>
</div>
<div class="pier-container -m-b-6">
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">1 of 3</div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--6">
            2 of 3 (wider)
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray">3 of 3</div>
    </div>
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">1 of 3</div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--3">
            2 of 3 (shorter)
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray">3 of 3</div>
    </div>
</div>
<div class="pier-container -m-b-6">
    <div class="pier-row -justify-content-center">
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--lg-2">
            1 of 3
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--md-auto">
            Variable width content
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--lg-2">
            3 of 3
        </div>
    </div>
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">1 of 3</div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--md-auto">
            Variable width content
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--lg-2">
            3 of 3
        </div>
    </div>
</div>
<div class="pier-container">
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray">broken row</div>
        <div class="pier-column -p-a-2 -bd-1-gray">with -w-100</div>
        <div class="-w-100"></div>
        <div class="pier-column -p-a-2 -bd-1-gray">broken row</div>
        <div class="pier-column -p-a-2 -bd-1-gray">with -w-100</div>
    </div>
</div>

Responsive Classes

--md-8

--md-4

--12 & --md-6

HTML markup

<div class="pier-container">
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--md-8">
            --md-8
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--md-4">
            --md-4
        </div>
    </div>
    <div class="pier-row">
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--12 pier-column--md-6
            "
        >
            --12 & --md-6
        </div>
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--12 pier-column--md-6
            "
        >
            --12 & --md-6
        </div>
    </div>
</div>

<div class="pier-container">
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--md-8">
            --md-8
        </div>
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--md-4">
            --md-4
        </div>
    </div>
    <div class="pier-row">
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--12 pier-column--md-6
            "
        >
            --12 & --md-6
        </div>
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--12 pier-column--md-6
            "
        >
            --12 & --md-6
        </div>
    </div>
</div>

Offset

--3

--4 & --offset-3

--1 & --offset-2

--3 & --offset-1

--12, --md-4, & --offset-md-1

--12, --md-3, & --offset-md-2

HTML markup

<div class="pier-container">
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--3">--3</div>
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--4 pier-column--offset-4
            "
        >
            --4 & --offset-3
        </div>
    </div>
    <div class="pier-row">
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--3 pier-column--offset-2
            "
        >
            --1 & --offset-2
        </div>
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--6 pier-column--offset-1
            "
        >
            --3 & --offset-1
        </div>
    </div>
    <div class="pier-row">
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--12 pier-column--md-4 pier-column--offset-md-1
            "
        >
            --12, --md-4, & --offset-md-1
        </div>
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--12 pier-column--md-5 pier-column--offset-md-2
            "
        >
            --12, --md-3, & --offset-md-2
        </div>
    </div>
</div>

<div class="pier-container">
    <div class="pier-row">
        <div class="pier-column -p-a-2 -bd-1-gray pier-column--3">--3</div>
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--4 pier-column--offset-4
            "
        >
            --4 & --offset-3
        </div>
    </div>
    <div class="pier-row">
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--3 pier-column--offset-2
            "
        >
            --1 & --offset-2
        </div>
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--6 pier-column--offset-1
            "
        >
            --3 & --offset-1
        </div>
    </div>
    <div class="pier-row">
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--12 pier-column--md-4 pier-column--offset-md-1
            "
        >
            --12, --md-4, & --offset-md-1
        </div>
        <div
            class="
                pier-column
                -p-a-2
                -bd-1-gray
                pier-column--12 pier-column--md-5 pier-column--offset-md-2
            "
        >
            --12, --md-3, & --offset-md-2
        </div>
    </div>
</div>

Abstracts Components Utilities Attributions