Grid

Effortlessly create responsive and customizable grid layouts for your React applications. Arrange content with flexibility and precision using a versatile Grid component.

Components:

Grid GridItem

Type

Components

import

import { Grid } from '@pillar-ui/core'
Go To grid Source CodeIssuesdiscussions

Usage

import { Grid } from '@pillar-ui/core'
<Grid />

Responsive

Our design system follows a mobile-first approach, meaning that styles are optimized for smaller screens by default. As the screen size increases, additional styles are applied to enhance the design for larger devices. This is achieved using media queries with min-width, ensuring that styles apply from the specified width and up.

Breakpoint Namemin-width ValueDescription
default0pxApplies to all devices, starting from 0px.
xs480pxStyles apply to screens 480px and wider.
sm568pxStyles apply to screens 568px and wider.
md768pxStyles apply to screens 768px and wider.
lg1024pxStyles apply to screens 1024px and wider.
xl1360pxStyles apply to screens 1360px and wider.
xxl1440pxStyles apply to screens 1440px and wider.

Examples

Grid

Grid Cols

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
import { Grid, Paper } from '@pillar-ui/core'

const items = Array.from({ length: 10 }, (_, index) => (
  <Paper p="5" background="W6" corner="2">
    {index + 1}
  </Paper>
))

const shared = {
  className: 'ex-striped',
  gap: '4',
} as const

export const GridCols = () => {
  return (
    <>
      <Grid cols={{ default: 'repeat(5, 1fr)' }} {...shared}>
        {items}
      </Grid>
      <Grid cols={{ default: '1fr', md: 'repeat(3, 1fr)', lg: 'repeat(5, 1fr)', xl: 'repeat(8, 1fr)' }} {...shared}>
        {items}
      </Grid>
    </>
  )
}

Grid Rows

import { Grid, Paper, type PaperProps } from '@pillar-ui/core'

const Box = (props: PaperProps) => {
  return <Paper p="5" background="W11" corner="2" {...props} />
}

const items = Array.from({ length: 10 }, (_, index) => <Box key={index} />)

export const GridRows = () => {
  return (
    <Paper flow="9">
      <Grid gap="3" rows={{ default: 'repeat(5, 1fr)' }}>
        {items}
      </Grid>
      <Grid gap="3" rows={{ default: '1fr 1fr', md: 'repeat(5, 1fr)', lg: 'repeat(10, 1fr)' }}>
        {items}
      </Grid>
    </Paper>
  )
}

Grid Gap

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
import { Grid, Paper } from '@pillar-ui/core'

const boxes = Array.from({ length: 10 }, (_, index) => (
  <Paper p="4" height="48p" background="W8" corner="2" className="F-c">
    {index + 1}
  </Paper>
))

const shared = {
  className: 'ex-striped',
  cols: { default: 'repeat(10, 1fr)' },
} as const

export const GridGap = () => {
  return (
    <>
      <Grid {...shared}>{boxes}</Grid>
      <Grid {...shared} gap="1">
        {boxes}
      </Grid>
      <Grid {...shared} gap="2">
        {boxes}
      </Grid>
      <Grid {...shared} gap="3">
        {boxes}
      </Grid>
      <Grid {...shared} gap="4">
        {boxes}
      </Grid>
      <Grid {...shared} gap="5">
        {boxes}
      </Grid>
      <Grid {...shared} gap="6">
        {boxes}
      </Grid>
      <Grid {...shared} gap="7">
        {boxes}
      </Grid>
      <Grid {...shared} gap="8">
        {boxes}
      </Grid>
      <Grid {...shared} gap="9">
        {boxes}
      </Grid>
    </>
  )
}

Grid Justify Content

import { Grid, Paper } from '@pillar-ui/core'

const Box = (props: any) => {
  return <Paper width="48p" ratio="1" background="W11" corner="2" className="F-c" {...props} />
}

const boxes = Array.from({ length: 5 }, (_, index) => <Box key={index} />)

export const GridJustifyContent = () => {
  return (
    <>
      <Grid className="ex-striped" cols={{ default: 'repeat(5,50px)' }} gap="4">
        {boxes}
      </Grid>
      <Grid className="ex-striped" cols={{ default: 'repeat(5,50px)' }} gap="4" justify="center">
        {boxes}
      </Grid>
      <Grid className="ex-striped" cols={{ default: 'repeat(5,50px)' }} gap="4" justify="end">
        {boxes}
      </Grid>
      <Grid className="ex-striped" cols={{ default: 'repeat(5,50px)' }} gap="4" justify="between">
        {boxes}
      </Grid>
      <Grid className="ex-striped" cols={{ default: 'repeat(5,50px)' }} gap="4" justify="around">
        {boxes}
      </Grid>
      <Grid className="ex-striped" cols={{ default: 'repeat(5,50px)' }} gap="4" justify="evenly">
        {boxes}
      </Grid>
    </>
  )
}

Grid Justify Items

1
2
3
1
2
3
1
2
3
1
2
3
import { Grid, Paper } from '@pillar-ui/core'

const Box = (props: any) => {
  return
}

const boxes = Array.from({ length: 3 }, (_, index) => (
  <Paper background="W11" corner="2" className="F-c">
    {index + 1}
  </Paper>
))

const shared = {
  className: 'ex-striped',
  cols: { default: '1fr 1fr 1fr' },
  gap: '4',
  as: Paper,
} as const

export const GridJustifyItems = () => {
  return (
    <Paper flow="9">
      <Grid {...shared}>{boxes}</Grid>
      <Grid {...shared} justifyItem="start">
        {boxes}
      </Grid>
      <Grid {...shared} justifyItem="center">
        {boxes}
      </Grid>
      <Grid {...shared} justifyItem="end">
        {boxes}
      </Grid>
    </Paper>
  )
}

