Skip to main content

Grid

A responsive CSS Grid container with shared layout shorthands (padding, sizes, position, overflow, etc.).
By default it renders a div. You can change the element via the component prop.

Import​

import { Grid } from "@libdev-ui/base";

Demo​

Usage​

import * as React from "react";
import { Grid } from "@libdev-ui/base";

export default function Example(): JSX.Element {
  return (
    <Grid columns={3} gap={12}>
      {Array.from({ length: 6 }).map((_, i) => (
        <div key={i} style={{
          height: 64, borderRadius: 8, background: "var(--color-primary, #3b82f6)",
          display: "flex", alignItems: "center", justifyContent: "center", color: "white"
        }}>{i + 1}</div>
      ))}
    </Grid>
  );
}

Responsive behavior​

All core props accept responsive values keyed by breakpoints: xs | sm | md | lg | xl.

  • columns as a number maps to repeat(n, minmax(0, 1fr))
  • rows as a number maps to repeat(n, auto)
  • Spacing numbers (gap, gapX, gapY, padding) use your theme spacing if available (theme.spacing(n)); otherwise numbers are px.
import * as React from "react";
import { Grid } from "@libdev-ui/base";

export default function ResponsiveDemo(): JSX.Element {
  return (
    <Grid
      columns={{ xs: 2, md: 4 }}
      gap={{ xs: 8, md: 16 }}
      p={{ xs: 8, md: 16 }}
      style={{ border: "1px solid #e5e7eb", borderRadius: 8 }}
    >
      {Array.from({ length: 8 }).map((_, i) => (
        <div key={i} style={{
          height: 64, borderRadius: 8, background: "#3b82f6",
          display: "flex", alignItems: "center", justifyContent: "center", color: "white"
        }}>{i + 1}</div>
      ))}
    </Grid>
  );
}

Template areas​

You can define grid areas using a single string with quoted rows or an array of strings (each item is a row).

import * as React from "react";
import { Grid } from "@libdev-ui/base";

export default function TemplateAreas(): JSX.Element {
  return (
    <Grid
      columns={3}
      rows={3}
      areas={[
        "header header header",
        "sidenav main main",
        "footer footer footer",
      ]}
      gap={8}
      style={{ border: "1px dashed #999", borderRadius: 8, padding: 8 }}
    >
      <div style={{ gridArea: "header", background: "#111827", color: "white", borderRadius: 6, padding: 8 }}>Header</div>
      <div style={{ gridArea: "sidenav", background: "#374151", color: "white", borderRadius: 6, padding: 8 }}>Sidenav</div>
      <div style={{ gridArea: "main", background: "#2563eb", color: "white", borderRadius: 6, padding: 8, minHeight: 80 }}>Main</div>
      <div style={{ gridArea: "footer", background: "#111827", color: "white", borderRadius: 6, padding: 8 }}>Footer</div>
    </Grid>
  );
}

Alignment & auto placement​

import * as React from "react";
import { Grid } from "@libdev-ui/base";

export default function Alignment(): JSX.Element {
  return (
    <Grid
      columns={{ xs: 2, md: 3 }}
      autoFlow="row dense"
      justifyContent={{ md: "between" }}
      alignContent="start"
      justifyItems="center"
      alignItems="center"
      gap={12}
      p={{ xs: 8, md: 16 }}
      style={{ border: "1px solid #e5e7eb", borderRadius: 8 }}
    >
      {Array.from({ length: 7 }).map((_, i) => (
        <div key={i} style={{
          height: 56 + (i % 3) * 16,
          borderRadius: 8,
          background: "#60a5fa",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          color: "white",
          padding: 6
        }}>{i + 1}</div>
      ))}
    </Grid>
  );
}

Props​

Grid-specific​

PropTypeDefaultDescription
componentElementType—Polymorphic root element (e.g. 'span', custom component).
columnsResponsive<number | string>—Template columns. number → repeat(n, minmax(0, 1fr)).
rowsResponsive<number | string>—Template rows. number → repeat(n, auto).
areasResponsive<string | string[]>—Template areas. Array items correspond to rows.
autoFlowResponsive<"row" | "column" | "dense" | "row dense" | "column dense">—Auto-placement strategy.
alignItemsResponsive<"start" | "center" | "end" | "stretch" | "baseline">—Align items in block axis.
justifyItemsResponsive<"start" | "center" | "end" | "stretch">—Justify items in inline axis.
alignContentResponsive<"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly">—Align content in block axis.
justifyContentResponsive<"start" | "center" | "end" | "stretch" | "between" | "around" | "evenly">—Justify content in inline axis.
gapResponsive<string | number>—Unified gap (row and column).
gapXResponsive<string | number>—Column gap.
gapYResponsive<string | number>—Row gap.

Shared layout props (CommonLayoutProps)​

GroupProps
Paddingp, px, py, pt, pr, pb, pl
Sizeswidth, minWidth, maxWidth, height, minHeight, maxHeight
Positionposition, inset, top, right, bottom, left
Overflowoverflow, overflowX, overflowY
Flex/GridflexBasis, flexShrink, flexGrow, gridArea, gridColumn, gridColumnStart, gridColumnEnd, gridRow, gridRowStart, gridRowEnd

All shared props are Responsive<...> unless otherwise noted. Lengths may be numbers (→ px/spacing) or strings ("50%", "12rem", var(...), calc(...), etc.).

Theme notes​

  • If the theme provides breakpoints.up(key), it is used for media queries. Otherwise the default breakpoint values are used (xs:0, sm:600, md:900, lg:1200, xl:1536).
  • If the theme provides spacing(n), numeric spacing values go through that scale (e.g. spacing(1) = 8px).