GridLayout system with rows and columns.

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>  );}