- ☀️Light
- 🌙Dark
- 💻System
📐 What is grid used for?
The grid system provides a flexible way to create layouts using
the .grid container and
.g-col* classes.
It is based on 12 virtual columns and uses a built-in gap between items, controlled by
--gap-grid.
Each .g-col-* class defines how much horizontal
space an item takes inside .grid. On small screens,
grid items stack vertically by default, and then align side by side as the viewport gets larger.
💠 Examples
The grid uses a 12-column system, just like the column layout. Each fixed grid column class
(.g-col-1 to
.g-col-12)
represents a fraction of the available width, minus the configured gap. Responsive variants such as
.g-col-6-md or
.g-col-4-xs
become active at their corresponding breakpoints.
.g-col-12 .g-col-6-md
.g-col-12 .g-col-6-md
.g-col-12 .g-col-4-md
.g-col-12 .g-col-4-md
.g-col-12 .g-col-4-md
.g-col-12 .g-col-3-md
.g-col-12 .g-col-6-md
.g-col-12 .g-col-3-md
.g-col
.g-col
.g-col
💻 HTML Code
Grid item 1
Grid item 2
Grid A
Grid B
Grid C
Sidebar
Content
Sidebar
Fluid 1
Fluid 2
Fluid 3
📏 Grid Sizes & Breakpoints
The grid is based on 12 columns. You can use:
.g-col for fluid columns that share the available space,
.g-col-{number} for fixed spans of the 12-column grid,
and
.g-col-{number}-{breakpoint}
to change the column width from a specific breakpoint.
By default, any element inside
.grid
with a class starting with
g-col
is full-width on very small screens, then behaves as a grid column when its size classes become
active.
.g-col
Fluid grid column that automatically shares the available space with other
.g-col siblings in the same
.grid.
.g-col-{number}
Fixed grid column width based on the 12-column system
(for example:
.g-col-6 = 6/12 = 50%,
.g-col-4 = 4/12 ≈ 33.3%,
with gap subtracted automatically).
.g-col-{number}-{breakpoint}
Responsive grid column that applies its width only from the given breakpoint
(for example:
.g-col-6-md =
full-width on small screens, 6/12 from the md breakpoint).
⚙️ Variables CSS
| Variable | Description |
|---|---|
--g-col-padding |
Grid column padding used inside grid layouts. |
--gap-grid |
Gap between elements in the grid. |