RasterLayout mit Reihen und Spalten.
Grid
Lorem
Ipsum
import { Grid, Column } from '@/components/Grid'; export function Example() { return ( <Grid> <Column $size={6}>Lorem</Column> <Column $size={6}>Ipsum</Column> </Grid> );}
Grid (column sizes)
3
9
4
4
4
import { Grid, Column } from '@/components/Grid'; export function Example() { return ( <> <Grid> <Column $size={3}>3</Column> <Column $size={9}>9</Column> </Grid> <Grid> <Column $size={4}>4</Column> <Column $size={4}>4</Column> <Column $size={4}>4</Column> </Grid> </> );}
Grid ($spaced)
Lorem
Ipsum
Dolor
import { Grid, Column } from '@/components/Grid'; export function Example() { return ( <Grid $spaced> <Column $size={4}>Lorem</Column> <Column $size={4}>Ipsum</Column> <Column $size={4}>Dolor</Column> </Grid> );}
Grid (responsive)
Responsive
Column
import { Grid, Column } from '@/components/Grid'; export function Example() { return ( <Grid $spaced> <Column $size={6} $desktopSize={8} $mobileSize={12}> Responsive </Column> <Column $size={6} $desktopSize={4} $mobileSize={12} $mobileOrder={-1}> Column </Column> </Grid> );}