# Grid

> A 12-column CSS grid + container utilities, plus a media-query mixin you can use in your own SCSS.

Source: https://ngwr.dev/guides/grid  
Kind: Core, Opt-in

## Opt in

Utilities are not part of the umbrella entry. Pull grid into your global stylesheet.

```scss
// 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.

```angular-html
<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%.

```angular-html
<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.

```scss
: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).

```scss
@use 'ngwr/breakpoints' as bp;

.card {
  padding: 1rem;

  @include bp.media-up(md) {
    padding: 2rem;
  }

  @include bp.media-down(lg) {
    border-radius: 0;
  }
}
```