StableLayout · since 0.1.0
Two-dimensional grid with a fixed gap. Column modifiers collapse to one column below 768px.
Pick this part
Pick l-grid for
- Card collections of unknown length:
l-grid--responsivefits as many columns as there is room for. - Dashboards with a fixed number of equal columns:
l-grid--2-col, --3-col or --4-col.
Pick another part for
- A main area with a narrower side column: use
l-sidebar. - A row of equal items that should all stack at once: use
l-switcher.
Build it
- Start with an element and add
class="l-grid". - Pick at most one columns modifier:
--2-col,--3-col,--4-col,--responsive. - Put the parts inside. The layout sets the space between them, so they need no margins.
Step 1
Step 2
Step 3
Show markup 5 lines
<div class="l-grid l-grid--3-col">
<section class="c-card"><p class="u-margin-0">Step 1</p></section>
<section class="c-card"><p class="u-margin-0">Step 2</p></section>
<section class="c-card"><p class="u-margin-0">Step 3</p></section>
</div>Check your build
Each piece that doesn't fit was run through mcss-lite validate when this page was built. The output below is real.
Fits
Keep the source order the same as the visual order.
Step 1
Step 2
Step 3
Show markup 5 lines
<div class="l-grid l-grid--3-col">
<section class="c-card"><p class="u-margin-0">Step 1</p></section>
<section class="c-card"><p class="u-margin-0">Step 2</p></section>
<section class="c-card"><p class="u-margin-0">Step 3</p></section>
</div>validate: 0 issues
Doesn't fit
Don't combine column modifiers.
<div class="l-grid l-grid--2-col l-grid--responsive">
<section class="c-card"><p class="u-margin-0">Step 1</p></section>
</div>validate
- error "l-grid--2-col" and "l-grid--responsive" are both columns modifiers; use only one.
[exclusive-modifiers]
Spec sheet
| Class | Group | What it does |
|---|---|---|
l-grid--2-col | columns (pick one) | Two equal columns. |
l-grid--3-col | columns (pick one) | Three equal columns. |
l-grid--4-col | columns (pick one) | Four equal columns. |
l-grid--responsive | columns (pick one) | As many 280px-minimum columns as fit; no breakpoint needed. |
Wording
- If you reorder items visually with CSS, keyboard and screen reader users still get the source order, so change the markup instead.