元服务——实践篇

栅格布局(GridRow/GridCol)

栅格容器GridRow

栅格系统断点 栅格系统以设备的水平宽度（屏幕密度像素值，单位vp）作为断点依据，定义设备的宽度类型，形成了一套断点规则。开发者可根据需求在不同的断点区间实现不同的页面布局效果。

栅格系统默认断点将设备宽度分为xs、sm、md、lg四类，尺寸范围如下：

断点名称 取值范围（vp） 设备描述 xs [0, 320） 最小宽度类型设备。 sm [320, 520) 小宽度类型设备。 md [520, 840) 中等宽度类型设备。 lg [840, +∞) 大宽度类型设备。

排列方向

栅格布局中，可以通过设置GridRow的direction属性来指定栅格子组件在栅格容器中的排列方向。该属性可以设置为GridRowDirection.Row（从左往右排列）或GridRowDirection.RowReverse（从右往左排列），以满足不同的布局需求。通过合理的direction属性设置，可以使得页面布局更加灵活和符合设计要求。

子组件默认从左往右排列。

GridRow({ direction: GridRowDirection.Row }){}

子组件间距

GridRow中通过gutter属性设置子元素在水平和垂直方向的间距。

当gutter类型为number时，同时设置栅格子组件间水平和垂直方向边距且相等。下例中，设置子组件水平与垂直方向距离相邻元素的间距为10。

GridRow({ gutter: 10 }){} 当gutter类型为GutterOption时，单独设置栅格子组件水平垂直边距，x属性为水平方向间距，y为垂直方向间距。