Grid

Grid defines how EnterUI handles a responsive auto-fit grid primitive, including default structure, accessible states, and token-driven styling.

#Default usage

<Grid min="10rem">
  <Card><CardContent>Usage</CardContent></Card>
  <Card><CardContent>Health</CardContent></Card>
  <Card><CardContent>Coverage</CardContent></Card>
</Grid>

#Import

import { Card, CardContent, Grid, GridItem } from "@froggdesign/enter-ui-react";

#Responsive min and gap (optional)

min and gap accept breakpoint objects to keep the grid responsive without writing media queries manually.

Each supplied breakpoint applies until a later supplied breakpoint replaces it. Omitted breakpoints fall back to the closest earlier value in the same Grid; they never inherit another Grid's responsive configuration. Without a base value, the defaults are min="16rem" and the standard 16px spacing token.

import { Card, CardContent, Grid, GridItem } from "@froggdesign/enter-ui-react";

<Grid
  gap={{ base: "0.75rem", md: "1rem", lg: "1.25rem" }}
  min={{ base: "10rem", md: "12rem", lg: "14rem" }}
>
  <GridItem colSpan="full">
    <Card><CardContent>Top panel</CardContent></Card>
  </GridItem>
  <GridItem colSpan={2}>
    <Card><CardContent>Panel</CardContent></Card>
  </GridItem>
</Grid>

#Aligning, auto-flow, and track templates

import { Card, CardContent, Grid, GridItem } from "@froggdesign/enter-ui-react";

<Grid
  alignItems="start"
  autoFlow="dense"
  gap="1.25rem"
  justifyItems="stretch"
  templateColumns="repeat(auto-fit, minmax(min(100%, 15rem), 1fr))"
>
  <GridItem colSpan="full">
    <Card><CardContent>Full-width analytics hero</CardContent></Card>
  </GridItem>
  <GridItem colSpan={2}>
    <Card><CardContent>Key metric</CardContent></Card>
  </GridItem>
  <GridItem rowSpan={2}>
    <Card><CardContent>Large chart</CardContent></Card>
  </GridItem>
</Grid>

#Parent layout and supported props

Inside VStack, set the parent to align="stretch" so the grid fills the content column. The min prop sets minimum track size, not a column count; numbers are pixel sizes. There is no columns prop. Use templateColumns for explicit tracks, and test small screens before fixing the number of columns.

Grid and GridItem can shrink inside other layouts without letting a wide child's intrinsic width enlarge the page. Use a component with its own horizontal scroll surface, such as Table or ScrollArea, for wide content. Use GridItem colSpan="full" to span the available tracks at every screen size.

#Nested grids

Each Grid owns its alignment, track templates, auto-flow, minimum size, and gap. An outer alignItems="start" does not disable stretching inside a nested Grid; a nested ScrollArea can therefore fill a bounded row and scroll. Inner grids also keep auto-fit columns unless their own templateColumns prop is supplied.

Import ScrollArea, VStack, and Text alongside Grid and Card from @froggdesign/enter-ui-react.

#Accessibility

Grid is layout-only. Use semantic children inside it for cards, lists, or sections.

#API

• min accepts:
  • a number or CSS size for all viewports
  • or an object with breakpoint keys (base, sm, md, lg, xl) for responsive widths
• gap accepts:
  • a number or CSS size for all viewports
  • or an object with breakpoint keys (base, sm, md, lg, xl) for responsive spacing
• alignItems maps to CSS align-items.
• justifyItems maps to CSS justify-items.
• autoFlow accepts "row" | "column" | "dense" | "row dense" | "column dense".
• templateColumns accepts a CSS track string or a breakpoint object (base, sm, md, lg, xl) and maps to CSS grid-template-columns.
• templateRows maps to CSS grid-template-rows.
• GridItem (child component) accepts:
  • colSpan as number or "full" for grid-column.
  • rowSpan as number for grid-row.
• Extends div props.

#Styling

Every exported component accepts className when it renders an element. EnterUI styles use .eui-* classes and --eui-* variables mapped from FroggDesign theme tokens.

#Responsive explicit tracks

Use a single column on narrow screens and a fixed secondary panel on desktop. templateColumns now accepts the same breakpoint keys as min and gap, with the closest earlier supplied value as the fallback. Breakpoints are sm 640px, md 768px, lg 1024px, and xl 1280px. Without a base value, Grid keeps its default auto-fit columns until the first supplied breakpoint. Scalar strings retain their existing behavior. Nested grids reset these tracks rather than inheriting their parent's responsive configuration.

<Grid
  alignItems="start"
  gap={24}
  templateColumns={{ base: "minmax(0, 1fr)", lg: "minmax(0, 1fr) 280px" }}
>
  <Card><CardContent>Primary workspace</CardContent></Card>
  <Card><CardContent>Action panel</CardContent></Card>
</Grid>

Grid retains DOM and keyboard order at every width. Put the primary task first and keep the secondary task reachable by a named anchor when the layout stacks.