--- title: Grid - 栅格 order: 0 path: /grid nav: order: 1 title: 桌面组件 path: /design group: order: 1 title: 基础 path: /basic --- 栅格可以有效的保证页面的一致性、逻辑性、加强团队协作和统一。 不适用于类似图标与文字间隔的小型元素安排，而是用于大型区块间距的安排。 ## 栅格系统原子单位（网格） 栅格最小单位统一为 8，设置方式在视图->画布->网格设置中，设置参数如下： ![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-栅格-01.png) ## 基本属性 页面宽度 W：指需栅格的页面宽度。 栅格个数 C：指页面宽度有多少个栅格（Column）。 栅格宽度 CW：指每一个栅格的宽度（Column Width）。 水槽宽度 G：指每个水槽的宽度（Gutter）。 边距 M：指第一个栅格距离页面边框的距离（Margin）。 ![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-栅格-02.png) ## 栅格断点 一共分为 5 个断点。栏间距基本为 16px（除超大屏场景时为 24px） 为什么需要定义断点？在不同宽度下的页面也能有较好的自适应效果。 ![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-栅格-03.png) ## 不同场景下的栅格 **设计基准（1440）| 24 栏栅格** ![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-栅格-04.png) **大屏场景（1920）| 24 栏栅格** ![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-栅格-05.png) **平板设备（768）| 12 栏栅格** ![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-栅格-06.png) ## 栅格布局 ### 左右布局自适应策略 ![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-栅格-07.png) ![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-栅格-08.png) ### 其他布局 ![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-栅格-09.png) ### 图片/视频比例 ![alt 属性文本](https://static-btri.midea.com/images/apps/btri-ui/PC/img-栅格-12.png) ## 代码演示 ### 自适应栅格系统 改变屏幕大小查看效果 ## api ### Row | 成员 | 说明 | 类型 | 默认值 | | -------- | -------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------- | | align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` | | gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 { xs: 8, sm: 16, md: 24}。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 | | justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | | wrap | 是否自动换行 | boolean | true | | autoMode | 自适应模式 | `boolean` | false | ### Col | 成员 | 说明 | 类型 | 默认值 | | --------- | -------------------------------------------------------------- | ---------------- | ------ | | flex | flex 布局属性 | string \| number | - | | offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | | order | 栅格顺序 | number | 0 | | pull | 栅格向左移动格数 | number | 0 | | push | 栅格向右移动格数 | number | 0 | | span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | | xs | `屏幕 < 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | sm | `屏幕 ≥ 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | md | `屏幕 ≥ 768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | lg | `屏幕 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | xl | `屏幕 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | xxl | `屏幕 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | | colConfig | 不同分辨率下栅格数 | ColConfigType | - | #### ColConfigType | 属性 | 说明 | 类型 | 默认值 | | ---- | --------------- | ------ | ------ | | XS | `屏幕 < 576px` | number | - | | SM | `屏幕 ≥ 576px` | number | - | | MD | `屏幕 ≥ 768px` | number | - | | LG | `屏幕 ≥ 1024px` | number | - | | XL | `屏幕 ≥ 1280px` | number | - | | XXL | `屏幕 ≥ 1440px` | number | - | 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。