Dowe

LAYOUT

Grid

Grid creates explicit rows and columns for catalogs, dashboards, galleries, and page structure.

COLUMNS

Create equal tracks

A positive integer creates that many equal columns. Gap separates rows and columns.

Item 1

Item 2

Item 3

dowe
Grid columns:3 gap:4
  Box bg:"success" color:"surface" p:4 rounded:"sm"
    Text
      "Item 1"
  Box bg:"primary" color:"surface" p:4 rounded:"sm"
    Text
      "Item 2"
  Box bg:"muted" p:4 rounded:"sm"
    Text
      "Item 3"

RESPONSIVE COLUMNS

Adapt the structure by width

Responsive columns keep one track on small screens and add tracks as space becomes available.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

dowe
Grid columns:{ xs:1 sm:2 md:3 } gap:4
  Card variant:"outlined" scheme:"surface"
    Text
      "First card"
  Card variant:"outlined" scheme:"surface"
    Text
      "Second card"
  Card variant:"outlined" scheme:"surface"
    Text
      "Third card"

GRID ITEMS

Span multiple tracks

Direct Box and Card children can span columns or rows while the parent Grid keeps ownership of the structure.

Two columns

One column

One column

Two columns

dowe
Grid columns:3 gap:4
  Box colSpan:2 p:4
    Text
      "Two columns"
  Box p:4
    Text
      "One column"

API

Grid props

Grid also accepts the applicable common spacing, sizing, visibility, and accessibility props.

Prop
Type
Default

No data

There are no records to display

Grid item props

colSpan and rowSpan are valid only on a direct Box or Card child of Grid.

Prop
Type
Default

No data

There are no records to display