Layout
Quickly and easily create layouts using the basic 24-column grid.
Basic Layout
Use yh-row and yh-col components to combine layouts via the span attribute.
Column Spacing (Gutter)
Specify the column spacing via the gutter attribute. The default spacing is 0.
Mixed Layout
Arbitrarily extend and combine the basic 24-column grid to form more complex mixed layouts.
Column Offset
Specify the number of columns to offset via the offset attribute.
Alignment
Use the justify attribute to control the horizontal alignment of elements within a row.
Use in Nuxt
Row and Col components perform exceptionally well in Nuxt 3/4 environments. The layout's HTML structure is precisely generated on the server based on parameters like span and gutter, ensuring high stability and responsive consistency for the first screen.
Nuxt Auto Import
SSR Optimized
SSR Notes:
- The 24-column grid class structure is stable in SSR output
- Gutter spacing is derived from row negative margins and column padding, so first paint stays aligned
- Responsive configurations (
xs,sm,md,lg,xl) render deterministically from props - Alignment props such as
justifyandalignare SSR-safe because they only affect class names
Layout Consistency
Since the Layout components are based entirely on CSS Flexbox styling, they naturally provide SSR-stable output. In Nuxt pages, Row and Col rarely need any client-only handling.
API
Props
Row Props
| Prop | Description | Type | Default |
|---|---|---|---|
| tag | Custom element tag | string | 'div' |
| gutter | Grid spacing | number | 0 |
| justify | Horizontal alignment | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'start' |
| align | Vertical alignment | 'top' | 'middle' | 'bottom' | 'top' |
| theme-overrides | Component-level theme overrides | ComponentThemeVars | undefined |
Col Props
| Prop | Description | Type | Default |
|---|---|---|---|
| tag | Custom element tag | string | 'div' |
| span | Number of grid columns occupied | number | 24 |
| offset | Number of grid columns to offset from the left | number | 0 |
| push | Number of grid columns to move right | number | 0 |
| pull | Number of grid columns to move left | number | 0 |
| xs | Responsive columns or responsive config for <768px | number | YhColResponsiveValue | {} |
| sm | Responsive columns or responsive config for >=768px | number | YhColResponsiveValue | {} |
| md | Responsive columns or responsive config for >=992px | number | YhColResponsiveValue | {} |
| lg | Responsive columns or responsive config for >=1200px | number | YhColResponsiveValue | {} |
| xl | Responsive columns or responsive config for >=1920px | number | YhColResponsiveValue | {} |
| theme-overrides | Component-level theme overrides | ComponentThemeVars | undefined |
Events
Both YhRow and YhCol currently do not expose component events.
Slots
| Component | Slot Name | Description |
|---|---|---|
YhRow | default | Row content |
YhCol | default | Column content |
Expose
YhRow and YhCol currently do not expose public instance methods or properties.
Theme Variables
Row and Col are primarily layout primitives based on Flexbox and currently do not define dedicated component-level CSS variables. They still accept themeOverrides for consistency with the library theme system, but no exclusive variable table is consumed in source.
Type Exports
This page documents the grid primitives YhRow and YhCol. Container-family exports such as YhContainer, YhHeader, YhAside, YhMain, and YhFooter are exported from the container module and documented on the Container page.
| Name | Description |
|---|---|
YhRowProps | Props type for YhRow |
YhRowSlots | Slots type for YhRow |
YhRowJustify | Row justify union |
YhRowAlign | Row align union |
YhRowContext | Injected row context type |
YhRowInstance | Public instance type for YhRow |
YhColProps | Props type for YhCol |
YhColSlots | Slots type for YhCol |
YhColResponsiveValue | Responsive column config type |
YhColInstance | Public instance type for YhCol |