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 may have used in CSS frameworks like Bootstrap. See Donnie D’Amato’s Gridless Design for more reasons to scrap the 12-column grid.)
The custom property --grid-col-min represents 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 available space.
| Custom Property | Default Value | Description |
|---|---|---|
--grid-col-min |
200px | The minimum width of grid items |
--gap |
8px | Space between grid items |
--align-items |
center | Vertical 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="lwj-grid" style="--grid-col-min: 150px">
<div class="lwj-surface lwj-inset-square">
<p>Card 1</p>
</div>
<div class="lwj-surface lwj-inset-square">
<p>Card 2</p>
</div>
<div class="lwj-surface lwj-inset-square">
<p>Card 3</p>
</div>
<div class="lwj-surface lwj-inset-square">
<p>Card 4</p>
</div>
<div class="lwj-surface lwj-inset-square">
<p>Card 5</p>
</div>
<div class="lwj-surface lwj-inset-square">
<p>Card 6</p>
</div>
</div>