# Grid > `nly-row` 和 `nly-col` 是一个移动端优先的 `flex-box` 布局，是 `adminlte3` 的响应式布局 ```html

``` **栅格布局原理** - 在栅格布局中，每列最多可设置 1 到 12 个宽度单位，且每行在视觉上，最多只能允许所有列加起来有 12 个单位的宽度，超出的会自动换行排列 - 栅格布局中共有 5 个断点，分别是 `xs, sm, md, lg, xl` - 断点是基于媒体查询的 `min-width` 写法，即每个断点是代表当前断点及以上。比如 `md` 代表最小宽度在 `md` 以及以上宽度，如果不另外设置，这条规则将在 `md, lg, xl` 都会生效 - `nly-col` 在理论上必须嵌套在 `nly-row` 中，且 `nly-row` 不能直接嵌套在 `nly-row` 中，但 `nly-row` 可以嵌套在 `nly-col` 中 - 每个 `nly-col` 都有一个水平的 `padding` 属性，用来控制列的距离，防止内容超出列范围，且可以在视觉上使得每列都是对齐的 - 在没有设置宽度的情况下，每列会以等宽布局，即每列的宽度都是相等的。由于水平的 `padding` 属性，会导致每列之间会有间隔，可以使用 `nly-row` 的 prop `no-gutters` 来消除列之间的间隔 - 可以通过设置 `` 来设置每列为最小宽度，即自适应内容宽度。此列代表在 `xs` 及以上断点，此列都是最小宽度 - `nly-row` 的 `cols-xs, cols-sm, cols-md, cols-lg, cols-xl` prop 可让其在不同断点上具有不同的宽度，通常可选 `1, 2, 3, 4, 5, 6` - `nly-col` 的 `xs, sm, md, lg, xl` prop 代表在不同断点上的宽度，最小 1 个单位的宽度，最多 12 个单位的宽度。当一个 `nly-col` 的宽度为 12 时，在视觉上宽度会填充满整个 `nly-row` - `nly-col` 是用百分比来设置的宽度，所以能够适用父元素的宽度请注意 [flexbox](https://github.com/philipwalton/flexbugs) 的局限性和 [有些 html 元素是无法使用 flexbox](https://github.com/philipwalton/flexbugs#flexbug-9)的 ## 总览 `NlyAdminlteVue` 的 `Grid` 栅格布局跟 `bootstrap` 的栅格布局所支持的断点都是一样的。 ### 行 `` `nly-row` 是栅格布局的行，是 `nly-col` 的容器。 `nly-col` 在理论上必须嵌套在 `nly-row` 中，且 `nly-row` 不能直接嵌套在 `nly-row` 中，但 `nly-row` 可以嵌套在 `nly-col` 中。由于水平的 `padding` 属性，会导致每列之间会有间隔，可以使用 `nly-row` 的 prop `no-gutters` 来消除列之间的间隔 ### 列 `nly-col` `nly-col` 是栅格布局的列，理论上 `nly-col` 必须嵌套在 `nly-row` 中 ### 断点 `NlyAdminlteVue` 中的断点是是基于媒体查询的 `min-width` 写法，即每个断点是代表当前断点及以上。比如 `md` 代表最小宽度在 `md` 以及以上宽度，如果不另外设置，这条规则将在 `md, lg, xl` 都会生效。共有 5 个断点，分别是 `xs, sm, md, lg, xl`

	Extra small (xs) `<576px`	Small (sm) `≥576px`	Medium (md) `≥768px`	Large (lg) `≥992px`	Extra large (xl) `≥1200px`
Max container width	None (auto)	540px	720px	960px	1140px
Prop	`xs="*"`	`sm="*"`	`md="*"`	`lg="*"`	`xl="*"`
# of columns	12
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offset	`offset="*"`	`offset-sm="*"`	`offset-md="*"`	`offset-lg="*"`	`offset-xl="*"`
Order	`order="*"`	`order-sm="*"`	`order-md="*"`	`order-lg="*"`	`order-xl="*"`

## `` 自动布局可以利用媒体查询的断点来自动设置列的宽度，不需要使用 `nly-col` 的其他任何 prop ### 等宽布局可以给 `nly-col` 设置 prop `col=true` 来使得每列宽度都一样 ```HTML

