Grid

Based on CSS Grid, this layout component offers powerful 2D layout capabilities compared to Row/Col Flex layouts.

Basic Usage

Set cols to define columns and gap for spacing.

1

2

3

Basic Usage

Column Span

Use span to set how many columns a GridItem spans.

span=2

span=3

span=1

span=6 (full row)

Column Span

Offset

Use offset to set column offset.

A

B (offset=2)

Offset

Different Gaps

gap accepts an array [rowGap, colGap] for separate row and column gaps.

1

2

3

4

5

6

7

8

Different Gaps

Custom Column Template

When cols is a string, it's used directly as CSS grid-template-columns value.

200px

1fr

200px

Custom Column Template

Suffix Element

Set suffix to pin a GridItem to the end of the row.

Content

Suffix

Suffix Element

Use in Nuxt

Grid fully supports Nuxt 3/4 SSR rendering. The example below demonstrates a product list page using Grid layout with useFetch for async data loading.

Product List

Product 1

$ 99.9

Product 2

$ 199.8

Product 3

$ 299.7

Product 4

$ 399.6

Use in Nuxt

SSR Notes:

• ✅ All Props and styles fully supported
• ✅ CSS Grid layout renders correctly
• ✅ Slot content renders completely
• ✅ String cols template mode outputs correctly
• ✅ span, offset, suffix positioning props work perfectly

SSR Safety

Grid component has passed complete SSR tests, ensuring consistent rendering between server and client with no Hydration errors.

API

Grid Props

Prop	Description	Type	Default
cols	Columns count or CSS template	number | string	12
gap	Gap	number | string | [number | string, number | string]	0
colGap	Column gap (overrides gap)	number | string	0
rowGap	Row gap (overrides gap)	number | string	0
collapsed	Collapsed	boolean	false
collapsedRows	Collapsed visible rows	number	1
justifyItems	Horizontal alignment	'start' | 'end' | 'center' | 'stretch'	—
alignItems	Vertical alignment	'start' | 'end' | 'center' | 'stretch'	—
themeOverrides	Theme overrides	ComponentThemeVars	—

GridItem Props

Prop	Description	Type	Default
span	Column span	number	1
offset	Column offset	number	0
suffix	Suffix element (pinned to row end)	boolean	false
themeOverrides	Theme overrides	ComponentThemeVars	—

Slots

Both Grid and GridItem support the default slot.

Theme Variables

Grid component supports the following CSS variables for theme customization:

Grid Variables

Variable Name	Description	Default
--yh-grid-gap	Grid gap	0
--yh-grid-col-gap	Grid column gap	var(--yh-grid-gap, 0)
--yh-grid-row-gap	Grid row gap	var(--yh-grid-gap, 0)

GridItem Variables

Variable Name	Description	Default
--yh-grid-item-padding	Item padding	0