Grid
Modern browsers fully support CSS Grid layout. Compared to traditional grid systems, CSS Grid enables more complex layouts. Default 12-column system with dynamic adjustments via CSS Variables:
| Variable | Default | Description |
|---|---|---|
--ms-rows | 1 | Number of grid rows |
--ms-columns | 12 | Number of grid columns |
--ms-gap | 1.5rem | Gap size between columns |
Basic Usage
Create grid layout with .grid class. Child elements use .g-col-* for column spans. Items wrap automatically:
Responsive Grid
Adapt layouts across breakpoints:
Auto Columns
Elements without column classes auto-size:
This behavior can be mixed with grid column classes：
Grid Ordering
Adjust item order with .g-cs-* (column start):
Row Spanning
Control vertical spans with .g-row-*:
Alternatively, use g-rs-*, g-re-* to adjust the start and end rows of the grid item. * is the number 1~6:
Custom Grid
Use CSS Variables --ms-rows, --ms-columns to dynamically adjust the number of grid rows and columns:
Custom Gap
Use CSS Variables --ms-gap to dynamically adjust the spacing between columns:
Alternatively, if you only adjust the spacing for a specific layout, you can also directly use the built-in Spacing utilities:
Responsive Layout
Combining the .d-* utilities and responsive prefix, complex responsive layouts can be created:
Quick Reference
| Class | Styles |
|---|---|
.grid | display: grid |
.g-row-1 | grid-row: span 1 / span 1 |
.g-row-2 | grid-row: span 2 / span 2 |
.g-row-3 | grid-row: span 3 / span 3 |
.g-row-4 | grid-row: span 4 / span 4 |
.g-row-5 | grid-row: span 5 / span 5 |
.g-row-6 | grid-row: span 6 / span 6 |
.g-rs-2 | grid-row-start: 2 |
.g-rs-3 | grid-row-start: 3 |
.g-rs-4 | grid-row-start: 4 |
.g-rs-5 | grid-row-start: 5 |
.g-rs-6 | grid-row-start: 6 |
.g-re-2 | grid-row-end: 2 |
.g-re-3 | grid-row-end: 3 |
.g-re-4 | grid-row-end: 4 |
.g-re-5 | grid-row-end: 5 |
.g-re-6 | grid-row-end: 6 |
.g-col-1 | grid-column: auto / span 1 |
.g-col-2 | grid-column: auto / span 2 |
.g-col-3 | grid-column: auto / span 3 |
.g-col-4 | grid-column: auto / span 4 |
.g-col-5 | grid-column: auto / span 5 |
.g-col-6 | grid-column: auto / span 6 |
.g-col-7 | grid-column: auto / span 7 |
.g-col-8 | grid-column: auto / span 8 |
.g-col-9 | grid-column: auto / span 9 |
.g-col-10 | grid-column: auto / span 10 |
.g-col-11 | grid-column: auto / span 11 |
.g-col-12 | grid-column: auto / span 12 |
.g-cs-1 | grid-column-start: 1 |
.g-cs-2 | grid-column-start: 2 |
.g-cs-3 | grid-column-start: 3 |
.g-cs-4 | grid-column-start: 4 |
.g-cs-5 | grid-column-start: 5 |
.g-cs-6 | grid-column-start: 6 |
.g-cs-7 | grid-column-start: 7 |
.g-cs-8 | grid-column-start: 8 |
.g-cs-9 | grid-column-start: 9 |
.g-cs-10 | grid-column-start: 10 |
.g-cs-11 | grid-column-start: 11 |
All classes support responsive prefixes like
sm:,md:,lg:,xl:etc.