Grid

A responsive grid layout container for organizing content in rows and columns with spatial navigation support.

Import

import { Grid } from '@smart-tv/ui';

Basic Usage

Create a basic grid layout with cards or content items.

<Grid focusKey="movie-grid" columns={4}>
  {movies.map((movie) => (
    <Card key={movie.id} focusKey={`movie-${movie.id}`}>
      <CardContent>
        <img src={movie.poster} alt={movie.title} />
        <h3>{movie.title}</h3>
      </CardContent>
    </Card>
  ))}
</Grid>

Responsive Columns

Adapt grid columns based on screen size.

<Grid
  focusKey="responsive-grid"
  columns={{ sm: 2, md: 3, lg: 4, xl: 6 }}
  gap={4}
>
  {items.map((item) => (
    <Card key={item.id} focusKey={`item-${item.id}`}>
      {item.content}
    </Card>
  ))}
</Grid>

Custom Spacing

Control spacing between grid items.

<Grid
  focusKey="spaced-grid"
  columns={3}
  gap={8}
  className="p-4"
>
  <Card focusKey="item-1">Item 1</Card>
  <Card focusKey="item-2">Item 2</Card>
  <Card focusKey="item-3">Item 3</Card>
</Grid>

Auto-fit Layout

Automatically fit items based on minimum width.

<Grid
  focusKey="autofit-grid"
  autoFit="minmax(200px, 1fr)"
  gap={4}
>
  {items.map((item, idx) => (
    <Card key={idx} focusKey={`item-${idx}`}>
      {item}
    </Card>
  ))}
</Grid>

Focus Boundary

Contain focus within the grid for better navigation control.

<Grid
  focusKey="bounded-grid"
  columns={3}
  isFocusBoundary={true}
  focusBoundaryDirections={['left', 'right']}
>
  <Card focusKey="item-1">Item 1</Card>
  <Card focusKey="item-2">Item 2</Card>
  <Card focusKey="item-3">Item 3</Card>
</Grid>

Props

Prop	Type	Default	Description
focusKey	string	required	Unique identifier
columns	number \| object	3	Number of columns or responsive config
gap	number	4	Gap between items (in spacing units)
autoFit	string	-	CSS grid auto-fit value
isFocusBoundary	boolean	false	Contain focus within grid
focusBoundaryDirections	array	-	Directions to block focus escape
className	string	-	Additional CSS classes
children	ReactNode	-	Grid items

Best Practices

Use consistent card sizes for better visual alignment
Set appropriate gap values for comfortable navigation
Consider using responsive columns for different screen sizes
Enable focus boundary for better navigation control in sections
Use auto-fit for dynamic content with varying item counts