设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待

栅格 Grid

基于flex的栅格化布局,row定义行,col定义列。

基础栅格

使用单一的一组 Row 和 Col 栅格组件,就可以创建一个基本的栅格系统,所有列(Col)必须放在 Row 内。

响应式栅格

如果要支持响应式,可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。
如果需要垂直间距,可以写成数组形式 [水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。

Col Props

参数说明类型默认值
span栅格占位格数number-
prefixCls自定义类名前缀string-
flexflex布局属性string-
offset栅格左侧的间隔格数,输入为px,em,rem,%等类型的字符串时为即为输入值string-

Row Props

参数说明类型默认值
justify水平排列方式"start"start
align垂直对齐方式"top"-
gutter栅格间隔number-
prefixCls自定义类名前缀string-

贡献者