Grid System

12-column flexbox grid with mobile-first stacking. Columns stack below 576px, activate grid above.

Basic Columns

Use .col-* classes to specify column widths (1-12)

.row > .col-4 + .col-4 + .col-4 (3 equal columns)

Basic Columns

.col-4

<div class="row demo-row"><div class="col-4">
        <div class="demo-col-grid">.col-4</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid">.col-4</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid">.col-4</div>
    </div>
</div>

.row > .col-6 + .col-6 (2 equal columns)

Basic Columns

.col-6

<div class="row demo-row"><div class="col-6">
        <div class="demo-col-grid">.col-6</div>
    </div>
    <div class="col-6">
        <div class="demo-col-grid">.col-6</div>
    </div>
</div>

.row > .col-3 + .col-9 (sidebar + content)

Basic Columns

.col-3

.col-9

<div class="row demo-row"><div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-9">
        <div class="demo-col-grid">.col-9</div>
    </div>
</div>

.row > .col-2 + .col-8 + .col-2

Basic Columns

.col-2

.col-8

.col-2

<div class="row demo-row"><div class="col-2">
        <div class="demo-col-grid">.col-2</div>
    </div>
    <div class="col-8">
        <div class="demo-col-grid">.col-8</div>
    </div>
    <div class="col-2">
        <div class="demo-col-grid">.col-2</div>
    </div>
</div>

Equal Width

Use .col for auto-sizing equal-width columns

.row > .col + .col + .col (3 equal, auto-sized)

Equal Width

.col

<div class="row demo-row"><div class="col">
        <div class="demo-col-grid">.col</div>
    </div>
    <div class="col">
        <div class="demo-col-grid">.col</div>
    </div>
    <div class="col">
        <div class="demo-col-grid">.col</div>
    </div>
</div>

.row > .col + .col + .col + .col + .col (5 equal)

Equal Width

.col

<div class="row demo-row"><div class="col">
        <div class="demo-col-grid">.col</div>
    </div>
    <div class="col">
        <div class="demo-col-grid">.col</div>
    </div>
    <div class="col">
        <div class="demo-col-grid">.col</div>
    </div>
    <div class="col">
        <div class="demo-col-grid">.col</div>
    </div>
    <div class="col">
        <div class="demo-col-grid">.col</div>
    </div>
</div>

Auto Width

Use .col-auto for content-based width

.row > .col-auto + .col + .col-auto

Auto Width

Auto (short)

.col (fills remaining)

Auto (longer content here)

<div class="row demo-row"><div class="col-auto">
        <div class="demo-col-grid">Auto (short)</div>
    </div>
    <div class="col">
        <div class="demo-col-grid">.col (fills remaining)</div>
    </div>
    <div class="col-auto">
        <div class="demo-col-grid">Auto (longer content here)</div>
    </div>
</div>

Offsets

Use .offset-* to push columns to the right

.row > .col-4.offset-4 (centred column)

Offsets

.col-4.offset-4

<div class="row demo-row"><div class="col-4 offset-4">
        <div class="demo-col-grid">.col-4.offset-4</div>
    </div>
</div>

.row > .col-3.offset-3 + .col-3.offset-3

Offsets

.col-3.offset-3

<div class="row demo-row"><div class="col-3 offset-3">
        <div class="demo-col-grid">.col-3.offset-3</div>
    </div>
    <div class="col-3 offset-3">
        <div class="demo-col-grid">.col-3.offset-3</div>
    </div>
</div>

.row > .col-6.offset-6 (right-aligned)

Offsets

.col-6.offset-6

<div class="row demo-row"><div class="col-6 offset-6">
        <div class="demo-col-grid">.col-6.offset-6</div>
    </div>
</div>

Horizontal Alignment

Use .row.justify-* to align columns horizontally

.row.justify-start

Horizontal Alignment

.col-3

<div class="row justify-start demo-row grid-bg-gray-100 grid-padding-half grid-min-height-150"><div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
</div>

.row.justify-center

Horizontal Alignment

.col-3

<div class="row justify-center demo-row grid-bg-gray-100 grid-padding-half grid-min-height-150"><div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
</div>

.row.justify-end

