Grid

Flexible grid system with Row and Col components. Supports 24-column (default) and 30-column modes for precise layouts.

Import

import { Row, Col } from 'asterui'

Examples

Basic Grid

Basic 24-column grid system.

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

Grid Gutter

Customize spacing between columns. Default is 16px; recommended values are 16, 24, 32, 40, 48.

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

Column Offset

Offset columns using the offset prop.

col-8

col-8 offset-8

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 Columns

Different column spans at different breakpoints.

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-Column Grid

Fine-grained control with 30 columns for precise layouts.

6/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`

Property	Description	Type	Default
`cols`	Number of grid columns	`24 \| 30`	`24`
`gutter`	Spacing between columns (px)	`number \| [number, number]`	`16`
`justify`	Horizontal alignment of grid items	`'start' \| 'end' \| 'center' \| 'between' \| 'around' \| 'evenly'`	-
`align`	Vertical alignment of grid items	`'start' \| 'end' \| 'center' \| 'stretch' \| 'baseline'`	-
`children`	Column components	`React.ReactNode`	-
`className`	Additional CSS classes	`string`	-

`Col`

Property	Description	Type	Default
`span`	Number of columns to span (out of 24 or 30)	`number`	`24`
`offset`	Number of columns to offset	`number`	`0`
`order`	Visual order of the column (1-12)	`number`	-
`xs`	Responsive span for extra small screens (<640px)	`number`	-
`sm`	Responsive span for small screens (≥640px)	`number`	-
`md`	Responsive span for medium screens (≥768px)	`number`	-
`lg`	Responsive span for large screens (≥1024px)	`number`	-
`xl`	Responsive span for extra large screens (≥1280px)	`number`	-
`xxl`	Responsive span for 2x extra large screens (≥1536px)	`number`	-
`children`	Column content	`React.ReactNode`	-
`className`	Additional CSS classes	`string`	-

Usage Notes

Default is a 24-column layout; use cols={30} for finer control
Use Row as the container and Col for columns
Set gutter on Row to add spacing between columns
Use responsive props (xs, sm, md, lg, xl, xxl) for different column spans at different screen sizes
Column spans must add up to the total columns (24 or 30) or less per row
Use offset to create empty space before a column
30-column mode is useful for layouts that need ratios like 1:3, 2:3, or percentages like 20%, 33.33%