Bain Logo

Grid

Jump to Props

A primitive useful for flexible layouts.

Grid is a Box with display: grid and comes with helpful style shorthand. It renders a div element by default.

When to use Grid

Because many layout elements will be using Box, Grid allows you to be more descriptive with your JSX rather than just using Box everywhere. As a general rule of thumb, use Grid whenever you need the container to be display="grid".

// is the same as

Props

  • Props
  • Styled Functions
PropTypeDefaultDescription
childrenReactNode

Content to show within the component

areastring

Shorthand to set the standard CSS `gridArea` property.

templateAreasstring

Shorthand to set the standard CSS `gridTemplateAreas` property.

gapstring

Shorthand to set the standard CSS `gridGap` property.

rowGapstring

Shorthand to set the standard CSS `gridRowGap` property.`

columnGapstring

Shorthand to set the standard CSS `gridColumnGap` property.`

autoColumnsstring

Shorthand to set the standard CSS `gridAutoColumns` property.`

columnstring

Shorthand to set the standard CSS `gridColumn` property.`

rowstring

Shorthand to set the standard CSS `gridRow` property.`

autoFlowstring

Shorthand to set the standard CSS `gridAutoFlow` property.`

autoRowsstring

Shorthand to set the standard CSS `gridAutoRows` property.`

templateRowsstring

Shorthand to set the standard CSS `gridTemplateRows` property.`

templateColumnsstring

Shorthand to set the standard CSS `gridTemplateColumns` property.`

© 2021, Made with ❤️
by ADAPT @ Bain & Company
Privacy Policy