Note

This documentation describes the v-neos-grid Vue directive for native UI views. For Xml templates see grid-layout.

v-neos-grid

Controls the grid placement of a child element within a GridLayout. Sets CSS custom properties that the parent grid reads to determine column/row span.

Import

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

Syntax

<div v-neos-grid:[arg]="value" />

Arguments & Values

Argument	Value type	Description
colspan	number	Number of columns this element spans (all breakpoints)
colspan-sm	number	Column span at small breakpoint
colspan-md	number	Column span at medium breakpoint
colspan-lg	number	Column span at large breakpoint
colspan-xl	number	Column span at extra-large breakpoint
rowspan	number	Number of rows this element spans
rowspan-sm	number	Row span at small breakpoint
rowspan-md	number	Row span at medium breakpoint
rowspan-lg	number	Row span at large breakpoint
rowspan-xl	number	Row span at extra-large breakpoint

Usage Examples

Full-width field

<GridLayout :columns="3">
  <StringFormField property-name="firstName" v-neos-grid:colspan="1" />
  <StringFormField property-name="lastName" v-neos-grid:colspan="1" />
  <StringFormField property-name="email" v-neos-grid:colspan="1" />
  <StringFormField property-name="notes" v-neos-grid:colspan="3" />
</GridLayout>

Responsive column spans

<GridLayout :columns="4">
  <div v-neos-grid:colspan="4" v-neos-grid:colspan-md="2" v-neos-grid:colspan-sm="4">
    <!-- 4 cols on small, 2 cols on medium, 4 cols on large -->
  </div>
</GridLayout>

Row span for tall elements

<GridLayout :columns="2">
  <div v-neos-grid:rowspan="2" style="background: #eee">Tall content</div>
  <div>Row 1 Col 2</div>
  <div>Row 2 Col 2</div>
</GridLayout>

See Also

• GridLayout