Vueland

English

Русский

English

Русский

Appearance

CRow ​

A flex container that forms a row in the 12-column grid system. Works together with CCol to build responsive layouts.

Alignment ​

Control vertical alignment of columns via align and horizontal distribution via justify.

align="start" · justify="start"
60px
90px
50px
align="center" · justify="center"
60px
90px
50px
align="end" · justify="space-between"
60px
90px
50px
Show code
vue
<template>
  <!-- align="start" · justify="start" -->
  <c-row align="start" justify="start">
    <c-col cols="2"><div style="height:60px">…</div></c-col>
    <c-col cols="2"><div style="height:90px">…</div></c-col>
    <c-col cols="2"><div style="height:50px">…</div></c-col>
  </c-row>

  <!-- align="center" · justify="center" -->
  <c-row align="center" justify="center"> … </c-row>

  <!-- align="end" · justify="space-between" -->
  <c-row align="end" justify="space-between"> … </c-row>
</template>

Dashboard layout example ​

A full responsive layout using CRow + CCol: stat cards, a bar chart, and a sidebar — all in one grid.

$24.8k
Revenue
↑ 12%
1 204
Orders
↑ 8%
8 391
Users
↑ 3%
37
Returns
↓ 2%
RevenueLast 7 days
Mon
Tue
Wed
Thu
Fri
Sat
Sun
Top Products
Headphones
68%
Smart Watch
49%
Camera
34%
Speaker
21%
Show code
vue
<template>
  <!-- Stats: 2 cols on mobile, 4 on md+ -->
  <c-row class="mb-4">
    <c-col v-for="stat in stats" :key="stat.label" cols="6" md="3">
      <c-card>…</c-card>
    </c-col>
  </c-row>

  <!-- Chart + sidebar: full width on mobile, 8/4 on md+ -->
  <c-row>
    <c-col cols="12" md="8">
      <c-card>…chart…</c-card>
    </c-col>
    <c-col cols="12" md="4">
      <c-card>…top products…</c-card>
    </c-col>
  </c-row>
</template>

Responsive alignment ​

Each alignment prop has a per-breakpoint variant that overrides the base value from that viewport width upward (mobile-first):

vue
<template>
  <c-row align="start" :align-md="'center'" :justify-lg="'space-between'">
    <c-col cols="12" md="6">A</c-col>
    <c-col cols="12" md="6">B</c-col>
  </c-row>
</template>

No gutter ​

Remove the default column gutter with no-gutter:

vue
<template>
  <c-row no-gutter>
    <c-col cols="6">A</c-col>
    <c-col cols="6">B</c-col>
  </c-row>
</template>

Props ​

Prop
Type
Default
Description
align
'start' | 'center' | 'end' | 'baseline' | 'stretch'
null
Vertical alignment of columns (align-items)
align-content
'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch'
null
Alignment of wrapped rows (align-content)
justify
'start' | 'center' | 'end' | 'space-between' | 'space-around'
null
Horizontal distribution of columns (justify-content)
no-gutter
boolean
false
Removes the gap between columns

Responsive alignment props ​

For each breakpoint (xs, sm, md, lg, xl, xxl) the following props are available:

Prop
Type
Description
align-xs … align-xxl
same as align
Override align from that breakpoint upward
align-content-xs … align-content-xxl
same as align-content
Override align-content from that breakpoint upward
justify-xs … justify-xxl
same as justify
Override justify from that breakpoint upward

Breakpoint defaults: xs ≥ 0 px · sm ≥ 600 px · md ≥ 960 px · lg ≥ 1280 px · xl ≥ 1920 px · xxl ≥ 2560 px.

Custom breakpoint names configured through @vueland/utils-jit do not become new alignment props. Use generated utility classes instead, for example class="tablet:justify-center tablet:items-center".

CSS variables ​

CRow does not define its own CSS variables. Grid gutters are generated from the SCSS breakpoint map and can be changed through @vueland/utils-jit breakpoint configuration.

Slots ​

Slot
Description
default
Column components (CCol) or any other content

See also ​