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.
Column Span
Use span to set how many columns a GridItem spans.
Offset
Use offset to set column offset.
Different Gaps
gap accepts an array [rowGap, colGap] for separate row and column gaps.
Custom Column Template
When cols is a string, it's used directly as CSS grid-template-columns value.
Suffix Element
Set suffix to pin a GridItem to the end of the row.
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.9Product 2
$ 199.8Product 3
$ 299.7Product 4
$ 399.6SSR Notes:
- Grid props and inline styles render consistently during SSR.
- CSS Grid layout is emitted directly on the server and preserved after hydration.
- Slot content and positioning props such as span, offset, and suffix remain stable in SSR output.
SSR Safety
Grid component has passed complete SSR tests, ensuring consistent rendering between server and client with no Hydration errors.
API
Props
Grid
| 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' | undefined |
| alignItems | Vertical alignment | 'start' | 'end' | 'center' | 'stretch' | undefined |
| responsive | Responsive breakpoint mode | 'self' | 'screen' | undefined |
| themeOverrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Grid Item
| Prop | Description | Type | Default |
|---|---|---|---|
| span | Column span | number | 1 |
| offset | Column offset | number | 0 |
| suffix | Suffix element (pinned to row end) | boolean | false |
| themeOverrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Events
This component does not expose component events.
Slots
Grid
| Slot | Description | Parameters |
|---|---|---|
| default | Grid content | - |
Grid Item
| Slot | Description | Parameters |
|---|---|---|
| default | Grid item content | - |
Expose
This component does not expose public instance methods or properties.
Theme 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) |
--yh-grid-item-padding | Item padding | 0 |
Type Exports
| Name | Description |
|---|---|
YhGridProps | Props type for YhGrid |
YhGridItemProps | Props type for YhGridItem |
YhGridSlots | Slots type for YhGrid |
YhGridItemSlots | Slots type for YhGridItem |
YhGridInstance | Public instance type for YhGrid |
YhGridItemInstance | Public instance type for YhGridItem |