Grid

带 Row 和 Col 组件的灵活网格系统。支持 24 列（默认）和 30 列模式以实现精确布局。

导入

import { Row, Col } from 'asterui'

示例

基础网格

基础 24 列网格系统。

</>

col-6

col-6

col-6

col-6

import { Row, Col } from 'asterui'

function App() {
  return (
      <Row>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
      </Row>
    )
}

export default App

网格间距

自定义列之间的间距。默认为 16px；推荐值为 16、24、32、40、48。

</>

col-6

col-6

col-6

col-6

import { Row, Col } from 'asterui'

function App() {
  return (
      <Row gutter={32}>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            col-6
          </div>
        </Col>
      </Row>
    )
}

export default App

列偏移

使用 offset 属性偏移列。

</>

col-8

col-8 offset-8

col-6 offset-6

col-6 offset-6

import { Row, Col, Space } from 'asterui'

function App() {
  return (
      <Space direction="vertical" size="md" className="w-full">
        <Row>
          <Col span={8}>
            <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
              col-8
            </div>
          </Col>
          <Col span={8} offset={8}>
            <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
              col-8 offset-8
            </div>
          </Col>
        </Row>
        <Row>
          <Col span={6} offset={6}>
            <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
              col-6 offset-6
            </div>
          </Col>
          <Col span={6} offset={6}>
            <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
              col-6 offset-6
            </div>
          </Col>
        </Row>
      </Space>
    )
}

export default App

响应式列

在不同断点下的不同列跨度。

</>

Responsive

Responsive

Responsive

Responsive

import { Row, Col } from 'asterui'

function App() {
  return (
      <Row gutter={24}>
        <Col xs={24} sm={12} md={8} lg={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            Responsive
          </div>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            Responsive
          </div>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            Responsive
          </div>
        </Col>
        <Col xs={24} sm={12} md={8} lg={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            Responsive
          </div>
        </Col>
      </Row>
    )
}

export default App

30 列网格

30 列的细粒度控制，实现精确布局。

</>

6/30

12/30

12/30

import { Row, Col } from 'asterui'

function App() {
  return (
      <Row cols={30} gutter={8}>
        <Col span={6}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            6/30
          </div>
        </Col>
        <Col span={12}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            12/30
          </div>
        </Col>
        <Col span={12}>
          <div style={{ background: '#0092ff', padding: '16px', color: 'white' }}>
            12/30
          </div>
        </Col>
      </Row>
    )
}

export default App

API

Row

属性	描述	类型	默认值
cols	网格列数	24 | 30	24
gutter	列之间的间距（px）	number | [number, number]	16
justify	网格项的水平对齐	'start' | 'end' | 'center' | 'between' | 'around' | 'evenly'	-
align	网格项的垂直对齐	'start' | 'end' | 'center' | 'stretch' | 'baseline'	-
children	列组件	React.ReactNode	-
className	额外的 CSS 类名	string	-

Col

属性	描述	类型	默认值
span	要跨越的列数（24 或 30 中的）	number	24
offset	要偏移的列数	number	0
order	列的视觉顺序（1-12）	number	-
xs	超小屏幕的响应式跨度（<640px）	number	-
sm	小屏幕的响应式跨度（≥640px）	number	-
md	中等屏幕的响应式跨度（≥768px）	number	-
lg	大屏幕的响应式跨度（≥1024px）	number	-
xl	超大屏幕的响应式跨度（≥1280px）	number	-
xxl	2 倍超大屏幕的响应式跨度（≥1536px）	number	-
children	列内容	React.ReactNode	-
className	额外的 CSS 类名	string	-

使用说明

• 默认为 24 列布局；使用 cols={30} 进行更精细的控制
• 使用 Row 作为容器，Col 用于列
• 在 Row 上设置 gutter 以在列之间添加间距
• 使用响应式属性（xs、sm、md、lg、xl、xxl）在不同屏幕尺寸下设置不同的列跨度
• 列跨度必须加起来等于或小于每行的总列数（24 或 30）
• 使用 offset 在列之前创建空白空间
• 30 列模式对于需要比率如 1:3、2:3 或百分比如 20%、33.33% 的布局很有用