pnpm add @wandercom/design-system-web

import { Grid, GridItem } from '@wandercom/design-system-web/ui/grid';

export function Example() {
  return (
    <Grid>
      <GridItem span={4}>Main content</GridItem>
      <GridItem span={4}>Secondary content</GridItem>
    </Grid>
  );
}

The Grid component offers two layout variants designed for different content needs. Choose the variant that best matches your content structure and responsive requirements.

Use the default layout for general page content like articles, marketing pages, and standard application layouts. This variant provides a flexible 12-column grid at desktop sizes, making it ideal for traditional web layouts with main content and sidebars.

<Grid layout="default">
  <GridItem span={{ base: 2, lg: 6 }}>Article content</GridItem>
  <GridItem span={{ base: 2, lg: 2 }}>Sidebar</GridItem>
</Grid>

Column configuration:

• Mobile (base): 2 columns
• Tablet (md): 6 columns
• Desktop (lg): 12 columns
• Max width: 1832px

Use the wide layout specifically for Wander property listings and similar content requiring fine-grained column control. This variant provides up to 7 columns at the largest breakpoint, optimized for displaying multiple property cards in a grid.

Perfect for property grids, photo galleries, or any content where you need precise control over column spans across a wide range of breakpoints.

<Grid layout="wide">
  <GridItem span={{ base: 2, md: 2, lg: 3, '3xl': 2 }}>Property card</GridItem>
  <GridItem span={{ base: 2, md: 1, lg: 1, '3xl': 2 }}>Property card</GridItem>
</Grid>

Column configuration:

• Mobile (base): 2 columns
• Tablet (md): 3 columns
• Desktop (lg): 4 columns
• Large (xl): 5 columns
• Extra large (3xl): 6 columns
• Wide (4xl): 7 columns
• Max width: 1832px

Use the start prop to position content at specific column positions. This is particularly useful for centering article content or creating asymmetric layouts.

<Grid>
  <GridItem span={{ base: 2, lg: 4 }} start={{ base: 1, lg: 3 }}>
    Centered article content
  </GridItem>
</Grid>

Display Wander property listings in a responsive grid with optimal card sizing across breakpoints:

<Grid layout="wide">
  {properties.map((property) => (
    <GridItem key={property.id} span={{ base: 2, md: 1, lg: 1, xl: 1 }}>
      <PropertyCard {...property} />
    </GridItem>
  ))}
</Grid>