Grid

Aggarly Platform Grid provides an enterprise-grade, token-driven layout system with 12-column layouts, responsive spans, premium auto-fit card grids, and robust alignment controls for complex admin + clinical workflows.

Basic 12-Column Grid

The standard enterprise layout: spans across a 12-column grid with token gaps.

span=12

span=6

span=4

Show code

import { Grid, GridCol } from "@/design-system/components/Grid";

export function Example() {
  return (
    <Grid cols={12} gap={3}>
      <GridCol span={12}><div className="ds-grid-demo">span=12</div></GridCol>
      <GridCol span={6}><div className="ds-grid-demo">span=6</div></GridCol>
      <GridCol span={6}><div className="ds-grid-demo">span=6</div></GridCol>
      <GridCol span={4}><div className="ds-grid-demo">span=4</div></GridCol>
      <GridCol span={4}><div className="ds-grid-demo">span=4</div></GridCol>
      <GridCol span={4}><div className="ds-grid-demo">span=4</div></GridCol>
    </Grid>
  );
}

Responsive Spans

Use spanSm/spanMd/spanLg/spanXl/span2xl for adaptive layouts.

12 / md:6 / lg:4

12 / md:12 / lg:4

Show code

import { Grid, GridCol } from "@/design-system/components/Grid";

export function Example() {
  return (
    <Grid cols={12} gap={3}>
      <GridCol span={12} spanMd={6} spanLg={4}>
        <div className="ds-grid-demo">12 / md:6 / lg:4</div>
      </GridCol>
      <GridCol span={12} spanMd={6} spanLg={4}>
        <div className="ds-grid-demo">12 / md:6 / lg:4</div>
      </GridCol>
      <GridCol span={12} spanMd={12} spanLg={4}>
        <div className="ds-grid-demo">12 / md:12 / lg:4</div>
      </GridCol>
    </Grid>
  );
}

Auto-Fit Card Grid

Premium pattern for dashboards: auto-fit columns with minWidth + optional equal-height cards.

Card

Show code

import { Grid, GridCol } from "@/design-system/components/Grid";

export function Example() {
  return (
    <Grid auto minWidth={240} gap={3} equal>
      <GridCol><div className="ds-grid-demo ds-grid-demo--primary">Card</div></GridCol>
      <GridCol><div className="ds-grid-demo ds-grid-demo--primary">Card</div></GridCol>
      <GridCol><div className="ds-grid-demo ds-grid-demo--primary">Card</div></GridCol>
      <GridCol><div className="ds-grid-demo ds-grid-demo--primary">Card</div></GridCol>
    </Grid>
  );
}

Alignment (Vertical + Horizontal)

Control items alignment and justify behavior at the grid container level.

Tall

Normal

Medium

Show code

import { Grid, GridCol } from "@/design-system/components/Grid";

export function Example() {
  return (
    <Grid cols={12} gap={3} itemsAlign="center" itemsJustify="stretch">
      <GridCol span={4}><div className="ds-grid-demo ds-grid-demo--taller">Tall</div></GridCol>
      <GridCol span={4}><div className="ds-grid-demo">Normal</div></GridCol>
      <GridCol span={4}><div className="ds-grid-demo ds-grid-demo--tall">Medium</div></GridCol>
    </Grid>
  );
}

Container (Optional)

Use the DS container to constrain content width consistently across pages.

Constrained

Layout

Inside

Show code

import { Container, Grid, GridCol } from "@/design-system/components/Grid";

import { Grid, GridCol } from "@/design-system/components/Grid"; export function Example() { return ( <Grid cols={12} gap={3}> <GridCol span={12}><div className="ds-grid-demo">span=12</div></GridCol> <GridCol span={6}><div className="ds-grid-demo">span=6</div></GridCol> <GridCol span={6}><div className="ds-grid-demo">span=6</div></GridCol> <GridCol span={4}><div className="ds-grid-demo">span=4</div></GridCol> <GridCol span={4}><div className="ds-grid-demo">span=4</div></GridCol> <GridCol span={4}><div className="ds-grid-demo">span=4</div></GridCol> </Grid> ); }

import { Grid, GridCol } from "@/design-system/components/Grid"; export function Example() { return ( <Grid cols={12} gap={3}> <GridCol span={12} spanMd={6} spanLg={4}> <div className="ds-grid-demo">12 / md:6 / lg:4</div> </GridCol> <GridCol span={12} spanMd={6} spanLg={4}> <div className="ds-grid-demo">12 / md:6 / lg:4</div> </GridCol> <GridCol span={12} spanMd={12} spanLg={4}> <div className="ds-grid-demo">12 / md:12 / lg:4</div> </GridCol> </Grid> ); }

import { Grid, GridCol } from "@/design-system/components/Grid"; export function Example() { return ( <Grid auto minWidth={240} gap={3} equal> <GridCol><div className="ds-grid-demo ds-grid-demo--primary">Card</div></GridCol> <GridCol><div className="ds-grid-demo ds-grid-demo--primary">Card</div></GridCol> <GridCol><div className="ds-grid-demo ds-grid-demo--primary">Card</div></GridCol> <GridCol><div className="ds-grid-demo ds-grid-demo--primary">Card</div></GridCol> </Grid> ); }

import { Grid, GridCol } from "@/design-system/components/Grid"; export function Example() { return ( <Grid cols={12} gap={3} itemsAlign="center" itemsJustify="stretch"> <GridCol span={4}><div className="ds-grid-demo ds-grid-demo--taller">Tall</div></GridCol> <GridCol span={4}><div className="ds-grid-demo">Normal</div></GridCol> <GridCol span={4}><div className="ds-grid-demo ds-grid-demo--tall">Medium</div></GridCol> </Grid> ); }