Grid

import { Grid } from "@/components/ui/grid";

export default function ResponsiveGridDemo() {
  return (
      <div className="flex flex-col gap-2 w-3/4">
        <Grid.System unstable_useContainer>
          <Grid columns={{ sm: 1, md: 2, lg: 3 }} rows={{ sm: 6, md: 3, lg: 2 }}>
            <Grid.Cell>1</Grid.Cell>
            <Grid.Cell>2</Grid.Cell>
            <Grid.Cell>3</Grid.Cell>
            <Grid.Cell>4</Grid.Cell>
            <Grid.Cell>5</Grid.Cell>
            <Grid.Cell>6</Grid.Cell>
          </Grid>
        </Grid.System>
      </div>
  );
}