Grid

Uses a 24-grid system, dividing the area into 24 equal parts.

Basic Usage

col-12

col-8

col-6

<template>
  <div class="demo-grid">
    <b-row>
      <b-col span="12">col-12</b-col>
      <b-col span="12">col-12</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="8">col-8</b-col>
      <b-col span="8">col-8</b-col>
      <b-col span="8">col-8</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="6">col-6</b-col>
      <b-col span="6">col-6</b-col>
      <b-col span="6">col-6</b-col>
      <b-col span="6">col-6</b-col>
    </b-row>
  </div>
</template>

Gutter

GridGutter：

81624

col-6

<template>
  <div class="demo-grid">
    <b-space>
      <span>GridGutter：</span>
      <b-radio-group v-model="gutter" size="small" type="capsule">
        <b-radio :label="8">8</b-radio>
        <b-radio :label="16">16</b-radio>
        <b-radio :label="24">24</b-radio>
      </b-radio-group>
    </b-space>

    <b-row :gutter="gutter" class="gutter">
      <b-col span="6">
        <div>col-6</div>
      </b-col>
      <b-col span="6">
        <div>col-6</div>
      </b-col>
      <b-col span="6">
        <div>col-6</div>
      </b-col>
      <b-col span="6">
        <div>col-6</div>
      </b-col>
    </b-row>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const gutter = ref(8)
</script>

Grid Order

1 | order-4

2 | order-3

3 | order-2

4 | order-1

<template>
  <div class="demo-grid">
    <b-row type="flex">
      <b-col span="6" order="4">1 | order-4</b-col>
      <b-col span="6" order="3">2 | order-3</b-col>
      <b-col span="6" order="2">3 | order-2</b-col>
      <b-col span="6" order="1">4 | order-1</b-col>
    </b-row>
  </div>
</template>

Grid Sequence

Use push and pull to change the grid order.

col-14 | push="10"

col-10 | pull="14"

<template>
  <div class="demo-grid">
    <b-row>
      <b-col span="14" push="10">col-14 | push="10"</b-col>
      <b-col span="10" pull="14">col-10 | pull="14"</b-col>
    </b-row>
  </div>
</template>

Offset

Offset can be used to set the offset amount.

col-8

col-8 | offset-8

col-6 | offset-8

col-6 | offset-4

col-12 | offset-8

<template>
  <div class="demo-grid">
    <b-row>
      <b-col span="8">col-8</b-col>
      <b-col span="8" offset="8">col-8 | offset-8</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="6" offset="8">col-6 | offset-8</b-col>
      <b-col span="6" offset="4">col-6 | offset-4</b-col>
    </b-row>
    <br />
    <b-row>
      <b-col span="12" offset="8">col-12 | offset-8</b-col>
    </b-row>
  </div>
</template>

Flex Layout

子元素向左排Column

col-4

子元素向右排Column

col-4

子元素center排Column

col-4

子元素等宽排Column

col-4

子元素分散排Column

col-4

Top

col-4

底部alignment

col-4

centeralignment

col-4

<template>
  <div class="demo-grid">
    <p>子元素向左排Column</p>
    <b-row type="flex" justify="start" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素向右排Column</p>
    <b-row type="flex" justify="end" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素center排Column</p>
    <b-row type="flex" justify="center" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素等宽排Column</p>
    <b-row type="flex" justify="space-between" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>子元素分散排Column</p>
    <b-row type="flex" justify="space-around" class="code-row-bg">
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
      <b-col span="4">col-4</b-col>
    </b-row>
    <p>Top</p>
    <b-row type="flex" justify="center" align="top" class="code-row-bg">
      <b-col span="4"><p style="height: 80px">col-4</p></b-col>
      <b-col span="4"><p style="height: 30px">col-4</p></b-col>
      <b-col span="4"><p style="height: 100px">col-4</p></b-col>
      <b-col span="4"><p style="height: 60px">col-4</p></b-col>
    </b-row>
    <p>底部alignment</p>
    <b-row type="flex" justify="center" align="bottom" class="code-row-bg">
      <b-col span="4"><p style="height: 80px">col-4</p></b-col>
      <b-col span="4"><p style="height: 30px">col-4</p></b-col>
      <b-col span="4"><p style="height: 100px">col-4</p></b-col>
      <b-col span="4"><p style="height: 60px">col-4</p></b-col>
    </b-row>
    <p>centeralignment</p>
    <b-row type="flex" justify="center" align="middle" class="code-row-bg">
      <b-col span="4"><p style="height: 80px">col-4</p></b-col>
      <b-col span="4"><p style="height: 30px">col-4</p></b-col>
      <b-col span="4"><p style="height: 100px">col-4</p></b-col>
      <b-col span="4"><p style="height: 60px">col-4</p></b-col>
    </b-row>
  </div>
</template>

<style scoped>
.code-row-bg {
  background: #eee;
  p {
    color: #fff;
  }
}
</style>

Responsive Layout

Six preset responsive sizes: xs, sm, md, lg, xl, xxl. See the API for details.

b-col

<template>
  <div class="demo-grid">
    <b-row>
      <b-col :xs="2" :sm="4" :md="6" :lg="8">b-col</b-col>
      <b-col :xs="20" :sm="16" :md="12" :lg="8">b-col</b-col>
      <b-col :xs="2" :sm="4" :md="6" :lg="8">b-col</b-col>
    </b-row>
  </div>
</template>

Row Props

Parameter	Description	Type	Options	Default
gutter	Grid spacing, in px	Number/String	—	0
type	Layout mode, effective in modern browsers	String	flex, or none	—
justify	Horizontal alignment in flex layout	String	—	—
align	Vertical alignment in flex layout	String	start / end / center / space-around / space-between	—
class-name	Custom class name	String	—	—

Col Props

Parameter	Description	Type	Options	Default
span	Number of grid cells to occupy. When 0, equivalent to display:none	Number/String	0~24	-
order	Grid order, effective in flex layout mode	Number/String	-	-
offset	Left offset of the grid	Number/String	-	-
push	Number of cells to push the grid to the right	Number/String	-	-
pull	Number of cells to pull the grid to the left	Number/String	-	-
class-name	Custom class	String	-	-
xs	<576px responsive grid	Number	-	-
sm	(>=576px < 768px) responsive grid	Number	-	-
md	(>=768px < 992px) responsive grid	Number	-	-
lg	(>=992px < 1200px) responsive grid	Number	-	-
xl	(>=1200px < 1600px) responsive grid	Number	-	-
xxl	>=1600px responsive grid	Number	-	-

Grid ​

Basic Usage ​

Gutter ​

Grid Order ​

Grid Sequence ​

Offset ​

Flex Layout ​

Responsive Layout ​

Row Props ​

Col Props ​

Grid

Basic Usage

Gutter

Grid Order

Grid Sequence

Offset

Flex Layout

Responsive Layout

Row Props

Col Props