Grid 栅格

通过基础的 24 分栏，迅速简便地创建布局。

TIP

组件默认采用了 flex 布局，无需手动设置 type="flex"。

请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

基础布局

使用单一分栏创建基础的栅格布局。通过 tu-row 和 tu-col 组件，并通过 tu-col 组件的 `span` 属性来自由地组合布局。

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>

分栏间隔

子元素分栏之间存在间隔。tu-row 组件提供 `gutter` 属性来指定每一栏之间的间隔，默认间隔为 0。

col-6

混合布局

通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。

col-16

col-8

col-4

col-16

col-4

分栏偏移

支持偏移指定的栏数。通过制定 col 组件的 `offset` 属性可以指定分栏偏移的栏数。

col-6 | offset-0

col-6 | offset-6

col-12 | offset-6

对齐方式

默认使用 flex 布局来对分栏进行灵活的对齐。可通过 justify 属性来指定 `start`, `center`, `end`, `space-between`, `space-around` 其中的值来定义子元素的排版方式。

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>

响应式布局

预设了五个响应尺寸：xs、sm、md、lg 和 xl。

col

Row API

Row Attributes

参数名	描述	类型	默认值
gutter	栅格间隔	`Number`	0
justify	flex 布局下的水平排列方式	`String`	start
align	flex 布局下的垂直排列方式	`String`	top
tag	自定义元素标签	`String`	div

Row Slots

参数名	描述	类型
default	自定义内容	Col

Col API

Col Attributes

参数名	描述	类型	默认值
span	栅格占据的列数	`Number`	24
offset	栅格左侧的间隔格数	`Number`	0
push	栅格向右移动格数	`Number`	0
pull	栅格向左移动格数	`Number`	0
xs	`<768px` 响应式栅格数或者栅格属性对象	`Number` `Object`	-
sm	`≥768px` 响应式栅格数或者栅格属性对象	`Number` `Object`	-
md	`≥992px` 响应式栅格数或者栅格属性对象	`Number` `Object`	-
lg	`≥1200px` 响应式栅格数或者栅格属性对象	`Number` `Object`	-
xl	`≥1920px` 响应式栅格数或者栅格属性对象	`Number` `Object`	-
tag	自定义元素标签	`String`	div

Col Slots

参数名	描述	类型
default	自定义内容	Col

Grid 栅格 ​

基础布局 ​

分栏间隔 ​

混合布局 ​

分栏偏移 ​

对齐方式 ​

响应式布局 ​

Row API ​

Row Attributes ​

Row Slots ​

Col API ​

Col Attributes ​

Col Slots ​

Grid 栅格

基础布局

分栏间隔

混合布局

分栏偏移

对齐方式

响应式布局

Row API

Row Attributes

Row Slots

Col API

Col Attributes

Col Slots