Opt in
Utilities are not part of the umbrella entry. Pull grid into your global stylesheet.
// Grid is opt-in — utilities don't come with the umbrella.
@use 'ngwr/grid';Breakpoints
| Name | Min width | Container max-width |
|---|---|---|
xs | 0 | — |
sm | 576px | 540px |
md | 768px | 720px |
lg | 992px | 960px |
xl | 1200px | 1140px |
xxl | 1400px | 1320px |
xga | 1600px | 1530px |
fhd | 1920px | 1830px |
rt | 2560px | 2470px |
12-column grid
Hover the rows below — each labelled span shows the 12-column slot it occupies.
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-2
.col-2
.col-2
.col-2
.col-2
.col-2
.col-3
.col-3
.col-3
.col-3
.col-4
.col-4
.col-4
.col-6
.col-6
.col-12
<div class="grid">
<div class="col-12 col-md-6 col-lg-4">A</div>
<div class="col-12 col-md-6 col-lg-4">B</div>
<div class="col-12 col-md-12 col-lg-4">C</div>
</div>Container
container-* caps width at the named breakpoint and up; below that it's fluid. container-fluid is always 100%.
<div class="container">…</div> <!-- full width below sm, then steps up -->
<div class="container-md">…</div> <!-- fluid below md, then steps up -->
<div class="container-fluid">…</div> <!-- always 100% width -->Gutter
The gap between grid cells (and container padding) is driven by a single CSS variable.
:root {
--wr-grid-gutter: 1.5rem; /* default: 1rem */
}Media-query mixin
You can use the same breakpoint mixins NGWR uses internally — pull them from the breakpoints sub-entry (no CSS emitted).
@use 'ngwr/breakpoints' as bp;
.card {
padding: 1rem;
@include bp.media-up(md) {
padding: 2rem;
}
@include bp.media-down(lg) {
border-radius: 0;
}
}