Grid
Grid
The grid utility lets you arrange elements in a 2-dimensional grid that will respond to the available space given a minimum size.
(Not to be confused with a 12-column grid like you might have seen in frameworks like Bootstrap. See Donnie D’Amato’s Gridless Design for why we don’t use a 12-column grid.)
The custom property --grid-col-min will be the smallest width a grid item can be before the grid moves an item to the next row and stretches each item equally to fill the remaining space.
| Custom Property | Default Value | Description |
|---|---|---|
--grid-col-min |
200px | The minimum width of grid items |
--gap |
8px | Space between grid items (gap) |
--align-items |
center | Horizontal alignment of grid items |
Example
A grid of items with a minimum width of 150px.
Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
HTML
<div class="pv-grid" style="--grid-col-min: 150px">
<div class="pv-surface pv-bordered pv-inset-square">
<p>Card 1</p>
</div>
<div class="pv-surface pv-bordered pv-inset-square">
<p>Card 2</p>
</div>
<div class="pv-surface pv-bordered pv-inset-square">
<p>Card 3</p>
</div>
<div class="pv-surface pv-bordered pv-inset-square">
<p>Card 4</p>
</div>
<div class="pv-surface pv-bordered pv-inset-square">
<p>Card 5</p>
</div>
<div class="pv-surface pv-bordered pv-inset-square">
<p>Card 6</p>
</div>
</div>