Dowe Views Documentation

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

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 select the highest matching breakpoint while the viewport narrows or widens, without requiring a reload.

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

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

RESPONSIVE TRACK COUNTS

Keep the structure portable

Grid columns use an integer from 1 to 12. Responsive values change the number of equal columns at each breakpoint, so the same declaration behaves consistently on web, iOS, and Android.

This responsive example is one column below md and two equal columns from md upward. The gap changes from scale 10 to 16, align:center centers each cell's content, and minH:vh-0 gives the grid a minimum viewport height.

Grid columns:{ xs:1 md:2 } gap:{ xs:10 md:16 } align:"center" minH:"vh-0"
  Box p:4
    Text
      "First column"
  Box p:4
    Text
      "Second column"

Templates such as fr, px, percentages, and auto are not valid Grid column or row values. Use numeric track counts to keep the generated layout portable across all view targets.

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

Two columns

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

No data

No data