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 ratios generate corresponding CSS class names on the server.
- ✅ Gutter spacing is perfectly realized via server-side negative margins and padding, ensuring no alignment jitter on the first screen.
- ✅ Responsive configurations (xs, sm, md, lg, xl) generate corresponding media query classes on the server.
- ✅ Alignment (justify) and vertical alignment (align) take effect on the server.
Layout Consistency
Since the Layout components are based entirely on CSS (Flexbox) styling, they inherently possess 100% SSR consistency. You rarely need to worry about hydration mismatches when using Row/Col in Nuxt pages.
API
Row Props
| Prop | Description | Type | Default |
|---|---|---|---|
| gutter | Grid spacing | number | 0 |
| tag | Custom element tag | string | 'div' |
| justify | Horizontal alignment | 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'start' |
| align | Vertical alignment | 'top' | 'middle' | 'bottom' | 'top' |
Col Props
| Prop | Description | Type | Default |
|---|---|---|---|
| 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 grid columns or attribute object for <768px | number | object | — |
| sm | Responsive grid columns or attribute object for ≥768px | number | object | — |
| md | Responsive grid columns or attribute object for ≥992px | number | object | — |
| lg | Responsive grid columns or attribute object for ≥1200px | number | object | — |
| xl | Responsive grid columns or attribute object for ≥1920px | number | object | — |
| tag | Custom element tag | string | 'div' |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| — | This component currently has no custom events | — |
Slots
| Slot Name | Description |
|---|---|
| default | Custom content |
Expose
| Name | Description | Type |
|---|---|---|
| — | This component currently has no exposed properties | — |
Theme Variables
Row/Col components are primarily based on Flex layout and currently have no specific component-level global CSS variables.
| Variable | Description | Default |
|---|---|---|
| — | None | — |