Grid

Quickly and easily create layouts with the basic 24-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 layout

Create basic grid layout using columns. With row and col, we can easily manipulate the layout using the span attribute.

col-24

col-12

col-8

col-6

col-4

<template>
  <tu-row>
    <tu-col :span="24">col-24</tu-col>
  </tu-row>
  <tu-row>
    <tu-col :span="12">col-12</tu-col>
    <tu-col :span="12">col-12</tu-col>
  </tu-row>
  <tu-row>
    <tu-col :span="8">col-8</tu-col>
    <tu-col :span="8">col-8</tu-col>
    <tu-col :span="8">col-8</tu-col>
  </tu-row>
  <tu-row>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
  <tu-row>
    <tu-col :span="4">col-4</tu-col>
    <tu-col :span="4">col-4</tu-col>
    <tu-col :span="4">col-4</tu-col>
    <tu-col :span="4">col-4</tu-col>
    <tu-col :span="4">col-4</tu-col>
    <tu-col :span="4">col-4</tu-col>
  </tu-row>
</template>

<style lang="scss" scoped>
.tu-row:not(:last-of-type) {
  margin-bottom: 20px;
}
.tu-col {
  text-align: center;
  min-height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #71757f;
}
.tu-col:nth-of-type(2n + 1) {
  background: rgba(128, 128, 128, 0.2);
}
.tu-col:nth-of-type(2n) {
  background: rgba(128, 128, 128, 0.1);
}
</style>

<template>
  <tu-row>
    <tu-col :span="24">col-24</tu-col>
  </tu-row>
  <tu-row>
    <tu-col :span="12">col-12</tu-col>
    <tu-col :span="12">col-12</tu-col>
  </tu-row>
  <tu-row>
    <tu-col :span="8">col-8</tu-col>
    <tu-col :span="8">col-8</tu-col>
    <tu-col :span="8">col-8</tu-col>
  </tu-row>
  <tu-row>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
  <tu-row>
    <tu-col :span="4">col-4</tu-col>
    <tu-col :span="4">col-4</tu-col>
    <tu-col :span="4">col-4</tu-col>
    <tu-col :span="4">col-4</tu-col>
    <tu-col :span="4">col-4</tu-col>
    <tu-col :span="4">col-4</tu-col>
  </tu-row>
</template>

<style lang="scss" scoped>
.tu-row:not(:last-of-type) {
  margin-bottom: 20px;
}
.tu-col {
  text-align: center;
  min-height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #71757f;
}
.tu-col:nth-of-type(2n + 1) {
  background: rgba(128, 128, 128, 0.2);
}
.tu-col:nth-of-type(2n) {
  background: rgba(128, 128, 128, 0.1);
}
</style>

Column spacing

Column spacing is supported. Row provides gutter attribute to specify spacings between columns, and its default value is 0.

col-6

Hybrid layout

Form a more complex hybrid layout by combining the basic 1/24 columns.

col-16

col-8

col-4

col-16

col-4

Column offset

You can specify the number of column offset by setting the value of offset attribute of Col.

col-6 | offset-0

col-6 | offset-6

col-12 | offset-6

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.

Justify start

col-6

Justify center

col-6

Justify end

col-6

Justify space-between

col-6

Justify space-around

col-6

<template>
  <p>Justify start</p>
  <tu-row>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
  <p>Justify center</p>
  <tu-row justify="center">
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
  <p>Justify end</p>
  <tu-row justify="end">
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
  <p>Justify space-between</p>
  <tu-row justify="space-between">
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
  <p>Justify space-around</p>
  <tu-row justify="space-around">
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
</template>

<style lang="scss" scoped>
.tu-row:not(:last-of-type) {
  margin-bottom: 20px;
}
.tu-col {
  text-align: center;
  min-height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #71757f;
}
.tu-col:nth-of-type(2n + 1) {
  background: rgba(128, 128, 128, 0.2);
}
.tu-col:nth-of-type(2n) {
  background: rgba(128, 128, 128, 0.1);
}
</style>

<template>
  <p>Justify start</p>
  <tu-row>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
  <p>Justify center</p>
  <tu-row justify="center">
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
  <p>Justify end</p>
  <tu-row justify="end">
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
  <p>Justify space-between</p>
  <tu-row justify="space-between">
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
  <p>Justify space-around</p>
  <tu-row justify="space-around">
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
    <tu-col :span="6">col-6</tu-col>
  </tu-row>
</template>

<style lang="scss" scoped>
.tu-row:not(:last-of-type) {
  margin-bottom: 20px;
}
.tu-col {
  text-align: center;
  min-height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #71757f;
}
.tu-col:nth-of-type(2n + 1) {
  background: rgba(128, 128, 128, 0.2);
}
.tu-col:nth-of-type(2n) {
  background: rgba(128, 128, 128, 0.1);
}
</style>

Responsive Layout

Taking example by Bootstrap is responsive design, five breakpoints are preset: xs, sm, md, lg and xl.

col

Row API

Row Attributes

Name	Description	Type	Default
gutter	Grid spacing	`Number`	0
justify	Horizontal alignment of flex layout	`String`	start
align	Vertical alignment of flex layout	`String`	top
tag	Custom element tag	`String`	div

Row Slots

Name	Description	Type
default	Customize default content	Col

Col API

Col Attributes

Name	Description	Type	Default
span	Number of column the grid spans	`Number`	24
offset	Number of spacing on the left side of the grid	`Number`	0
push	Number of columns that grid moves to the right	`Number`	0
pull	Number of columns that grid moves to the left	`Number`	0
xs	`<768px` Responsive columns or column props object	`Number` `Object`	-
sm	`≥768px` Responsive columns or column props object	`Number` `Object`	-
md	`≥992px` Responsive columns or column props object	`Number` `Object`	-
lg	`≥1200px` Responsive columns or column props object	`Number` `Object`	-
xl	`≥1920px` Responsive columns or column props object	`Number` `Object`	-
tag	Custom element tag	`String`	div

Col Slots

Name	Description	Type
default	Customize default content	Col

Grid ​

Basic layout ​

Column spacing ​

Hybrid layout ​

Column offset ​

Alignment ​

Responsive Layout ​

Row API ​

Row Attributes ​

Row Slots ​

Col API ​

Col Attributes ​

Col Slots ​

Grid

Basic layout

Column spacing

Hybrid layout

Column offset

Alignment

Responsive Layout

Row API

Row Attributes

Row Slots

Col API

Col Attributes

Col Slots