mise-en-place

# <Grid />

A wrapper component that aligns its children in a configurable grid using CSS grid. Each cell fits to the height of the tallest cell in its row.

# Usage

<Grid
  :gap="['2', '4', '6']"
  :pad="['2', '4']"
  :width="['5rem', '10rem', '20rem']"
>
  ...
</Grid>

RESULT


# Props

# gap

  • Type: String or Array<String>
  • Default: 0

A responsive prop bound to the spacing scale that applies a specified space between successive items in the <Grid />.

# width

Recommended

  • Type: String
  • Default: null

If specified, the grid will size items accordingly, such that each child element takes up no more than the given width. The grid will responsively collapse into a vertical stack as needed. The width prop overrides the column prop if both are set.

# columns

  • Type: String
  • Default: null

If specified, the grid will size items accordingly, such that each child element takes up no more than the given width. The grid will responsively collapse into a vertical stack as needed. The width prop overrides the column prop if both are set.

# as

  • Type: String
  • Default: div

The HTML element to render the < Grid /> component as. See semantic HTML for more details.

# css

  • Type: Object
  • Default: {}

Additional styles applied to the component that leverage the theme when available. Visit the css prop documentation for more details.

# Examples

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis inventore autem minus optio dolorem id. Cumque pariatur ex facere voluptatem perspiciatis porro libero. Suscipit blanditiis eum saepe obcaecati quis aliquam?

← <HorizontalScroll /> →