Grid

Grid layout with with responsive defaults, but also fully customizable with standard CSS grid properties.

Props API

Prop	Type	Default value
`gridItemMinWidth`	`string`	`300px`
`gridMaxRowItems`	`number`	—
`gap`	`Gap<string \| number>`	—
`asChild`	`boolean`	—
`orientation`	`"row" \| "column"`	—
`bleed`	`string \| number`	—
`bleedTop`	`Padding<string \| number>`	—
`bleedRight`	`Padding<string \| number>`	—
`bleedBottom`	`Padding<string \| number>`	—
`bleedLeft`	`Padding<string \| number>`	—
`xAlign`	`JustifyContent`	—
`yAlign`	`AlignItems`	—

import { Grid, GridProps, gridStyles } from '@christiankaindl/lyts'

Use Grid if you need a layout with shared column sizing across multiple rows. In a grid, even when not all spaces are filled, the space for all columns is always reserved, which makes it a great choice for structured content display, such as blog posts.

Break-out elements

Grid also supports "break-out" elements, which are a common way to highlight the first item in a grid with a larger appearance. Break-out elements are supported via the Breakout component:

// Edit the live code below
<Grid gridItemMinWidth='13em'>
  <Breakout xAlign='center' yAlign='center'>
    Hero card with Breakout
  </Breakout>
  <Box />
  <Box />
  <Box />
</Grid>

Breakout is a helper component which sets CSS' grid-column to "1 / -1", which makes it span all columns within a row.