Grid

Grid places its children in equal columns. Give it a column count, or a minimum child width to let it fit as many columns as the space allows.

import { Grid } from '@beyul/sulmu-ui'

Source

Examples

Fixed columns

Accounts

Contacts

Bookings

Finance

Reports

Settings

import { Card, Grid } from '@beyul/sulmu-ui'

const modules = ['Accounts', 'Contacts', 'Bookings', 'Finance', 'Reports', 'Settings']

export default function Example() {
  return (
    <Grid columns={3} gap={4}>
      {modules.map((name) => (
        <Card key={name} padding="md" outlined>
          {name}
        </Card>
      ))}
    </Grid>
  )
}

Responsive columns

minChildWidth creates as many equal columns as fit, each at least that wide. Resize the window to see it reflow. It wins over columns when both are set.

Accounts

Contacts

Bookings

Finance

Reports

Settings

import { Card, Grid } from '@beyul/sulmu-ui'

const modules = ['Accounts', 'Contacts', 'Bookings', 'Finance', 'Reports', 'Settings']

export default function Example() {
  return (
    <Grid minChildWidth="200px" gap={4}>
      {modules.map((name) => (
        <Card key={name} padding="md" outlined>
          {name}
        </Card>
      ))}
    </Grid>
  )
}

Different row and column gaps

Accounts

Contacts

Bookings

Finance

import { Card, Grid } from '@beyul/sulmu-ui'

const modules = ['Accounts', 'Contacts', 'Bookings', 'Finance']

export default function Example() {
  return (
    <Grid columns={2} rowGap={2} columnGap={8}>
      {modules.map((name) => (
        <Card key={name} padding="md" outlined>
          {name}
        </Card>
      ))}
    </Grid>
  )
}

Props

Prop	Type	Default	Description
as	ElementType	div	Element to render. Default: div.
columns	1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 9 | 11	-	Number of equal columns, 1 to 12.
minChildWidth	string	-	Responsive alternative to columns: as many equal columns as fit, each at least this wide, e.g. "240px". Wins over columns when both are set.
gap	0 | 1 | 2 | 3 | 0.5 | 1.5 | 2.5 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 20 | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "12" | "14" | "16" | "20"	-	Space between rows and columns, as a step of the spacing scale: 1 = 4px, 4 = 16px.
rowGap	0 | 1 | 2 | 3 | 0.5 | 1.5 | 2.5 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 20 | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "12" | "14" | "16" | "20"	-	Space between rows only.
columnGap	0 | 1 | 2 | 3 | 0.5 | 1.5 | 2.5 | 4 | 5 | 6 | 7 | 8 | 10 | 12 | 14 | 16 | 20 | "0" | "0.5" | "1" | "1.5" | "2" | "2.5" | "3" | "4" | "5" | "6" | "7" | "8" | "10" | "12" | "14" | "16" | "20"	-	Space between columns only.
align	"center" | "start" | "end" | "stretch"	-	Vertical alignment of the children inside their cells (align-items).
justify	"center" | "start" | "end" | "stretch"	-	Horizontal alignment of the children inside their cells (justify-items).

Grid also accepts every div attribute.

Usage notes

• columns goes from 1 to 12. There are no responsive prop values; use minChildWidth when the column count should follow the available width.
• gap, rowGap and columnGap take the same spacing steps as Flex.