Grid
Align content in a grid. Default is a responsive autofil-grid, aka RAM grid, but can be used with modifers create 2- or 3-column layouts.
Link to section titled: Component
Component
Grid
- html<!-- COMPONENT-START: nc-grid -->
<div class="nc-grid">
<div class="example-block"></div>
<div class="example-block"></div>
<div class="example-block"></div>
<div class="example-block"></div>
</div>
<!-- COMPONENT-END: nc-grid --> Link to section titled: Modifiers
Modifiers
- data-layout=50-50
- Create a responsive 2 column grid.
- data-layout=thirds
- Create a responsive 3 column grid.
- -tiny
- Sets gap to --spacing-tiny
- -nearest
- Sets gap to --spacing-nearest
- -near
- Sets gap to --spacing-near
- -base
- Sets gap to --spacing-base
- -far
- Sets gap to --spacing-far
- -farthest
- Sets gap to --spacing-farthest
- -nogap
- Sets gap to 0
Link to section titled: CSS Variables
CSS Variables
- --grid-placement
- Set the repeat placement property of the grid. Defaults to
auto-fill. - --grid-min-item-size
- Set the minimum size for the grid items. Defaults to
16rem. - --grid-gap
- Set a custom gap between the children