XDS — Design System

XDSGridSpan@xds/core · Grid

Usage

A CSS grid layout container for arranging children in rows and columns. Use Grid for card galleries, dashboards, and any multi-column layout. Supports fixed column counts and responsive columns that reflow based on available width.

Best practices

Guidance	Practices
Do	Use responsive columns for layouts that should adapt to screen size — `columns={{minWidth: 280}}`.
Do	Cap the column count with `max` to prevent rows from getting too wide on large screens.
Do	Use `repeat: 'fill'` (the default) for consistent item widths. Use `'fit'` when items should stretch to fill leftover space.
Don't	Write manual CSS grid — Grid handles spacing and responsive behavior for you.
Don't	Use `XDSHStack` with wrapping for grids — use Grid instead.

Import

ts
import {XDSGridSpan} from '@xds/core/Grid'

Props

Prop	Type	Description
columns	number \| 'full'	Columns to span; use `'full'` to span the entire row.
rows	number	Rows to span.
children	ReactNode	Content.

Showcase source

tsx
'use client';
import {XDSGrid, XDSGridSpan} from '@xds/core/Grid';
import {XDSCard} from '@xds/core/Card';
import {XDSText} from '@xds/core/Text';
export default function GridSpanShowcase() {
  return (
    <XDSGrid columns={3} gap={3}>
      <XDSGridSpan columns={2}>
        <XDSCard variant="muted" padding={4} height={80}>
          <XDSText type="body" color="secondary">
            Spans 2 columns
          </XDSText>
        </XDSCard>
      </XDSGridSpan>
      <XDSCard variant="muted" padding={4} height={80}>
        <XDSText type="body" color="secondary">
          1 col
        </XDSText>
      </XDSCard>
      <XDSCard variant="muted" padding={4} height={60}>
        <XDSText type="body" color="secondary">
          1 col
        </XDSText>
      </XDSCard>
      <XDSGridSpan columns={2}>
        <XDSCard variant="muted" padding={4} height={60}>
          <XDSText type="body" color="secondary">
            Spans 2 columns
          </XDSText>
        </XDSCard>
      </XDSGridSpan>
      <XDSGridSpan columns="full">
        <XDSCard variant="muted" padding={4} height={60}>
          <XDSText type="body" color="secondary">
            Full-width row
          </XDSText>
        </XDSCard>
      </XDSGridSpan>
    </XDSGrid>
  );
}