XDSGridSpan@xds/core · Grid
Preview coming soon

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

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

Import

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

Props

PropTypeDescription
columns
number | 'full'Columns to span; use `'full'` to span the entire row.
rows
numberRows to span.
children
ReactNodeContent.

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>
  );
}