Layout

Grid

Responsive grid at zero runtime cost. Responsive `cols` become inline custom properties that the static stylesheet reads inside fixed media queries — no style computation, no CSS generation, SSR-identical.

Server safeSource

Import

import { Grid } from '@the_viveksingh/vivek-ui'

Auto-fitting grid

Omit cols and the grid fits as many minItemWidth tracks as the container allows. It reflows at every width with no breakpoints to maintain.

One
Two
Three
Four
Five
Six
<Grid minItemWidth="10rem" gap={3}>
  {items.map((item) => (
    <Box key={item} className="tile">
      {item}
    </Box>
  ))}
</Grid>

Responsive column counts

An object maps breakpoints to counts. The values become inline custom properties that the static stylesheet reads, so no CSS is generated at runtime.

One
Two
Three
Four
Five
Six
<Grid cols={{ base: 1, sm: 2, lg: 3 }} gap={3}>
  {items.map((item) => (
    <Box key={item} className="tile">
      {item}
    </Box>
  ))}
</Grid>

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Grid
PropTypeDefaultDescription
asElementType——
colsnumber | ResponsiveCols—Column count. A number is fixed at every width; an object is responsive. Omit it entirely and the grid auto-fits using `minItemWidth`.
minItemWidthstring—Auto-fit track floor when `cols` is omitted. Defaults to `16rem`.
gapStackGap——

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Grid carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.