Layout 栅格布局

通过基础的 24 分栏，迅速简便地创建布局。

基础布局

使用单一分栏创建基础的栅格布局。

分栏间隔

分栏之间存在间隔。

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

分栏偏移

支持偏移指定的栏数。

对齐方式

通过 justify 属性来指定 start, center, end, space-between, space-around, space-evenly 其中的值来定义子元素的排版方式。

响应式布局

参照了 Bootstrap 的 响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

交互式示例

动态调整栅格参数，实时查看效果。

实用布局案例

典型页面布局

卡片网格布局

表单布局

使用提示

最佳实践

1. 合理使用间隔：建议使用 16px 或 20px 的间隔，这样既能保持视觉层次，又不会过于拥挤。

2. 响应式设计：优先考虑移动端体验，使用 :xs 属性定义小屏幕布局，然后逐步适配更大屏幕。

3. 语义化布局：根据内容的重要性和层级关系来安排栅格，而不是仅仅为了视觉效果。

4. 性能考虑：避免过度嵌套 Row 和 Col 组件，保持结构简洁。

常见问题

Q: 为什么设置了 gutter 但没有效果？

A: 确保 gutter 设置在 Row 组件上，而不是 Col 组件。gutter 会自动为子 Col 组件添加相应的 padding。

Q: 如何实现垂直居中？

A: 使用 Row 的 align="middle" 属性，或者结合 CSS 的 flexbox 属性。

Q: 响应式断点是什么？

A:

• xs: <576px
• sm: ≥576px
• md: ≥768px
• lg: ≥992px
• xl: ≥1200px

Q: 可以嵌套使用吗？

A: 可以，但建议保持结构简洁，避免过度嵌套影响性能。

<!-- 正确的嵌套使用 -->
<c-row>
  <c-col :span="12">
    <c-row :gutter="10">
      <c-col :span="12">内容1</c-col>
      <c-col :span="12">内容2</c-col>
    </c-row>
  </c-col>
  <c-col :span="12">其他内容</c-col>
</c-row>

Row API

Row Attributes

属性名	说明	类型	可选值	默认值
gutter	栅格间隔	number	—	0
justify	flex 布局下的水平排列方式	string	start / end / center / space-around / space-between / space-evenly	start
align	flex 布局下的垂直排列方式	string	top / middle / bottom	top
wrap	是否自动换行，仅在 type 为 flex 时有效	boolean	—	true

Col API

Col Attributes

属性名	说明	类型	可选值	默认值
span	栅格占据的列数	number	0-24	24
offset	栅格左侧的间隔格数	number	0-24	0
push	栅格向右移动格数	number	0-24	0
pull	栅格向左移动格数	number	0-24	0
xs	<768px 响应式栅格数或者栅格属性对象	number	0-24	—
sm	≥768px 响应式栅格数或者栅格属性对象	number	0-24	—
md	≥992px 响应式栅格数或者栅格属性对象	number	0-24	—
lg	≥1200px 响应式栅格数或者栅格属性对象	number	0-24	—
xl	≥1920px 响应式栅格数或者栅格属性对象	number	0-24	—