Grid System - Launchpad

Breakpoints

Name	Min-width	Container max-width
`sm`	576px	540px
`md`	768px	720px
`lg`	992px	960px
`xl`	1200px	1140px
`2xl`	1400px	1320px

@include breakpoint-up('md') { ... }

<div class="lp-d-md-flex">Flex from md up</div>
<div class="lp-col-lg-6">Half width from lg up</div>

Containers

.lp-container — responsive max-width at each breakpoint

.lp-container

.lp-container--fluid — always 100% wide

.lp-container--fluid

.lp-container-md — 100% until md, then constrained

.lp-container-md

<p class="lp-text-xs lp-text-muted lp-mb-1"><code class="lp-text-danger">.lp-container</code> — responsive max-width at each breakpoint</p>
<div class="lp-demo-frame lp-mb-3"><div class="lp-container lp-bg-primary-subtle lp-p-3 lp-text-center">.lp-container</div></div>
<p class="lp-text-xs lp-text-muted lp-mb-1"><code class="lp-text-danger">.lp-container--fluid</code> — always 100% wide</p>
<div class="lp-demo-frame lp-mb-3"><div class="lp-container--fluid lp-bg-success-subtle lp-p-3 lp-text-center">.lp-container--fluid</div></div>
<p class="lp-text-xs lp-text-muted lp-mb-1"><code class="lp-text-danger">.lp-container-md</code> — 100% until <strong>md</strong>, then constrained</p>
<div class="lp-demo-frame"><div class="lp-container-md lp-bg-info-subtle lp-p-3 lp-text-center">.lp-container-md</div></div>

12-Column Grid

Equal thirds

col-4

Mixed widths

col-3

col-6

col-3

Auto + fixed

col-auto

col (fills)

col-2

<p class="lp-text-xs lp-text-muted lp-mb-1">Equal thirds</p>
<div class="lp-row lp-mb-3">
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">Mixed widths</p>
<div class="lp-row lp-mb-3">
    <div class="lp-col-3"><div class="lp-demo-box lp-p-3">col-3</div></div>
    <div class="lp-col-6"><div class="lp-demo-box lp-p-3">col-6</div></div>
    <div class="lp-col-3"><div class="lp-demo-box lp-p-3">col-3</div></div>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">Auto + fixed</p>
<div class="lp-row">
    <div class="lp-col-auto"><div class="lp-demo-box lp-p-3">col-auto</div></div>
    <div class="lp-col"><div class="lp-demo-box lp-p-3">col (fills)</div></div>
    <div class="lp-col-2"><div class="lp-demo-box lp-p-3">col-2</div></div>
</div>

Responsive Columns

Stacks full-width below md, then splits into 2 columns at md, then 3 columns at lg. Resize the viewport to see the change.

col-12 · col-md-6 · col-lg-4

col-12 · col-md-12 · col-lg-4

<p class="lp-text-xs lp-text-muted lp-mb-3">Stacks full-width below <strong>md</strong>, then splits into 2 columns at md, then 3 columns at lg. Resize the viewport to see the change.</p>
<div class="lp-row">
    <div class="lp-col-12 lp-col-md-6 lp-col-lg-4"><div class="lp-demo-box lp-p-3">col-12 · col-md-6 · col-lg-4</div></div>
    <div class="lp-col-12 lp-col-md-6 lp-col-lg-4"><div class="lp-demo-box lp-p-3">col-12 · col-md-6 · col-lg-4</div></div>
    <div class="lp-col-12 lp-col-md-12 lp-col-lg-4"><div class="lp-demo-box lp-p-3">col-12 · col-md-12 · col-lg-4</div></div>
</div>

Row Columns

row-cols-3 — children auto-fill 3 per row

1

2

3

4

5

6

row-cols-1 · row-cols-md-2 · row-cols-lg-4

A

B

C

D

<p class="lp-text-xs lp-text-muted lp-mb-1">row-cols-3 — children auto-fill 3 per row</p>
<div class="lp-row lp-row-cols-3 lp-mb-3">
    <div><div class="lp-demo-box lp-p-3">1</div></div>
    <div><div class="lp-demo-box lp-p-3">2</div></div>
    <div><div class="lp-demo-box lp-p-3">3</div></div>
    <div><div class="lp-demo-box lp-p-3">4</div></div>
    <div><div class="lp-demo-box lp-p-3">5</div></div>
    <div><div class="lp-demo-box lp-p-3">6</div></div>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">row-cols-1 · row-cols-md-2 · row-cols-lg-4</p>
<div class="lp-row lp-row-cols-1 lp-row-cols-md-2 lp-row-cols-lg-4">
    <div><div class="lp-demo-box lp-p-3">A</div></div>
    <div><div class="lp-demo-box lp-p-3">B</div></div>
    <div><div class="lp-demo-box lp-p-3">C</div></div>
    <div><div class="lp-demo-box lp-p-3">D</div></div>
</div>

Column Offsets

offset-4 pushes the column 4/12 to the right

col-4 · offset-4

Centered 6-column using offset-3

col-6 · offset-3 (centered)

