---
title: Grid 栅格
description: 栅格是以规则的网格阵列来指导和规范网页中的版面布局以及信息分布，提高界面内布局的一致性，节约成本。
isComponent: true
usage: false
spline: navigation
author: { code: "swimly", doc: "mingsong" }
---

### 基本使用

grid 默认提供了`l-row`和`l-col`两个组件，l-row 为外层包裹容器，l-col 为其子容器，每个 l-col 可通过`span`属性来定义其占当
前行的宽度，最大为`12`。

> 可分别通过`tag`属性来定义 l-row 和 l-col 最终渲染出来的标签，默认为`div`。

{{ base }}

## 水平对齐

通过`justify`可设置内部子组件 l-col 的水平排列方式，可选：`start`，`center`，`end`，`space-around`，`space-between`。

{{ justify }}

## 垂直对齐

通过`align`可设置子组件垂直方向的对齐方式，可选：`top`，`middle`，`bottom`。

{{ align }}

## 间隔

可通过设置 l-row 上的`gutter`属性来定义子组件之间的间隔，如果其值为数字类型，则代表水平垂直方向的间隔都是固定值，如果为
数字数组，第一个值代表横向间隔，第二个为纵向间隔，如果为对象类型或者对象数组类型，则代表为响应式间隔。

> 例如：`gutter="number"`则达标横向和纵向都是`number`,`gutter="[number1, number2]"`则代表横向为`number1`，纵向为
> ：`number2`，`gutter="object"`则代表横向和纵向都会根据对象里面定义的自适应调整。`gutter=[object1, object2]`则代表横向
> 会根据`object1`自适应调整，纵向会根据`object2`自适应调整。

object 的结构如下：

```javascript
{ xs: number, sm: number, md: number, lg: number, xl: number, xxl: number }
```

xs 代表屏幕宽度小于等于`320px`，sm 代表屏幕宽度小于等于`768px`，md 代表屏幕宽度小于等于`992px`，lg 代表屏幕宽度小于等
于`1200px`，xl 代表屏幕宽度小于等于`1400px`，xxl 代表屏幕宽度小于等于`1880px`。

{{ gutter }}

## 偏移量

通过给`l-col`设置`offset`属性可让当前列向右偏移一定的距离，其值类似`span`。

{{ offset }}

## 排序

如果简单的通过`offset`设置向右偏移不能达到要求，可通过设置`push`设置向右偏移量，通过`pull`设置向左偏移量。

{{ sort }}

## flex

可通过给 l-col 设置`flex`属性来决定当前列所占的位置，使用方式同 css 的 flex 属性。

{{ flex }}
