Grid Template Columns

// Basic grid with 3 columns
WDiv(
  className: 'grid grid-cols-3 gap-4',
  children: [
    WDiv(className: 'bg-blue-500 h-12'),
    WDiv(className: 'bg-blue-500 h-12'),
    WDiv(className: 'bg-blue-500 h-12'),
  ],
)

Basic Usage#

Use grid-cols-{n} to create a grid with n equally sized columns.

This utility must be used alongside the grid class (or inline-grid if supported) to activate the grid layout model.

WDiv(
  className: 'grid grid-cols-4 gap-4',
  children: [
    // ... 4 items per row
  ],
)

Quick Reference#

Responsive#

Prefix grid utilities with breakpoint variants like md: or lg: to change the column count at different screen sizes.

WDiv(
  className: 'grid grid-cols-1 md:grid-cols-3 lg:grid-cols-6 gap-4',
  children: [
    // 1 col on mobile, 3 on tablet, 6 on desktop
  ],
)

Dark Mode#

While column counts rarely change based on theme, you can use dark: if needed.

WDiv(
  className: 'grid grid-cols-2 dark:grid-cols-4',
  children: [...],
)

Arbitrary Values#

Wind supports any integer for grid columns directly in the utility class. You do not need square brackets [] for this property.

// Create a grid with exactly 16 columns
WDiv(
  className: 'grid grid-cols-16 gap-1',
  children: [...],
)

Related Documentation#

• Flexbox & Gap - For gap-{n}, gap-x-{n}, and gap-y-{n} utilities.
• Display - For the grid class.