Marble UI
← Components

Grid / Simple Grid

Preview: Auto-fit

Grid recipes. `minItemWidth` makes a responsive auto-fit grid (no breakpoints needed); `cols` gives a fixed column count; GridItem spans columns/rows.

Import

import { Grid, GridItem } from '@marbleui/ui'

Props

<Grid>

PropTypeDefaultDescription
colsnumber—
gapstring'1rem'
minItemWidthstring—

Also accepts HTML element props (278).

<GridItem>

PropTypeDefaultDescription
colSpannumber | 'full'—
rowSpannumber—

Also accepts HTML element props (278).

Usage notes

CSS grid with two recipes: minItemWidth for a responsive grid that adds columns as space allows, with no breakpoints, or cols for a fixed column count. GridItem spans columns and rows. For one row or column use Stack; for marketing feature tiles use BentoGrid.

<Grid minItemWidth="16rem" gap="1.5rem">
  {projects.map((p) => <ProjectCard key={p.id} project={p} />)}
</Grid>
<Grid cols={4}>
  <GridItem colSpan={2} rowSpan={2}><RevenueChart /></GridItem>
  <GridItem colSpan="full"><ActivityTable /></GridItem>
</Grid>
  • With minItemWidth, columns never get narrower than that value unless the container itself is narrower. Empty tracks collapse, so two or three items stretch to fill the row. It takes priority if cols is also set.
  • The column template is an inline style, so breakpoint classes like md:grid-cols-2 can’t override cols. Use minItemWidth when the layout must respond to width.
  • gap is any CSS length string (default '1rem'), unlike Stack’s numeric steps.
Example source · show
import { Grid, GridItem } from './grid'

const Cell = ({ t, className }: { t: string; className?: string }) => <div className={`grid min-h-16 place-items-center rounded-lg border border-dashed border-border-strong bg-surface-muted text-xs text-fg-muted ${className ?? ''}`}>{t}</div>
export const styles = {
  'Auto-fit': () => <div className="w-[36rem] max-w-full resize-x overflow-auto rounded-xl border border-border p-3"><Grid minItemWidth="9rem">{Array.from({ length: 7 }, (_, i) => <Cell key={i} t={`Item ${i + 1}`} />)}</Grid><p className="mt-2 text-xs text-fg-subtle">Drag the corner to resize: columns reflow without breakpoints.</p></div>,
  Spans: () => <Grid cols={4} className="w-[32rem]"><GridItem colSpan={2} rowSpan={2}><Cell t="2×2" className="h-full" /></GridItem><Cell t="1" /><Cell t="1" /><GridItem colSpan={2}><Cell t="span 2" /></GridItem><GridItem colSpan="full"><Cell t="full width" /></GridItem></Grid>,
}

Source: packages/ui/src/grid/grid.tsx

Catalog

Category
layout
Priority
Extra
Primitive
custom