1 of 2

2 of 2

1 of 3

2 of 3

3 of 3

``` ### 多行等宽可以通过插入一个 `class="w-100` 的元素来使得列换行 ```html

Column

``` ### 单列宽度 `Grid` 是自动布局，您可以在设置其中一列的宽度，其他列会自动调整其宽度，以达到所有列填满 12 个宽度单位。 ```html

1 of 3

2 of 3 (wider)

3 of 3

1 of 3

2 of 3 (wider)

3 of 3

``` ### 内容宽度在栅格布局中，可以设置 `xs, sm, md, lg, xl` 为 `auto` 来使宽度跟随每列的内容，从而达到适应内容的宽度。 ```html

1 of 3

内容宽度

3 of 3

1 of 3

内容宽度

3 of 3

``` ## 响应式 `NlyAdminlteVue` 响应式布局分为 5 个类别，分别是 `xs, sm, md, lg, xl` 。可以通过相互搭配来调整在小屏，中屏，大屏，超大屏的显示，达到适应屏幕的效果 ### 在所有断点下宽度不变如果需要不同大小的设备，宽度都不变（这里指百分比），可以设置 `col` 或者 `xs=*` 。 col 在不同断点下，所有列宽度百分比都是一样的，即等宽。还可以用 `xs=*` 来指定一列宽度。 ```html

col

col-8

col-4

``` ### 堆叠水平排列使用 `sm="*"` or `sm` (此时每列都是等宽的) 可以创建一个在 `sm` 断点即以上屏幕的栅格布局，当屏幕在 `sm` 断点以下，所有列都会堆叠到水平排列，即视觉上，每一行只有一列。 ```html

col-sm-8

col-sm-4

col-sm

``` ### 混合使用不同的断点可以混合使用，不同的断点在对应的屏幕大小范围会生效。但是需要注意大屏覆盖小屏的地方。 ```html

xs="12" md="8"

xs="6" md="4"

xs="6"

``` ## 对齐方式使用 `flex-box` 的对齐 class 可以使得 `nly-row` 和 `nly-col` 实现盒子布局 ### 整行行垂直对齐可以设置 `nly-row` 的 prop `align-v` 来使得整行调整垂直对齐方式，可选 `start` , `baseline` , `end` , `stretch` , `center` ```html

One of three columns

``` 可以设置 `nly-col` 的 prop `align-self` 来设置每列在 `nly-row` 组件中的垂直位置。可选 `start` , `center` , `end` , `baseline` , `stretch` ```html

One of three columns

One of two columns

``` ### 整行水平对齐可以设置 `nly-row` 的 prop `align-h` 来设置正好水平对齐，可选 `start` , `center` , `end` , `around` , `between` ```html

One of two columns

``` ## 排序 ### 重新排序 `nly-col` 可以设置 prop `order-*` 来重新排序。 `order-xs` , `order-sm` , `order-md` , `order-lg` , `order-xl` 分别代表 5 个断点下的排列循序。 ```html

order-xs="1" order-sm="2" order-md="3" order-lg="4"

order-xs="2" order-sm="3" order-md="4" order-lg="1"

order-xs="3" order-sm="4" order-md="1" order-lg="2"

order-xs="4" order-sm="1" order-md="2" order-lg="3"

``` ### 位置偏移 `nly-col` 可以设置 prop `offset-*` 来设置偏移量。 `offset-xs` , `offset-sm` , `offset-md` , `offset-lg` , `offset-xl` 分别代表 5 个断点下的偏移量。 ```html

md="4"

md="4" offset-md="4"

md="3" offset-md="3"

md="6" offset-md="3"

``` 如果您需要重置偏移量，您可以设置 `offset-* = 0` ```html

sm="5" md="6"

sm="5" offset-sm="2" md="6" offset-md="0"

sm="6" md="5" lg="6"

sm="6" md="5" offset-md="2" col-lg="6" offset-lg="0"

```