Grid Align Items

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
import { Grid, Paper } from '@pillar-ui/core'

const boxes = Array.from({ length: 5 }, (_, index) => (
  <Paper width="48p" ratio="1" background="W10" corner="2" className="F-c">
    {index + 1}
  </Paper>
))

const shared = {
  className: 'ex-striped',
  as: Paper,
  height: '96p',
  gap: '4',
  cols: { default: 'repeat(5,50px)' },
} as const

export const GridAlignItems = () => {
  return (
    <>
      <Grid {...shared}>{boxes}</Grid>
      <Grid {...shared} items="center">
        {boxes}
      </Grid>
      <Grid {...shared} items="end">
        {boxes}
      </Grid>
    </>
  )
}

Grid Align Content

1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
1
2
3
4
5
6
7
8
9
10
import { Grid, Paper } from '@pillar-ui/core'

const boxes = Array.from({ length: 10 }, (_, index) => (
  <Paper width="48p" ratio="1" background="W10" corner="2" className="F-c">
    {index + 1}
  </Paper>
))

const shared = {
  as: Paper,
  height: '192p',
  className: 'ex-striped',
  cols: { default: 'repeat(5,50px)' },
  gap: '4',
} as const

export const GridAlignContent = () => {
  return (
    <Paper flow="9">
      <Grid {...shared} alignContent="baseline">
        {boxes}
      </Grid>
      <Grid {...shared}>{boxes}</Grid>
      <Grid {...shared} alignContent="center">
        {boxes}
      </Grid>
      <Grid {...shared} alignContent="end">
        {boxes}
      </Grid>

      <Grid {...shared} alignContent="between">
        {boxes}
      </Grid>

      <Grid {...shared} alignContent="around">
        {boxes}
      </Grid>

      <Grid {...shared} alignContent="evenly">
        {boxes}
      </Grid>
    </Paper>
  )
}

GridItem

GridItem Col

Hello
Hello
Hello
Hello
Hello
import { Grid, GridItem, Paper } from '@pillar-ui/core'

const shared = {
  className: 'ex-striped',
  as: Paper,
  height: '96p',
  gap: '4',
  p: '5',
  corner: '2',
} as const

export const GridCol = () => {
  return (
    <>
      <Grid gap="3" cols={{ default: 'repeat(5, 1fr)' }}>
        <GridItem col={{ default: '1/2' }} {...shared}>
          Hello
        </GridItem>
        <GridItem col={{ default: '2/6' }} {...shared}>
          Hello
        </GridItem>
      </Grid>
      <Grid gap="3" cols={{ default: 'repeat(12, 1fr)' }}>
        <GridItem col={{ default: 'span 3' }} {...shared}>
          Hello
        </GridItem>
        <GridItem col={{ default: 'span 6' }} {...shared}>
          Hello
        </GridItem>
        <GridItem col={{ default: 'span 3' }} {...shared}>
          Hello
        </GridItem>
      </Grid>
    </>
  )
}

GridItem Row

Hello
Hello
Hello
import { Grid, GridItem, Paper } from '@pillar-ui/core'

export const GridRow = () => {
  return (
    <>
      <Grid gap="3" rows={{ default: 'repeat(12, 1fr)' }}>
        <GridItem row={{ default: 'span 2' }} as={Paper} p="5" background="B6" corner="2">
          Hello
        </GridItem>
        <GridItem row={{ default: 'span 8' }} as={Paper} p="5" background="B6" corner="2">
          Hello
        </GridItem>
        <GridItem row={{ default: 'span 2' }} as={Paper} p="5" background="B6" corner="2">
          Hello
        </GridItem>
      </Grid>
    </>
  )
}

Complex Examples

Responsive Example 1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
import { Grid, Paper } from '@pillar-ui/core'

const shared = {
  className: 'ex-striped F-c R-2',
  as: Paper,
  p: '5',
} as const

export const GridResponsiveTwo = () => {
  return (
    <Grid
      gap="3"
      cols={{
        default: '1fr',
        sm: '1fr 1fr',
        md: 'repeat(4, 1fr)',
        lg: 'repeat(6, 1fr)',
        xl: 'repeat(12, 1fr)',
      }}
    >
      {Array.from({ length: 64 }, (_, index) => (
        <Paper {...shared} key={index}>
          {index + 1}
        </Paper>
      ))}
    </Grid>
  )
}

Responsive Example 2

Header
Aside 1
Main
Table Of content
Footer
import { Grid, GridItem, Paper } from '@pillar-ui/core'

const shared = {
  className: 'ex-striped F-c R-4',
  as: Paper,
  p: '4',
} as const

export const GridResponsive = () => {
  return (
    <Grid
      gap="4"
      cols={{ default: '1fr', lg: 'repeat(12, 1fr)' }}
      rows={{ default: 'auto auto 1fr auto auto', lg: 'repeat(6,1fr)' }}
    >
      <GridItem {...shared} col={{ default: '1/2', lg: 'span 12' }}>
        Header
      </GridItem>
      <GridItem {...shared} col={{ default: '1/2', lg: 'span 2' }} row={{ default: 'span 1', lg: 'span 5' }}>
        Aside 1
      </GridItem>
      <GridItem {...shared} col={{ default: '1/2', lg: 'span 8' }} row={{ default: 'span 1', lg: 'span 5' }}>
        Main
      </GridItem>
      <GridItem {...shared} col={{ default: '1/2', lg: 'span 2' }} row={{ default: 'span 1', lg: 'span 5' }}>
        Table Of content
      </GridItem>
      <GridItem {...shared} col={{ default: '1/2', lg: 'span 12' }}>
        Footer
      </GridItem>
    </Grid>
  )
}

previous

Flexbox

next

Heading