Grid

The Grid system of Ant Design is based on a 24-grid layout. The Row and Col components are used to create flexible and responsive grid layouts.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <Row gutter={[16, 16]}>
      <Col span={12}>
        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
      </Col>
      <Col span={12}>
        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-12</div>
      </Col>
      <Col span={8}>
        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
      </Col>
      <Col span={8}>
        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
      </Col>
      <Col span={8}>
        <div style={{ background: '#e6f4ff', padding: '8px', border: '1px solid #91caff' }}>col-8</div>
      </Col>
    </Row>
  );
}

Result

Loading...

Responsive Grid

Live Editor

function ResponsiveGrid() {
  return (
    <Row gutter={[16, 16]}>
      <Col xs={24} sm={12} md={8} lg={6}>
        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
          Responsive
        </div>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6}>
        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
          Responsive
        </div>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6}>
        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
          Responsive
        </div>
      </Col>
      <Col xs={24} sm={12} md={8} lg={6}>
        <div style={{ background: '#e6f4ff', padding: '16px', border: '1px solid #91caff', textAlign: 'center' }}>
          Responsive
        </div>
      </Col>
    </Row>
  );
}

Result

Loading...

Alignment

Live Editor

function AlignmentDemo() {
  const boxStyle = { background: '#e6f4ff', padding: '16px 0', border: '1px solid #91caff', textAlign: 'center' };
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <Row justify="start" gutter={8}>
        <Col span={4}><div style={boxStyle}>start</div></Col>
        <Col span={4}><div style={boxStyle}>start</div></Col>
      </Row>
      <Row justify="center" gutter={8}>
        <Col span={4}><div style={boxStyle}>center</div></Col>
        <Col span={4}><div style={boxStyle}>center</div></Col>
      </Row>
      <Row justify="end" gutter={8}>
        <Col span={4}><div style={boxStyle}>end</div></Col>
        <Col span={4}><div style={boxStyle}>end</div></Col>
      </Row>
      <Row justify="space-between" gutter={8}>
        <Col span={4}><div style={boxStyle}>between</div></Col>
        <Col span={4}><div style={boxStyle}>between</div></Col>
      </Row>
    </div>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
align	string	"top"	Vertical alignment of columns within the row.
justify	string	"start"	Horizontal distribution of columns within the row.
wrap	boolean	true	Whether columns are allowed to wrap to the next line.
gutter	number	16	Spacing between columns in pixels.

Import

import Grid from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.