Grid 栅格

通过24格分栏，快速构建网页布局。

基本用法

双栏,三栏,四栏

示例代码

<template>
  <div>
    <t-row class="row">
      <t-col class="col" span="12">
        <div class="content">12</div>
      </t-col>
      <t-col span="12">
        <div class="content">12</div>
      </t-col>
    </t-row>
    <t-row class="row">
      <t-col span="8">
        <div class="content">8</div>
      </t-col>
      <t-col span="8">
        <div class="content">8</div>
      </t-col>
      <t-col span="8">
        <div class="content">8</div>
      </t-col>
    </t-row>
    <t-row class="row">
      <t-col span="6">
        <div class="content">6</div>
      </t-col>
      <t-col span="6">
        <div class="content">6</div>
      </t-col>
      <t-col span="6">
        <div class="content">6</div>
      </t-col>
      <t-col span="6">
        <div class="content">6</div>
      </t-col>
    </t-row>
  </div>
</template>

<style scoped>
*{
  box-sizing: border-box;
}
.row{
  margin-bottom:5px;
  background: #dfe2e5;
}
.col{
  height: 100%;
}
.content{
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

设置空隙gutter

栏与栏之间的默认空隙

示例代码

<template>
  <div>
    <t-row class="row" gutter="10">
      <t-col class="col" span="12">
        <div class="content">12</div>
      </t-col>
      <t-col class="col" span="12">
        <div class="content">12</div>
      </t-col>
    </t-row>
    <t-row class="row" gutter="10">
      <t-col class="col" span="8">
        <div class="content">8</div>
      </t-col>
      <t-col class="col" span="8">
        <div class="content">8</div>
      </t-col>
      <t-col class="col" span="8">
        <div class="content">8</div>
      </t-col>
    </t-row>

  </div>
</template>

<style  scoped>
*{
  box-sizing: border-box;
}
.row{
  margin-bottom:5px;
}
.col{
  border:none;
}
.content{
  background: #dfe2e5;
}
</style>

设置间隔offset

间隔在左侧,offset与span之和不得大于24否则会换行

示例代码

<template>
  <div>
    <t-row class="row" >
      <t-col class="col" span="12" offset="6">
        <div class="content">12</div>
      </t-col>
    </t-row>
    <t-row class="row" >
      <t-col class="col" span="8">
        <div class="content">8</div>
      </t-col>
      <t-col class="col" span="8" offset="8">
        <div class="content">8</div>
      </t-col>
    </t-row>
    <t-row class="row" >
      <t-col class="col" span="4" offset="4">
        <div class="content">4</div>
      </t-col>
      <t-col class="col" span="4" offset="4">
        <div class="content">4</div>
      </t-col>
      <t-col class="col" span="4" offset="4">
        <div class="content">4</div>
      </t-col>
    </t-row>
    <t-row class="row" >
      <t-col class="col" span="2">
        <div class="content">2</div>
      </t-col>
      <t-col class="col" span="2" offset="20">
        <div class="content">2</div>
      </t-col>
    </t-row>
  </div>
</template>

<style  scoped>
*{
  box-sizing: border-box;
}
.row{
  margin-bottom:5px;
}
.col{
  height: 100%;
  border:none;
}
.content{
  background: #dfe2e5;
  border: 1px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

响应式布局

参照了 Bootstrap 的响应式设计,预设了五个响应尺寸：sm,md,lg,xl,xxl

示例代码

<template>
  <div>
    <t-row class="row" gutter="10" >
      <t-col class="col" span="24" :sm="{span:12}" :md="{span:8}" :lg="{span:6}" :xl="{span:4}" >
        <div class="content">内容1</div>
      </t-col>
      <t-col class="col" span="24" :sm="{span:12}" :md="{span:8}" :lg="{span:6}" :xl="{span:4}" >
        <div class="content">内容2</div>
      </t-col>
      <t-col class="col" span="24" :sm="{span:12}" :md="{span:8}" :lg="{span:6}" :xl="{span:4}" >
        <div class="content">内容3</div>
      </t-col>
      <t-col class="col" span="24" :sm="{span:12}" :md="{span:8}" :lg="{span:6}" :xl="{span:4}" >
        <div class="content">内容4</div>
      </t-col>
      <t-col class="col" span="24" :sm="{span:12}" :md="{span:8}" :lg="{span:6}" :xl="{span:4}" >
        <div class="content">内容5</div>
      </t-col>
      <t-col class="col" span="24" :sm="{span:12}" :md="{span:8}" :lg="{span:6}" :xl="{span:4}" >
        <div class="content">内容6</div>
      </t-col>
      <t-col class="col" span="24" :sm="{span:12}" :md="{span:8}" :lg="{span:6}" :xl="{span:4}" >
        <div class="content">内容7</div>
      </t-col>
      <t-col class="col" span="24" :sm="{span:12}" :md="{span:8}" :lg="{span:6}" :xl="{span:4}" >
        <div class="content">内容8</div>
      </t-col>
    </t-row>
  </div>
</template>

<style  scoped>
*{
  box-sizing: border-box;
}
.row{
  margin-bottom:5px;
}
.col{
  height: 100%;
  border:none;
  margin-bottom:5px;
}
.content{
  background: #dfe2e5;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

Attributes

Row

参数	说明	类型	可选值	默认值
gutter	栅格与栅格之间的默认空隙	String, Number	——	0
align	栅格对齐方式	String	left,right,center	——

Col

参数	说明	类型	可选值	默认值
span	栅格占位格数	Number, String	1-24	——
offset	栅格的左边间隔	Number, String	1-24	——
sm	屏幕 ≥ 576px 响应式栅格	Object	Object.span Object.offset	——
md	屏幕 ≥ 767px 响应式栅格	Object	Object.span Object.offset	——
lg	屏幕 ≥ 991px 响应式栅格	Object	Object.span Object.offset	——
xl	屏幕 ≥ 1199px 响应式栅格	Object	Object.span Object.offset	——
xxl	屏幕 ≥ 1599px 响应式栅格	Object	Object.span Object.offset	——