<p class="lp-text-xs lp-text-muted lp-mb-1">offset-4 pushes the column 4/12 to the right</p>
<div class="lp-row lp-mb-3">
    <div class="lp-col-4 lp-offset-4"><div class="lp-demo-box lp-p-3">col-4 · offset-4</div></div>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">Centered 6-column using offset-3</p>
<div class="lp-row">
    <div class="lp-col-6 lp-offset-3"><div class="lp-demo-box lp-p-3">col-6 · offset-3 (centered)</div></div>
</div>

Column Order

Source order is 1 → 2 → 3 but order-first / order-last moves items visually.

1 (source)

2 (order-first)

3 (order-last)

<p class="lp-text-xs lp-text-muted lp-mb-3">Source order is 1 → 2 → 3 but <code class="lp-text-danger">order-first</code> / <code class="lp-text-danger">order-last</code> moves items visually.</p>
<div class="lp-row">
    <div class="lp-col"><div class="lp-demo-box lp-p-3">1 (source)</div></div>
    <div class="lp-col lp-order-first"><div class="lp-demo-box lp-p-3">2 (order-first)</div></div>
    <div class="lp-col lp-order-last"><div class="lp-demo-box lp-p-3">3 (order-last)</div></div>
</div>

Gutters

g-0 — no gutters

col-4

g-3 (12px)

col-4

g-5 (24px) — largest

col-4

<p class="lp-text-xs lp-text-muted lp-mb-1">g-0 — no gutters</p>
<div class="lp-row lp-g-0 lp-mb-3">
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">g-3 (12px)</p>
<div class="lp-row lp-g-3 lp-mb-3">
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">g-5 (24px) — largest</p>
<div class="lp-row lp-g-5">
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
    <div class="lp-col-4"><div class="lp-demo-box lp-p-3">col-4</div></div>
</div>

Row Alignment (flex utilities)

items-center on the row

col-3

justify-between

col-3

<p class="lp-text-xs lp-text-muted lp-mb-1">items-center on the row</p>
<div class="lp-row lp-items-center lp-demo-frame lp-mb-3" style="min-height:7rem">
    <div class="lp-col-3"><div class="lp-demo-box lp-p-2 lp-hf-12">col-3</div></div>
    <div class="lp-col-3"><div class="lp-demo-box lp-p-2 lp-hf-20">col-3</div></div>
    <div class="lp-col-3"><div class="lp-demo-box lp-p-2 lp-hf-8">col-3</div></div>
</div>
<p class="lp-text-xs lp-text-muted lp-mb-1">justify-between</p>
<div class="lp-row lp-justify-between lp-demo-frame">
    <div class="lp-col-3"><div class="lp-demo-box lp-p-3">col-3</div></div>
    <div class="lp-col-3"><div class="lp-demo-box lp-p-3">col-3</div></div>
</div>

Z-Index Scale

Class	Value	Usage
`.lp-z-dropdown`	1000	Dropdown menus
`.lp-z-sticky`	1020	Sticky headers
`.lp-z-fixed`	1030	Fixed top bars
`.lp-z-modal-backdrop`	1040	Modal backdrop
`.lp-z-modal`	1050	Modal dialog
`.lp-z-popover`	1060	Popovers
`.lp-z-tooltip`	1070	Tooltips
`.lp-z-toast`	1080	Toast notifications
`.lp-z-{0,10,20,30,40,50}`	0 — 50	Numeric scale
`.lp-z-n1`	-1	Behind parent
`.lp-z-auto`	auto	Reset

CSS Grid utilities

CSS Grid-specific utilities (.lp-grid-cols-*, .lp-col-span-*, .lp-row-start-*, .lp-auto-cols-*, .lp-aspect-*) live on the Grid & Aspect utilities page.

CSS Reference

Class	Description
`.lp-container`	Responsive container (max-width per breakpoint)
`.lp-container--fluid`	Always 100% wide
`.lp-container-{sm\|md\|lg\|xl\|2xl}`	Fluid until breakpoint, then constrained
`.lp-row`	Flex row with negative gutter
`.lp-col` / `.lp-col-auto`	Flex-fill / content-width columns
`.lp-col-{1..12}`	12-column widths
`.lp-col-{bp}-{1..12}`	Responsive columns (breakpoint-up)
`.lp-row-cols-{1..6}`	Auto-split children into N equal columns
`.lp-row-cols-{bp}-{1..6}`	Responsive row columns
`.lp-offset-{0..11}`	Column offset (margin-left)
`.lp-offset-{bp}-{0..11}`	Responsive offset
`.lp-order-{0..12}`	Visual order
`.lp-order-{first\|last}`	Move to start / end
`.lp-order-{bp}-*`	Responsive order
`.lp-g-{0..5}`	Gutter scale (both axes)
`.lp-gx-{0..5}` / `.lp-gy-{0..5}`	Axis-specific gutters
`.lp-g-{bp}-` / `.lp-gx-{bp}-` / `.lp-gy-{bp}-*`	Responsive gutters
`.lp-z-{dropdown\|sticky\|fixed\|modal-backdrop\|modal\|popover\|tooltip\|toast}`	Semantic z-index
`.lp-z-{0\|10\|20\|30\|40\|50\|n1\|auto}`	Numeric z-index