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 dan gap bisa berupa object per breakpoint agar grid tetap responsif tanpa media query manual.

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>

#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 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.