跳到主要内容

Grid 栅格

24 栅格系统，用于页面布局。

何时使用​

  • 需要使用栅格系统进行页面布局
  • 需要响应式的列布局
  • 需要灵活的间距控制

栅格系统​

栅格系统使用 Row 和 Col 组件来创建布局：

  • 使用 Row 创建水平的行容器
  • 使用 Col 作为 Row 的直接子元素来创建列
  • 内容应该放置在 Col 内部
  • 默认为 12 列栅格，可以通过 columns 属性自定义列数

示例​

基础用法​

使用单个 Row 和多个 Col 创建基本的栅格布局。

实时编辑器
function Demo() {
  const boxStyle = {
    background: '#55bc8a',
    color: '#fff',
    padding: '20px',
    textAlign: 'center',
    borderRadius: '4px',
  };

  return (
    <Row gutter={['md']}>
      <Col span={6}>
        <div style={boxStyle}>col-6</div>
      </Col>
      <Col span={6}>
        <div style={boxStyle}>col-6</div>
      </Col>
      <Col span={6}>
        <div style={boxStyle}>col-6</div>
      </Col>
      <Col span={6}>
        <div style={boxStyle}>col-6</div>
      </Col>
    </Row>
  );
}
结果
Loading...

不同宽度​

通过设置不同的 span 值来创建不同宽度的列。

实时编辑器
function Demo() {
  const boxStyle = {
    background: '#329dce',
    color: '#fff',
    padding: '20px',
    textAlign: 'center',
    borderRadius: '4px',
  };

  return (
    <div>
      <Row gutter={['md']} style={{ marginBottom: '12px' }}>
        <Col span={12}>
          <div style={boxStyle}>col-12</div>
        </Col>
      </Row>
      <Row gutter={['md']} style={{ marginBottom: '12px' }}>
        <Col span={8}>
          <div style={boxStyle}>col-8</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
      </Row>
      <Row gutter={['md']}>
        <Col span={6}>
          <div style={boxStyle}>col-6</div>
        </Col>
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
      </Row>
    </div>
  );
}
结果
Loading...

区块间隔​

使用 gutter 属性设置列之间的间距。gutter 接受数组，第一个值为垂直间距，第二个值为水平间距。

实时编辑器
function Demo() {
  const boxStyle = {
    background: '#55bc8a',
    color: '#fff',
    padding: '20px',
    textAlign: 'center',
    borderRadius: '4px',
  };

  return (
    <div>
      <h4 style={{ marginBottom: '12px' }}>水平间距: 20px</h4>
      <Row gutter={[20]} style={{ marginBottom: '24px' }}>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
      </Row>

      <h4 style={{ marginBottom: '12px' }}>水平间距: 50px, 垂直间距: 20px</h4>
      <Row gutter={[20, 50]}>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
      </Row>
    </div>
  );
}
结果
Loading...

列偏移​

使用 offset 属性可以向右偏移列。

实时编辑器
function Demo() {
  const boxStyle = {
    background: '#f5a623',
    color: '#fff',
    padding: '20px',
    textAlign: 'center',
    borderRadius: '4px',
  };

  return (
    <div>
      <Row gutter={['md']} style={{ marginBottom: '12px' }}>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4} offset={4}>
          <div style={boxStyle}>col-4 offset-4</div>
        </Col>
      </Row>
      <Row gutter={['md']} style={{ marginBottom: '12px' }}>
        <Col span={3} offset={3}>
          <div style={boxStyle}>col-3 offset-3</div>
        </Col>
        <Col span={3} offset={3}>
          <div style={boxStyle}>col-3 offset-3</div>
        </Col>
      </Row>
      <Row gutter={['md']}>
        <Col span={6} offset={6}>
          <div style={boxStyle}>col-6 offset-6</div>
        </Col>
      </Row>
    </div>
  );
}
结果
Loading...

自动增长​

设置 grow 属性后，最后一行的列会自动填充剩余空间。

实时编辑器
function Demo() {
  const boxStyle = {
    background: '#f5a623',
    color: '#fff',
    padding: '20px',
    textAlign: 'center',
    borderRadius: '4px',
    minHeight: '80px',
  };

  return (
    <div>
      <h4 style={{ marginBottom: '12px' }}>不使用 grow（默认）</h4>
      <Row gutter={['md']} style={{ marginBottom: '24px' }}>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
      </Row>

      <h4 style={{ marginBottom: '12px' }}>使用 grow</h4>
      <Row gutter={['md']} grow>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4</div>
        </Col>
        <Col span={4}>
          <div style={boxStyle}>col-4（自动填充）</div>
        </Col>
      </Row>
    </div>
  );
}
结果
Loading...

对齐方式​

通过 justify 和 align 属性来设置列的水平和垂直对齐方式。

实时编辑器
function Demo() {
  const boxStyle = {
    background: '#329dce',
    color: '#fff',
    padding: '20px',
    textAlign: 'center',
    borderRadius: '4px',
  };

  return (
    <div>
      <h4 style={{ marginBottom: '12px' }}>水平居中 (justify="center")</h4>
      <Row gutter={['md']} justify="center" style={{ marginBottom: '24px' }}>
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
      </Row>

      <h4 style={{ marginBottom: '12px' }}>右对齐 (justify="flex-end")</h4>
      <Row gutter={['md']} justify="flex-end" style={{ marginBottom: '24px' }}>
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
      </Row>

      <h4 style={{ marginBottom: '12px' }}>两端对齐 (justify="space-between")</h4>
      <Row gutter={['md']} justify="space-between">
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
        <Col span={3}>
          <div style={boxStyle}>col-3</div>
        </Col>
      </Row>
    </div>
  );
}
结果
Loading...

自定义列数​

使用 columns 属性可以自定义栅格的总列数，默认为 12。

实时编辑器
function Demo() {
  const boxStyle = {
    background: '#55bc8a',
    color: '#fff',
    padding: '20px',
    textAlign: 'center',
    borderRadius: '4px',
  };

  return (
    <div>
      <h4 style={{ marginBottom: '12px' }}>24栅格</h4>
      <Row gutter={['md']} columns={24}>
        <Col span={12}>
          <div style={boxStyle}>col-12 (50%)</div>
        </Col>
        <Col span={6}>
          <div style={boxStyle}>col-6 (25%)</div>
        </Col>
        <Col span={6}>
          <div style={boxStyle}>col-6 (25%)</div>
        </Col>
      </Row>
    </div>
  );
}
结果
Loading...

API​

Row 属性​

属性说明类型默认值
gutter栅格间距，[垂直间距, 水平间距][KubedNumberSize, KubedNumberSize?]['md']
grow最后一行的列是否自动填充booleanfalse
justify水平排列方式React.CSSProperties['justifyContent']'flex-start'
align垂直对齐方式React.CSSProperties['alignContent']'stretch'
columns栅格总列数number12
其他原生属性HTMLAttributes<HTMLDivElement>-

Col 属性​

属性说明类型默认值
span栅格占位格数number-
offset栅格左侧偏移number0
其他原生属性HTMLAttributes<HTMLDivElement>-
信息

gutter 的值可以是预设的尺寸名称（'xs', 'sm', 'md', 'lg', 'xl'）或具体的像素数值。