Row & Col 栅格布局

基于24栅格系统的布局组件。

基础用法

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

<style lang="scss" scoped>
.lb-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.lb-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
</style>

响应式布局

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

<style lang="scss" scoped>
.lb-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.lb-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
</style>

栅格间隔

<template>
  <lb-row :gutter="20">
    <lb-col :span="16"><div class="grid-content bg-purple"></div></lb-col>
    <lb-col :span="8"><div class="grid-content bg-purple-light"></div></lb-col>
  </lb-row>
</template>

<style lang="scss" scoped>
.lb-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.lb-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
</style>

对齐方式

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

<style lang="scss" scoped>
.lb-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.lb-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
</style>

Row Attributes

Attribute	Description	Type	Accepted Values	Default
gutter	栅格间隔	number	—	0
justify	flex 布局下的水平排列方式	string	start / end / center / space-around / space-between / space-evenly	start
align	flex 布局下的垂直排列方式	string	top / middle / bottom	top

Col Attributes

Attribute	Description	Type	Accepted Values	Default
span	栅格占据的列数	number	—	24
offset	栅格左侧的间隔格数	number	—	0
pull	栅格向左移动的格数	number	—	0
push	栅格向右移动的格数	number	—	0
xs	<768px 响应式栅格数或者栅格属性对象	number / object	—	—
sm	≥768px 响应式栅格数或者栅格属性对象	number / object	—	—
md	≥992px 响应式栅格数或者栅格属性对象	number / object	—	—
lg	≥1200px 响应式栅格数或者栅格属性对象	number / object	—	—
xl	≥1920px 响应式栅格数或者栅格属性对象	number / object	—	—