Grids.
The Grid system allows you to easily create responsive layouts. You can control the number of columns, the gutter (gap) between columns, and the alignment of the content. It's built on top of CSS Grid and Flexbox, providing a robust and flexible way to structure your web pages.
Class names
Start with grid, then add modifiers when needed.
| Class name | Description |
|---|---|
grids |
Main grids tag in div |
grid |
Grid item in div |
grids-3 |
Grid with 3 columns |
grids-4 |
Grid with 4 columns |
grids-5 |
Grid with 5 columns |
Grids
The responsive grid layout.
content 1
content 2
Code
<div class="grids">
<div class="grid">content 1</div>
<div class="grid">content 2</div>
</div>Grid with 3 columns
Grid with 3 columns.
content 1
content 2
content 3
Code
<div class="grids-3">
<div class="grid">content 1</div>
<div class="grid">content 2</div>
<div class="grid">content 3</div>
</div>Grid with 4 columns
Grid with 4 columns.
content 1
content 2
content 3
content 4
Code
<div class="grids-4">
<div class="grid">content 1</div>
<div class="grid">content 2</div>
<div class="grid">content 3</div>
<div class="grid">content 4</div>
</div>