Grid
Grids are used to build fluid layouts. These come in handy when you want to represent data in the form of rows & columns.
Two column grid layout
item 1
item 2
<div class="grid-container">
<div class="d-grid col-eq-2 grid-gap">
<div class="grid-item">item 1</div>
<div class="grid-item">item 2</div>
</div>
</div>
Three column grid layout
item 1
item 2
item 3
<div class="grid-container">
<div class="d-grid col-eq-3 grid-gap">
<div class="grid-item">item 1</div>
<div class="grid-item">item 2</div>
<div class="grid-item">item 3</div>
</div>
</div>
Two column grid layout - one column wider
item 1
item 2
<div class="grid-container">
<div class="d-grid col-1-2 grid-gap">
<div class="grid-item">item 1</div>
<div class="grid-item">item 2</div>
</div>
</div>
Autofit grid layout
This style fits as many columns as possible in the given space.
item 1
item 2
item 3
item 4
item 5
item 6
<div class="grid-container">
<div class="d-grid col-eq-auto grid-gap">
<div class="grid-item">item 1</div>
<div class="grid-item">item 2</div>
<div class="grid-item">item 3</div>
<div class="grid-item">item 4</div>
<div class="grid-item">item 5</div>
<div class="grid-item">item 6</div>
</div>
</div>