网格
当前，大多数浏览器都支持 CSS Grid 布局。不同于栅格布局，CSS Grid 布局更加强大，可以创建更复杂的布局。默认为 12 列网格，同时支持使用 CSS Variables 动态调整网格行数、列数及间距。以下为支持的 CSS Variables：
| 变量名 | 默认值 | 描述 |
|---|---|---|
--ms-rows | 1 | 网格模板中的行数 |
--ms-columns | 12 | 网格模板中的列数 |
--ms-gap | 1.5rem | 列（垂直和水平）之间的间隙大小 |
详细用法见下方示例。
基础用法
使用 .grid 类来创建一个网格布局。网格布局的子元素使用 .g-col-* 类来定义列宽。当水平方向没有更多空间时，网格项会自动换行到下一行：
响应式网格
使用响应式类来调整跨视口的布局。这里我们从最窄视口上的两列开始，然后在中等及以上的视口上增加到三列。
自动列
当网格项（.grid 的直接子项）上没有任何类时，每个网格项将自动调整为一列。
此行为可以与网格列类混合。
网格排序
通过使用 .g-cs-* 类来调整网格项的顺序。* 为数字 1~11。
跨行网格
通过使用 g-row-* 类来调整网格项的跨行。* 为数字 1~6。
或者，使用 g-rs-*, g-re-* 来调整网格项的起始行和结束行。* 为数字 1~6。
自定义行列
使用 CSS Variables --ms-rows, --ms-columns 来动态调整网格行数、列数。
自定义间距
通用 CSS Variables --ms-gap 来动态调整列之间的间距。
当然，若只针对特定布局调整间距，也可直接使用内置的网格间距类（详细可查看 Spacing）
响应式布局
结合 .d-* 工具类及响应式前缀，可以创建复杂的响应式布局。
速查表
| 类名 | 样式 |
|---|---|
.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 |
以上所有类均支持响应式前缀，如
sm:,md:,lg:,xl:。