Horizontal Alignment

.col-3

<div class="row justify-end demo-row grid-bg-gray-100 grid-padding-half grid-min-height-150"><div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
</div>

.row.justify-between

Horizontal Alignment

.col-3

<div class="row justify-between demo-row grid-bg-gray-100 grid-padding-half grid-min-height-150"><div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
</div>

.row.justify-around

Horizontal Alignment

.col-3

<div class="row justify-around demo-row grid-bg-gray-100 grid-padding-half grid-min-height-150"><div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
</div>

.row.justify-evenly

Horizontal Alignment

.col-3

<div class="row justify-evenly demo-row grid-bg-gray-100 grid-padding-half grid-min-height-150"><div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
</div>

Vertical Alignment

Use .row.align-* to align columns vertically

.row.align-start

Vertical Alignment

Short

Tall

Normal

<div class="row align-start demo-row grid-bg-gray-100 grid-padding-half grid-min-height-150"><div class="col-4">
        <div class="demo-col-grid demo-col-short-grid">Short</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid demo-col-tall-grid">Tall</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid">Normal</div>
    </div>
</div>

.row.align-center

Vertical Alignment

Short

Tall

Normal

<div class="row align-center demo-row grid-bg-gray-100 grid-padding-half grid-min-height-150"><div class="col-4">
        <div class="demo-col-grid demo-col-short-grid">Short</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid demo-col-tall-grid">Tall</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid">Normal</div>
    </div>
</div>

.row.align-end

Vertical Alignment

Short

Tall

Normal

<div class="row align-end demo-row grid-bg-gray-100 grid-padding-half grid-min-height-150"><div class="col-4">
        <div class="demo-col-grid demo-col-short-grid">Short</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid demo-col-tall-grid">Tall</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid">Normal</div>
    </div>
</div>

.row.align-stretch (default)

Vertical Alignment

Stretches

<div class="row align-stretch demo-row grid-bg-gray-100 grid-padding-half grid-min-height-150"><div class="col-4">
        <div class="demo-col-grid grid-height-100">Stretches</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid grid-height-100">Stretches</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid grid-height-100">Stretches</div>
    </div>
</div>

Column Order

Use .order-* to reorder columns visually

Natural order: 1, 2, 3

Column Order

1st in HTML

2nd in HTML

3rd in HTML

<div class="row demo-row"><div class="col-4">
        <div class="demo-col-grid">1st in HTML</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid demo-col-alt">2nd in HTML</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid demo-col-warning">3rd in HTML</div>
    </div>
</div>

.order-last on 1st, .order-first on 3rd

Column Order

1st (order-last)

2nd (no order)

3rd (order-first)

<div class="row demo-row"><div class="col-4 order-last">
        <div class="demo-col-grid">1st (order-last)</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid demo-col-alt">2nd (no order)</div>
    </div>
    <div class="col-4 order-first">
        <div class="demo-col-grid demo-col-warning">3rd (order-first)</div>
    </div>
</div>

.order-3, .order-1, .order-2

Column Order

1st (order-3)

2nd (order-1)

3rd (order-2)

<div class="row demo-row"><div class="col-4 order-3">
        <div class="demo-col-grid">1st (order-3)</div>
    </div>
    <div class="col-4 order-1">
        <div class="demo-col-grid demo-col-alt">2nd (order-1)</div>
    </div>
    <div class="col-4 order-2">
        <div class="demo-col-grid demo-col-warning">3rd (order-2)</div>
    </div>
</div>

No Gutters

Use .row.no-gutters to remove column padding

.row (with gutters - default)

No Gutters

.col-4

<div class="row demo-row"><div class="col-4">
        <div class="demo-col-grid">.col-4</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid">.col-4</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid">.col-4</div>
    </div>
</div>

.row.no-gutters

No Gutters

.col-4

<div class="row no-gutters demo-row"><div class="col-4">
        <div class="demo-col-grid grid-border-radius-0">.col-4</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid grid-border-radius-0">.col-4</div>
    </div>
    <div class="col-4">
        <div class="demo-col-grid grid-border-radius-0">.col-4</div>
    </div>
</div>

Gap Utilities

Use .row.gap-* for consistent spacing (uses CSS gap)

