Display

// Flex container
WDiv(className: 'flex gap-4', children: [...])

// Grid container
WDiv(className: 'grid grid-cols-3', children: [...])

// Hidden element
WDiv(className: 'hidden', child: ...)

Basic Usage#

Block#

Use block to create a standard block-level element. In Wind, this is the default behavior of WDiv (rendering a Container or SizedBox).

WDiv(
  className: 'block p-4 bg-white',
  child: WText('This is a block element'),
)

Flex#

Use flex to create a flex container. This enables Flexbox layout properties (like flex-row, items-center, justify-between).

WDiv(
  className: 'flex items-center space-x-4',
  children: [
    WDiv(className: 'w-10 h-10 bg-blue-500'),
    WText('Flex item'),
  ],
)

Grid#

Use grid to create a grid container. This enables Grid layout properties (like grid-cols-3, gap-4).

WDiv(
  className: 'grid grid-cols-3 gap-4',
  children: [
    WDiv(className: 'h-20 bg-blue-100'),
    WDiv(className: 'h-20 bg-blue-200'),
    WDiv(className: 'h-20 bg-blue-300'),
  ],
)

Wrap#

Use wrap to create a wrapping container. This renders a Flutter Wrap widget.

WDiv(
  className: 'wrap gap-2',
  children: [
    WChip('React'),
    WChip('Flutter'),
    WChip('Vue'),
  ],
)

Hidden#

Use hidden to remove an element from the visual tree. This renders a SizedBox.shrink() (effectively 0x0 size).

WDiv(
  className: 'hidden',
  child: WText('This will not appear'),
)

Quick Reference#

Responsive Design#

Prefix any display utility with a breakpoint variant like md: to apply it only at specific screen sizes.

// Hidden on mobile, Flex on medium screens and up
WDiv(
  className: 'hidden md:flex gap-4',
  children: [...],
)

// Block on mobile, Hidden on large screens
WDiv(
  className: 'block lg:hidden',
  child: ...,
)

Dark Mode#

Prefix any display utility with dark: to apply it only when dark mode is active.

// Visible only in dark mode
WDiv(
  className: 'hidden dark:block',
  child: WText('Dark Mode Active'),
)

State Variants#

Prefix utilities with state variants like hover:, focus:, or active: to conditionally apply display modes.

// Show element on hover
WDiv(
  className: 'hidden group-hover:block',
  child: ...,
)

Arbitrary Values#

The display utility does not support arbitrary values. You must use one of the predefined keywords (block, flex, grid, wrap, hidden).

Customizing Theme#

Display utilities are structural and cannot be customized via WindThemeData. They map directly to Flutter widgets (Row, Column, Wrap, GridView).

Related Documentation#

• Flexbox - Layout direction, alignment, and sizing for flex containers.
• Grid - Column definitions and gaps for grid containers.