Grid

A responsive CSS Grid layout system with 12-column support, similar to Material UI Grid.

tsx

import { Grid, Col, Row } from '@xdev-asia/x-ui-react';

Basic Grid

Use Grid as a container and Col for columns.

span=4

tsx

<Grid columns={12} gap={4}>
  <Col span={4}>span=4</Col>
  <Col span={4}>span=4</Col>
  <Col span={4}>span=4</Col>
</Grid>

Variable Width Columns

span=8

span=4

span=6

tsx

<Grid columns={12} gap={4}>
  <Col span={8}>span=8</Col>
  <Col span={4}>span=4</Col>
  <Col span={6}>span=6</Col>
  <Col span={6}>span=6</Col>
</Grid>

Responsive Grid

Use responsive objects to change column spans at different breakpoints. Try resizing your browser to see the columns reflow!

12 → 6 → 4

tsx

{/* Responsive: full width on mobile, 2 cols on tablet, 3 cols on desktop */}
<Grid columns={12} gap={4}>
  <Col span={{ base: 12, sm: 6, md: 4 }}>Card 1</Col>
  <Col span={{ base: 12, sm: 6, md: 4 }}>Card 2</Col>
  <Col span={{ base: 12, sm: 6, md: 4 }}>Card 3</Col>
  <Col span={{ base: 12, sm: 6, md: 4 }}>Card 4</Col>
  <Col span={{ base: 12, sm: 6, md: 4 }}>Card 5</Col>
  <Col span={{ base: 12, sm: 6, md: 4 }}>Card 6</Col>
</Grid>

{/* Available breakpoints: base, sm (640px), md (768px), lg (1024px), xl (1280px), 2xl (1536px) */}

Gap & Spacing

Use gap, rowGap, and columnGap props.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

tsx

<Grid columns={3} gap={6}>
  <Box>Item 1</Box>
  <Box>Item 2</Box>
  <Box>Item 3</Box>
  <Box>Item 4</Box>
  <Box>Item 5</Box>
  <Box>Item 6</Box>
</Grid>

Row Shorthand

Row is a shorthand for Grid columns=12.

3

6

3

tsx

<Row gap={4}>
  <Col span={3}>3</Col>
  <Col span={6}>6</Col>
  <Col span={3}>3</Col>
</Row>

Multiple Rows

Stack multiple Row components to create distinct rows with different column layouts.

Row 1 - span=6

Row 2 - span=4

Row 3 - span=3

Row 3 - span=6

Row 3 - span=3

tsx

{/* Stack multiple Rows for distinct row layouts */}
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
  <Row gap={4}>
    <Col span={6}>Row 1 - span=6</Col>
    <Col span={6}>Row 1 - span=6</Col>
  </Row>
  <Row gap={4}>
    <Col span={4}>Row 2 - span=4</Col>
    <Col span={4}>Row 2 - span=4</Col>
    <Col span={4}>Row 2 - span=4</Col>
  </Row>
  <Row gap={4}>
    <Col span={3}>Row 3 - span=3</Col>
    <Col span={6}>Row 3 - span=6</Col>
    <Col span={3}>Row 3 - span=3</Col>
  </Row>
</div>

Alignment

Control alignment with align and justify props.

Short

Tall content

Medium

Props

Grid Props

columns - Number of columns (1-12) or responsive object
gap - Gap between items (number or string)
rowGap - Row gap
columnGap - Column gap
align - 'start' | 'center' | 'end' | 'stretch' | 'baseline'
justify - 'start' | 'center' | 'end' | 'stretch'

Col Props

span - Column span (1-12) or responsive object
start - Grid column start position
end - Grid column end position

Navigation