New to KendoReact? Learn about KendoReact Free.

GridStackedLayoutSettings

Updated on Jan 12, 2026

Configuration for the stacked layout mode in the Grid.

The stacked layout renders each data row as a card with field label/value pairs arranged in a CSS Grid layout.

Name Type Default Description

Name	Type	Default	Description
cols?	`number \| string \| number \| GridStackedColSize[]`	`1`	Defines the number of columns in the stacked layout. When a `number`, creates that many equal-width columns. When an `array`, the length defines the column count and values define widths. tsx `// Two equal columns <Grid stackedLayoutSettings={{ cols: 2 }} /> // Three columns with custom widths using fr units <Grid stackedLayoutSettings={{ cols: ['1fr', '2fr', '1fr'] }} /> // Two columns with pixel and fraction widths <Grid stackedLayoutSettings={{ cols: [{ width: 200 }, { width: '1fr' }] }} />`

cols?


number | string | number | GridStackedColSize[]

Defines the number of columns in the stacked layout.

When a number, creates that many equal-width columns.
When an array, the length defines the column count and values define widths.

tsx

// Two equal columns
<Grid stackedLayoutSettings={{ cols: 2 }} />

// Three columns with custom widths using fr units
<Grid stackedLayoutSettings={{ cols: ['1fr', '2fr', '1fr'] }} />

// Two columns with pixel and fraction widths
<Grid stackedLayoutSettings={{ cols: [{ width: 200 }, { width: '1fr' }] }} />