Grid System
Quickly and easily create layouts with the basic 12-column.
TIP
The component uses flex layout by default, no need to set type="flex" manually.
Please note that the parent container should avoid using inline related styles, which will cause the component to not fill up its width.
Basic
<template>
<b-row>
<b-col span="12">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
col-12
</div>
</b-col>
<b-col span="6">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col-6
</div>
</b-col>
<b-col span="6">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col-6
</div>
</b-col>
<b-col span="4">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col-4
</div>
</b-col>
<b-col span="4">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col-4
</div>
</b-col>
<b-col span="4">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col-4
</div>
</b-col>
<b-col span="auto">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4 px-4"
>
col-auto
</div>
</b-col>
<b-col>
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col
</div>
</b-col>
</b-row>
</template>
Spacing
Row provides gutter attribute to specify spacings between columns, and its default value is 6.
<template>
<b-row>
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-default
</div>
</b-col>
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-default
</div>
</b-col>
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-default
</div>
</b-col>
</b-row>
<b-row :gutter="0" class="mt-4">
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-0
</div>
</b-col>
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-0
</div>
</b-col>
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-0
</div>
</b-col>
</b-row>
<b-row :gutter="4" class="mt-4">
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-4
</div>
</b-col>
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-4
</div>
</b-col>
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-4
</div>
</b-col>
</b-row>
<b-row :gutter="8" class="mt-4">
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-8
</div>
</b-col>
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-8
</div>
</b-col>
<b-col span="4">
<div class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center">
gutter-8
</div>
</b-col>
</b-row>
</template>
Alignment
Default use the flex layout to make flexible alignment of columns.
You can define the layout of child elements by setting justify attribute with start, center, end, space-between, space-around or space-evenly.
<template>
<b-row class="b-bg-neutral-2">
<b-col span="auto" md="2">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
default
</div>
</b-col>
<b-col span="auto" md="4">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
default
</div>
</b-col>
<b-col span="auto" md="2">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
default
</div>
</b-col>
</b-row>
<b-row justify="center" class="b-bg-neutral-2 mt-4">
<b-col span="auto" md="2">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
center
</div>
</b-col>
<b-col span="auto" md="4">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
center
</div>
</b-col>
<b-col span="auto" md="2">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
center
</div>
</b-col>
</b-row>
<b-row justify="end" class="b-bg-neutral-2 mt-4">
<b-col span="auto" md="2">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
end
</div>
</b-col>
<b-col span="auto" md="4">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
end
</div>
</b-col>
<b-col span="auto" md="2">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
end
</div>
</b-col>
</b-row>
<b-row class="b-bg-neutral-2 mt-4">
<b-col span="auto" md="3">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
default
</div>
</b-col>
<b-col md="6">
<div
class="b-bg-neutral-3 h-100px rd-sm flex items-center justify-center px2"
>
default
</div>
</b-col>
<b-col span="auto" md="3">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
default
</div>
</b-col>
</b-row>
<b-row items="center" class="b-bg-neutral-2 mt-4">
<b-col span="auto" md="3">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
center
</div>
</b-col>
<b-col md="6">
<div
class="b-bg-neutral-3 h-100px rd-sm flex items-center justify-center px2"
>
center
</div>
</b-col>
<b-col span="auto" md="3">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
center
</div>
</b-col>
</b-row>
<b-row items="end" class="b-bg-neutral-2 mt-4">
<b-col span="auto" md="3">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
end
</div>
</b-col>
<b-col md="6">
<div
class="b-bg-neutral-3 h-100px rd-sm flex items-center justify-center px2"
>
end
</div>
</b-col>
<b-col span="auto" md="3">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center px2"
>
end
</div>
</b-col>
</b-row>
</template>
Order
Columns can be re-arranged by set order value.
<template>
<b-row>
<b-col :order="2">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col #1
</div>
</b-col>
<b-col :order="3">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col #2
</div>
</b-col>
<b-col :order="1">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col #3
</div>
</b-col>
</b-row>
</template>
Responsive
Set different column spans for each breakpoints. Resize browser to see them in action.
<template>
<b-row>
<b-col span="6" :sm="4" :md="6" :lg="2" :xl="0">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col #1
</div>
</b-col>
<b-col span="6" :sm="6" :md="2" :lg="2" :xl="0">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col #2
</div>
</b-col>
<b-col :sm="2" :md="4" :lg="8" :xl="0">
<div
class="b-bg-neutral-3 h-10 rd-sm flex items-center justify-center mt-4"
>
col #3
</div>
</b-col>
</b-row>
</template>
Row Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|
| gutter | grid spacing | number | — | 6 |
| justify | horizontal alignment of flex layout | string | start/center/end/space-around/space-between/space-evenly | start |
| items | vertical alignment of flex layout | string | start/center/end | start |
| tag | custom element tag | string | * | div |
Row Slots
| Name | Description | Subtags |
|---|
| — | customize default content | Col |
Col Attributes
| Attribute | Description | Type | Accepted Values | Default |
|---|
| span | number of column the grid spans | number | — | 12 |
| order | reorder columns in the grid | number | — | 0 |
| xs | <768px Responsive columns or column props object | number/object (e.g. {span: 4, order: 4}) | — | — |
| sm | ≥768px Responsive columns or column props object | number/object (e.g. {span: 4, order: 4}) | — | — |
| md | ≥992px Responsive columns or column props object | number/object (e.g. {span: 4, order: 4}) | — | — |
| lg | ≥1200px Responsive columns or column props object | number/object (e.g. {span: 4, order: 4}) | — | — |
| xl | ≥1400px Responsive columns or column props object | number/object (e.g. {span: 4, order: 4}) | — | — |
| tag | custom element tag | string | * | div |
Col Slots
| Name | Description |
|---|
| — | customize default content |
