Vueland

English

Русский

English

Русский

Appearance

CCol ​

A column in the 12-column grid system. Always used inside CRow. Column width is specified as a number from 1 to 12.

Column sizes ​

All 12 columns in action — from 1/12 to full width combinations.

4
4
4
6
6
3
9
1
2
3
4
5
6
7
8
9
10
11
12
Show code
vue
<template>
  <!-- Three equal columns -->
  <c-row>
    <c-col cols="4"><div>4</div></c-col>
    <c-col cols="4"><div>4</div></c-col>
    <c-col cols="4"><div>4</div></c-col>
  </c-row>

  <!-- Two halves -->
  <c-row>
    <c-col cols="6"><div>6</div></c-col>
    <c-col cols="6"><div>6</div></c-col>
  </c-row>

  <!-- Asymmetric -->
  <c-row>
    <c-col cols="3"><div>3</div></c-col>
    <c-col cols="9"><div>9</div></c-col>
  </c-row>
</template>

Responsive product cards ​

Cards stack on mobile, show 2 per row on sm, and 3 on md+.

🎧
Audio
Wireless Headphones
Premium sound with active noise cancellation and 30h battery.
$129
⌚
Wearable
Smart Watch Pro
Health tracking, GPS, and AMOLED display in a slim design.
$249
📸
Camera
Compact Camera
48MP sensor, optical zoom, and 4K video in your pocket.
$399
Show code
vue
<template>
  <c-row>
    <c-col v-for="card in cards" :key="card.id" cols="12" sm="6" md="4">
      <c-card>…</c-card>
    </c-col>
  </c-row>
</template>

Offset and order ​

Offset
cols="4" offset="4"
cols="3"
offset="6"
Order — DOM order: A · B · C
A order 3
B order 1
C order 2
Show code
vue
<template>
  <!-- Offset: center a 4-column block -->
  <c-row>
    <c-col cols="4" offset="4">Centered</c-col>
  </c-row>

  <!-- Order: visually reorder without touching DOM -->
  <c-row>
    <c-col cols="4" order="3">A — shown last</c-col>
    <c-col cols="4" order="1">B — shown first</c-col>
    <c-col cols="4" order="2">C — shown second</c-col>
  </c-row>
</template>

Props ​

Prop
Type
Default
Description
cols
string | number
null
Column span (1–12)
offset
string | number
null
Left offset in columns
order
string | number
null
Visual order (order CSS property)

Responsive props ​

For each breakpoint (xs, sm, md, lg, xl, xxl):

Prop
Type
Description
xs … xxl
string | number
Column span from that breakpoint upward
offset-xs … offset-xxl
string | number
Left offset from that breakpoint upward
order-xs … order-xxl
string | number
Visual order 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 props. Use generated classes for them, for example class="tablet-6" or :class="{ 'tablet-4': compact }".

CSS variables ​

CCol does not define its own CSS variables. Width, offset and order are controlled by generated grid classes.

Slots ​

Slot
Description
default
Column content

See also ​