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

Props API

PropTypeDefault value
Gap<string | number>
"row" | "column"
string | number
Padding<string | number>
Padding<string | number>
Padding<string | number>
Padding<string | number>
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
<Box />
<Box />
<Box />

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