Grid

Server component, no client JS

ImportCopy Anchor Link

import { Grid, GridItem } from '@nizivo/react/grid';

// Once per app (Getting started), after
// @nizivo/tokens/tokens.css and @nizivo/react/css/base.css
import '@nizivo/react/css/grid.css';

Static or interactiveCopy Anchor Link

Server. It ships no client JavaScript when a Server Component renders it, in every Next.js build mode; its code is bundled only when a client component (a 'use client' file) imports it. How to choose.

In a client app (a Vite or React Router single-page app, or a 'use client' file) it is an ordinary React component: event handlers, refs and state work as usual. In a client app.

ExamplesCopy Anchor Link

import type { JSX } from 'react';
import { Grid, GridItem } from '@nizivo/react/grid';

export function GridExample(): JSX.Element {
  return (
    <Grid>
      {/* Desktop 8 + 4; tablet and mobile take the full row. */}
      <GridItem span={{ base: 'full', lg: 8 }}>Revenue</GridItem>
      <GridItem span={{ base: 'full', lg: 4 }}>Top products</GridItem>
      {/* KPI tiles: one column on mobile, 2 × 2 on tablet, four across on desktop. */}
      <GridItem span={{ base: 'full', sm: 4, lg: 3 }}>Orders</GridItem>
      <GridItem span={{ base: 'full', sm: 4, lg: 3 }}>Visitors</GridItem>
      <GridItem span={{ base: 'full', sm: 4, lg: 3 }}>Conversion</GridItem>
      <GridItem span={{ base: 'full', sm: 4, lg: 3 }}>Average order</GridItem>
    </Grid>
  );
}

PropsCopy Anchor Link

Other exportsCopy Anchor Link

GridItemProps type

import type { GridItemProps } from '@nizivo/react/grid'

The props of GridItem, listed above.

GridItemState type

import type { GridItemState } from '@nizivo/react/grid'

The render state of GridItem, listed above.

GridProps type

import type { GridProps } from '@nizivo/react/grid'

The props of Grid, listed above.

GridResponsiveSpan type

import type { GridResponsiveSpan } from '@nizivo/react/grid'

A span per breakpoint: base is mobile first, sm applies from 40rem (--nz-sm) and lg from 80rem (--nz-lg, provisional). An absent breakpoint keeps the one below it.

Name	Type	Default	Description
base	GridSpan 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full"	–
lg	GridSpan 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full"	–
sm	GridSpan 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full"	–

GridSpan type

import type { GridSpan } from '@nizivo/react/grid'

Columns an item spans, or 'full' for the whole row. Clamped to the columns available.

type GridSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | "full"

GridState type

import type { GridState } from '@nizivo/react/grid'

The render state of Grid, listed above.

Data attributes and slotsCopy Anchor Link

Style parts by class (.nz-<slot>) and state by data attribute. Attribute meanings come from contracts/vocabulary.json.

CSS hooksCopy Anchor Link

Set a hook on the component's class or any ancestor to restyle it without specificity games; leave it unset for the default shown.

This stylesheet reads no public hook.

Layers: nz.components. Classes: .nz-grid, .nz-grid-item.

AccessibilityCopy Anchor Link

Nothing in this component takes focus or keyboard input.

KeyboardCopy Anchor Link

None.

FigmaCopy Anchor Link

Node ids from design/component-map.json, which nz gen writes from component.json. The links open the Nizivo Figma library, which may ask you to sign in.

• Canonical: none
• Ghost masters: none