.row.gap-0

Gap Utilities

.col-3

<div class="row no-gutters gap-0 demo-row"><div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
</div>

.row.gap-2

Gap Utilities

.col-3

<div class="row no-gutters gap-2 demo-row"><div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
</div>

.row.gap-4

Gap Utilities

.col-3

<div class="row no-gutters gap-4 demo-row"><div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
    <div class="col-3">
        <div class="demo-col-grid">.col-3</div>
    </div>
</div>

Nested Grids

Place rows inside columns for complex layouts

Nested: .col-8 contains another .row

Nested Grids

.col-4

.col-8 with nested row:

.col-6

<div class="row demo-row"><div class="col-4">
        <div class="demo-col-grid demo-col-alt">.col-4</div>
    </div>
    <div class="col-8">
        <div class="demo-col-grid grid-padding-half">
            <div>.col-8 with nested row:</div>
            <div class="row mt-2">
                <div class="col-6">
                    <div class="demo-col-grid demo-col-warning">.col-6</div>
                </div>
                <div class="col-6">
                    <div class="demo-col-grid demo-col-warning">.col-6</div>
                </div>
            </div>
        </div>
    </div>
</div>

Containers

Centred containers with max-width constraints

.container (max-width: 1200px)

.container

.container.container-xl (max-width: 1280px)

.container-xl

.container.container-lg (max-width: 1024px)

.container-lg

.container.container-md (max-width: 768px)

.container-md

.container.container-sm (max-width: 640px)

.container-sm

CSS Grid

Tailwind-style CSS Grid with .grid, .grid-cols-*, .col-span-*

.grid.grid-cols-3.gap-4

CSS Grid

<div class="grid grid-cols-3 gap-4 demo-row"><div class="grid-demo-item-style">1</div>
    <div class="grid-demo-item-style">2</div>
    <div class="grid-demo-item-style">3</div>
    <div class="grid-demo-item-style">4</div>
    <div class="grid-demo-item-style">5</div>
    <div class="grid-demo-item-style">6</div>
</div>

.grid.grid-cols-4 with .col-span-2

CSS Grid

2 (col-span-2)

4 (col-span-3)

<div class="grid grid-cols-4 gap-4 demo-row"><div class="grid-demo-item-style">1</div>
    <div class="grid-demo-item-style col-span-2">2 (col-span-2)</div>
    <div class="grid-demo-item-style">3</div>
    <div class="grid-demo-item-style col-span-3">4 (col-span-3)</div>
    <div class="grid-demo-item-style">5</div>
</div>

.grid.grid-cols-12 with various spans

CSS Grid

<div class="grid grid-cols-12 gap-2 demo-row"><div class="grid-demo-item-style col-span-3">3</div>
    <div class="grid-demo-item-style col-span-6">6</div>
    <div class="grid-demo-item-style col-span-3">3</div>
    <div class="grid-demo-item-style col-span-4">4</div>
    <div class="grid-demo-item-style col-span-4">4</div>
    <div class="grid-demo-item-style col-span-4">4</div>
</div>

Responsive Behaviour

Columns stack below 576px viewport width (mobile-first)

Responsive Behaviour

How it works:

< 576px: All .col-* columns stack vertically (width: 100%)
≥ 576px: Columns display at their specified widths

Try it: Resize your browser window to see the columns below stack on mobile.

.col-4

<div class="card"><div class="card-body">
        <p><strong>How it works:</strong></p>
        <ul>
            <li><code>&lt; 576px</code>: All <code>.col-*</code> columns stack vertically (width: 100%)</li>
            <li><code>≥ 576px</code>: Columns display at their specified widths</li>
        </ul>
        <p class="mt-4"><strong>Try it:</strong> Resize your browser window to see the columns below stack on
            mobile.</p>

        <div class="row mt-4">
            <div class="col-4">
                <div class="demo-col-grid">.col-4</div>
            </div>
            <div class="col-4">
                <div class="demo-col-grid demo-col-alt">.col-4</div>
            </div>
            <div class="col-4">
                <div class="demo-col-grid demo-col-warning">.col-4</div>
            </div>
        </div>
    </div>
</div>