Creates negative horizontal margins when combined with the widths utility classes to build grids.
npm install @citizensadvice/guttersCreates negative horizontal margins when combined with the widths utility classes to build grids.
- Classes
- Examples
- Installation
| Class name | Value |
| ---------- | ----------------------------- |
| .gutter | \$spacing-2 (0.5rem) or (8px) |
``css`
.gutter {
margin-left: -8px;
margin-right: -8px;
}
To apply specific classes at set screen widths, use the following classes:
| Class name | Description |
| --------------------- | ------------------------------------------- |
| [aboveClassName]-ns | Screens with a min-width of 48rem |[aboveClassName]-m
| | Screens with widths from 48rem to 64rem |[aboveClassName]-l
| | Screens with a min-width of 64rem |
`html`...
`shell`
$ npm install @citizensadvice/gutters
now import into your stylesheet...
`scss`
@import '@citizensadvice/gutters/index.scss';
You can also make use of the unpkg service, try adding the link below to the head of your HTML file
`html``