Note

This documentation describes the GridLayout Vue component for native UI views, for Xml templates see grid-layout.

GridLayout

A CSS Grid layout container with responsive breakpoint support and a simplified DSL for column/row templates.

Import

import { GridLayout } from '@neos/design-system'

Props

All props default to '' (empty, meaning the CSS property is not set).

Template DSL

The rows, columns, and rowsAuto props accept a space-separated string with the following shorthand values:

DSL value	CSS equivalent
`*`	`minmax(0, 1fr)` — flexible fraction
`2*`	`minmax(0, 2fr)` — double fraction
`fit`	`max-content` — fit to content
`200` (bare number)	`200px` — fixed pixels
Any valid CSS track	Passed through as-is

Column/Row Template Props

Prop	Notes
`columns`	Default column template
`columnsSmall`	Overrides `columns` on small screens
`columnsMedium`	Overrides `columns` on medium screens
`columnsLarge`	Overrides `columns` on large screens
`columnsExtralarge`	Overrides `columns` on extra-large screens
`rows`	Default row template
`rowsSmall` / `rowsMedium` / `rowsLarge` / `rowsExtralarge`	Responsive row overrides
`rowsAuto`	Auto-generated row size (for implicit rows)
`rowsAutoSmall` / `rowsAutoMedium` / `rowsAutoLarge` / `rowsAutoExtralarge`	Responsive auto-row overrides

Gap Props

Prop	Type	Description
`gap`	`Space`	Default gap between cells
`gapSmall` / `gapMedium` / `gapLarge` / `gapExtralarge`	`Space`	Responsive gap overrides

Slots

Slot	Description
`default`	Grid cell children. Use `v-neos-grid:colspan="n"` on children to control column span

Usage Examples

Two equal columns

<GridLayout columns="* *" gap="medium">
  <StringFormField property-name="firstName" />
  <StringFormField property-name="lastName" />
</GridLayout>

Three columns: fixed | flexible | fit-content

<GridLayout columns="200 * fit" gap="small">
  <div>Sidebar</div>
  <div>Main content</div>
  <div>Aside</div>
</GridLayout>

Responsive: 1 column on small screens, 3 on large

<GridLayout columns-small="*" columns-large="* * *" gap="medium">
  <Card v-for="item in items" :key="item.id">...</Card>
</GridLayout>

Child spanning multiple columns

<GridLayout columns="* * *" gap="small">
  <StringFormField property-name="title" v-neos-grid:colspan="3" />
  <StringFormField property-name="firstName" />
  <StringFormField property-name="lastName" />
  <StringFormField property-name="email" />
</GridLayout>

Use v-neos-grid on child elements to control colspan and rowspan.

Table of Contents