@use 'ngwr/grid';Grid
Lay out a page with a 12-column grid, containers and breakpoint mixins.
Opt in
Grid is its own entry point. Add it to your global stylesheet.
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
Give each cell col-<span>, or col-<breakpoint>-<span> to apply from that breakpoint up.
.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
Caps the content width at each breakpoint.
<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
One custom property sets the gap between cells and the container padding.
:root {
--wr-grid-gutter: 1.5rem; /* default: 1rem */
}Media-query mixin
The same breakpoints in your own SCSS. This entry emits no CSS.
@use 'ngwr/breakpoints' as bp;
.card {
padding: 1rem;
@include bp.media-up(md) {
padding: 2rem;
}
@include bp.media-down(lg) {
border-radius: 0;
}
}