Rapid DesignRapid Design
首页
文档
组件
高级组件
网站
Gitea
首页
文档
组件
高级组件
网站
Gitea
  • 基础

    • Button 按钮
    • FloatButton 悬浮按钮
    • Icon 图标
    • Typography 排版
  • 布局

    • Divider 分割线
    • Grid 栅格
    • Layout 布局
    • Space 间距
  • 导航

    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • Menu 菜单
    • Pagination 分页
    • Steps 步骤
  • 输入

    • AutoComplete 自动完成
    • Cascader 级联菜单
    • Checkbox 多选框
    • ColorPicker 颜色选择器
    • DatePicker 日期选择器
    • Form 表单
    • Input 输入框
    • Radio 单选框
    • Rate 评分
    • Select 选择器
    • Slider 滑动条
    • Switch 开关
    • TreeSelect 树选择器
    • Upload 上传
  • 展示

    • Avatar 头像
    • Badge 徽标数
    • Card 卡片
    • Carousel 走马灯
    • Decorator 饰品
    • Event Calendar 日历
    • List 列表
    • Swiper 轮播图
    • Table 表格
    • Tabs 标签页
  • 反馈

    • Alert 警告提示
    • Message 全局提示
    • Modal 对话框
  • 其他

栅格 Grid

24 栅格系统。

如何使用

布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理:

  • 通过 row 在水平方向建立一组 column(简写 col)。
  • 你的内容应当放置于 col 内,并且,只有 col 可以作为 row 的直接元素。
  • 栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如,三个等宽的列可以使用 <Col span={8} /> 来创建。
  • 如果一个 row 中的 col 总和超过 24,那么多余的 col 会作为一个整体另起一行排列。

代码演示

col-6
col-6
col-6
col-6
基础栅格

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

col-4
col-4
col-4
col-4
col-4
col-4
col-4
col-12
col-8
区块间隔

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

API

属性

Row 的属性说明如下:

属性说明类型默认值版本
align垂直对齐方式"top", "middle", "bottom""top"
gutter栅格间隔"number", "string"0
justify水平排列方式"start", "end", "center", "space-around", "space-between""start"
wrap是否自动换行booleantrue

Col 的属性说明如下:

属性说明类型默认值版本
flexflex 布局属性string | number-
offset栅格左侧的间隔格数,间隔内不可以有栅格number0
order栅格顺序number0
pull栅格向左移动格数number0
push栅格向右移动格数number0
span栅格占位格数,为 0 时相当于 display: nonenumber-
xs屏幕 < 576px 响应式栅格,可为栅格数或一个包含其他属性的对象number | string-
sm屏幕 ≥ 576px 响应式栅格,可为栅格数或一个包含其他属性的对象number | string-
md屏幕 ≥ 768px 响应式栅格,可为栅格数或一个包含其他属性的对象number | string-
lg屏幕 ≥ 992px 响应式栅格,可为栅格数或一个包含其他属性的对象number | string-
xl屏幕 ≥ 1200px 响应式栅格,可为栅格数或一个包含其他属性的对象number | string-
xxl屏幕 ≥ 1600px 响应式栅格,可为栅格数或一个包含其他属性的对象number | string-
最近更新: 2023/8/30 16:09
Prev
Divider 分割线
Next
Layout 布局