Layout 布局

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

基础布局

使用单一分栏创建基础的栅格布局。

<template>
  <Row>
    <Col :span="24"><div class="grid-content bg-purple-dark"></div></Col>
  </Row>
  <Row>
    <Col :span="12"><div class="grid-content bg-purple"></div></Col>
    <Col :span="12"><div class="grid-content bg-purple-light"></div></Col>
  </Row>
  <Row>
    <Col :span="8"><div class="grid-content bg-purple"></div></Col>
    <Col :span="8"><div class="grid-content bg-purple-light"></div></Col>
    <Col :span="8"><div class="grid-content bg-purple"></div></Col>
  </Row>
  <Row>
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple-light"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple-light"></div></Col>
  </Row>
  <Row>
    <Col :span="4"><div class="grid-content bg-purple"></div></Col>
    <Col :span="4"><div class="grid-content bg-purple-light"></div></Col>
    <Col :span="4"><div class="grid-content bg-purple"></div></Col>
    <Col :span="4"><div class="grid-content bg-purple-light"></div></Col>
    <Col :span="4"><div class="grid-content bg-purple"></div></Col>
    <Col :span="4"><div class="grid-content bg-purple-light"></div></Col>
  </Row>
</template>

<script setup>
import Row from '@/components/Row/Row.vue'
import Col from '@/components/Col/Col.vue'
</script>

<style scoped>
.s-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.s-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

分栏间隔

分栏之间存在间隔。

<template>
  <Row :gutter="20">
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
  </Row>
</template>

<script setup>
import Row from '@/components/Row/Row.vue'
import Col from '@/components/Col/Col.vue'
</script>

<style scoped>
  .s-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .s-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

混合布局

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

分栏偏移

支持偏移指定的栏数。

<template>
  <Row :gutter="20">
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6" :offset="6"><div class="grid-content bg-purple"></div></Col>
  </Row>
  <Row :gutter="20">
    <Col :span="6" :offset="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6" :offset="6"><div class="grid-content bg-purple"></div></Col>
  </Row>
  <Row :gutter="20">
    <Col :span="12" :offset="6"><div class="grid-content bg-purple"></div></Col>
  </Row>
</template>

<script setup>
import Row from '@/components/Row/Row.vue'
import Col from '@/components/Col/Col.vue'
</script>

<style scoped>
.s-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.s-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

对齐方式

通过 flex 布局来对分栏进行灵活的对齐。

<template>
  <Row type="flex" class="row-bg">
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple-light"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
  </Row>
  <Row type="flex" class="row-bg" justify="center">
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple-light"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
  </Row>
  <Row type="flex" class="row-bg" justify="end">
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple-light"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
  </Row>
  <Row type="flex" class="row-bg" justify="space-between">
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple-light"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
  </Row>
  <Row type="flex" class="row-bg" justify="space-around">
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple-light"></div></Col>
    <Col :span="6"><div class="grid-content bg-purple"></div></Col>
  </Row>
</template>

<script setup>
import Row from '@/components/Row/Row.vue'
import Col from '@/components/Col/Col.vue'
</script>

<style scoped>
.s-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.s-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>

响应式布局

参照了 Bootstrap 的响应式设计，预设了五个响应尺寸：xs、sm、md、lg 和 xl。

<template>
  <Row :gutter="10">
    <Col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"><div class="grid-content bg-purple"></div></Col>
    <Col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"
      ><div class="grid-content bg-purple-light"></div
    ></Col>
    <Col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"><div class="grid-content bg-purple"></div></Col>
    <Col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"
      ><div class="grid-content bg-purple-light"></div
    ></Col>
  </Row>
</template>

<script setup>
import Row from '@/components/Row/Row.vue'
import Col from '@/components/Col/Col.vue'
</script>

<style scoped>
.s-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>

Row Attributes

参数	说明	类型	可选值	默认值
gutter	栅格间隔	number	-	0
align	垂直对齐方式	string	top / middle / bottom	-
justify	水平对齐方式	string	start / end / center / space-around / space-between	start
type	布局模式，可选 flex，现代浏览器支持 flex 布局，可以开启 flex 模式	string	-	-
tag	自定义元素标签	string	-	div

Col Attributes

参数	说明	类型	可选值	默认值
span	栅格占据的列数	number	-	24
offset	栅格左侧的间隔格数	number	-	0
push	栅格向右移动格数	number	-	0
pull	栅格向左移动格数	number	-	0
xs	`<768px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	-	-
sm	`≥768px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	-	-
md	`≥992px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	-	-
lg	`≥1200px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	-	-
xl	`≥1920px` 响应式栅格数或者栅格属性对象	number/object (例如： {span: 4, offset: 4})	-	-
tag	自定义元素标签	string	-	div

Layout 布局 ​

基础布局 ​

分栏间隔 ​

混合布局 ​

分栏偏移 ​

对齐方式 ​

响应式布局 ​

Row Attributes ​

Col Attributes ​

Layout 布局

基础布局

分栏间隔

混合布局

分栏偏移

对齐方式

响应式布局

Row Attributes

Col Attributes