Grid 栅格

布局的栅格化系统，通过 24 等分区域原则，基于行row和列col来定义信息区块的外部框架，实现快捷的页面排版。

组件概述

<kl-row>:行组件。

<kl-col>:列组件。

使用单一的组kl-row和kl-col栅格组件就可以创建一个基本的栅格系统。注意：所有的列（kl-col）必须放在行（kl-row）内。

基础栅格

通过给列kl-col设置span值来实现区域的排布。

需要注意的是栅格系统中的列用 1 到 24 的值来表示其跨越的范围，如果一个kl-row中的kl-col总和超过 24，多余的kl-col会另起一行。

col

col-12

col-8

col-6

<template>
    <div class="main">
        <kl-row class="row">
            <kl-col :span="24" class="color1">col</kl-col>
        </kl-row>
        <kl-row class="row">
            <kl-col :span="12" class="color2">col-12</kl-col>
            <kl-col :span="12" class="color1">col-12</kl-col>
        </kl-row>
        <kl-row class="row">
            <kl-col :span="8" class="color1">col-8</kl-col>
            <kl-col :span="8" class="color2">col-8</kl-col>
            <kl-col :span="8" class="color3">col-8</kl-col>
        </kl-row>
        <kl-row class="row">
            <kl-col :span="6" class="color1">col-6</kl-col>
            <kl-col :span="6" class="color2">col-6</kl-col>
            <kl-col :span="6" class="color3">col-6</kl-col>
            <kl-col :span="6" class="color4">col-6</kl-col>
        </kl-row>
    </div>
</template>
<script lang="ts"></script>
<style scoped></style>

栅格自动换行

通过给行kl-row设置 wrap 属性值来实现列栅格区域的换行设置。

:wrap:true表示栅格自动换行，否则不换行，默认值是false。

col-6

col-8

<template>
    <div class="main">
        <kl-row :wrap="true">
            <kl-col :span="6" class="color1">col-6</kl-col>
            <kl-col :span="6" class="color2">col-6</kl-col>
            <kl-col :span="6" class="color3">col-6</kl-col>
            <kl-col :span="8" class="color4">col-8</kl-col>
        </kl-row>
    </div>
</template>
<script lang="ts"></script>
<style></style>

区域间隔

通过给列kl-row设置gutter属性值来实现区域的间隔。

推荐使用（16+8n）px 作为栅格间隔（n 是自然数）。

如果需要垂直间隔，可以写成数组[水平间隔，垂直间隔]的形式。

col-6

<template>
    <div class="main">
        <kl-row :gutter="16">
            <kl-col :span="6" class="color1">col-6</kl-col>
            <kl-col :span="6" class="color2">col-6</kl-col>
            <kl-col :span="6" class="color3">col-6</kl-col>
            <kl-col :span="6" class="color4">col-6</kl-col>
        </kl-row>
        <hr />
        <kl-row :gutter="[16, 24]" :wrap="true">
            <kl-col :span="6" class="color1">col-6</kl-col>
            <kl-col :span="6" class="color2">col-6</kl-col>
            <kl-col :span="6" class="color3">col-6</kl-col>
            <kl-col :span="6" class="color4">col-6</kl-col>
            <kl-col :span="6" class="color1">col-6</kl-col>
            <kl-col :span="6" class="color2">col-6</kl-col>
            <kl-col :span="6" class="color3">col-6</kl-col>
            <kl-col :span="6" class="color4">col-6</kl-col>
        </kl-row>
    </div>
</template>
<script lang="ts"></script>
<style></style>

区域偏移

通过给列kl-col设置offset属性值来实现区域的偏移。

col-6 col-offset-8

<template>
    <div class="main">
        <kl-row>
            <kl-col :span="8" :offset="4" class="color1">col-6 col-offset-8</kl-col>
            <kl-col :span="8" :offset="4" class="color2">col-6 col-offset-8</kl-col>
        </kl-row>
    </div>
</template>
<script lang="ts"></script>
<style></style>

栅格排序

通过给列kl-col设置push和pull属性值来实现列栅格区域的排序。

pull属性值表示向左移动的格数。

push属性值表示向右移动的格数

col-6 col-push-18

col-18 col-pull-6

<template>
    <div class="main">
        <kl-row>
            <kl-col :span="6" :push="18" class="color1">col-6 col-push-18</kl-col>
            <kl-col :span="18" :pull="6" class="color2">col-18 col-pull-6</kl-col>
        </kl-row>
    </div>
</template>
<script lang="ts"></script>
<style></style>

对齐方式

使用 flex 布局来对分栏进行灵活的对齐。

通过给kl-row设置justify属性定义子元素的水平排版方式，可设置start/center/end/space-between/space-around/space-evenly。

通过给kl-row设置align属性定义子元素的垂直排版方式，可设置top/middle/bottom。

列对齐

start

col-4

center

col-4

end

col-4

space-between

col-4

space-around

col-4

space-evenly

col-4

<template>
    <div class="main">
        <h4>start</h4>
        <kl-row justify="start">
            <kl-col :span="4" class="color1">col-4</kl-col>
            <kl-col :span="4" class="color2">col-4</kl-col>
            <kl-col :span="4" class="color3">col-4</kl-col>
            <kl-col :span="4" class="color4">col-4</kl-col>
        </kl-row>
        <h4>center</h4>
        <kl-row justify="center">
            <kl-col :span="4" class="color1">col-4</kl-col>
            <kl-col :span="4" class="color2">col-4</kl-col>
            <kl-col :span="4" class="color3">col-4</kl-col>
            <kl-col :span="4" class="color4">col-4</kl-col>
        </kl-row>
        <h4>end</h4>
        <kl-row justify="end">
            <kl-col :span="4" class="color1">col-4</kl-col>
            <kl-col :span="4" class="color2">col-4</kl-col>
            <kl-col :span="4" class="color3">col-4</kl-col>
            <kl-col :span="4" class="color4">col-4</kl-col>
        </kl-row>
        <h4>space-between</h4>
        <kl-row justify="space-between">
            <kl-col :span="4" class="color1">col-4</kl-col>
            <kl-col :span="4" class="color2">col-4</kl-col>
            <kl-col :span="4" class="color3">col-4</kl-col>
            <kl-col :span="4" class="color4">col-4</kl-col>
        </kl-row>
        <h4>space-around</h4>
        <kl-row justify="space-around">
            <kl-col :span="4" class="color1">col-4</kl-col>
            <kl-col :span="4" class="color2">col-4</kl-col>
            <kl-col :span="4" class="color3">col-4</kl-col>
            <kl-col :span="4" class="color4">col-4</kl-col>
        </kl-row>
        <h4>space-evenly</h4>
        <kl-row justify="space-evenly">
            <kl-col :span="4" class="color1">col-4</kl-col>
            <kl-col :span="4" class="color2">col-4</kl-col>
            <kl-col :span="4" class="color3">col-4</kl-col>
            <kl-col :span="4" class="color4">col-4</kl-col>
        </kl-row>
    </div>
</template>
<script lang="ts"></script>
<style></style>

行对齐

top

col-4

middle

col-4

bottom

col-4

<template>
    <div class="main">
        <h4>top</h4>
        <kl-row align="top" style="background-color: #ebebeb">
            <kl-col :span="4" class="color1" style="height: 60px">col-4</kl-col>
            <kl-col :span="4" class="color2" style="height: 70px">col-4</kl-col>
            <kl-col :span="4" class="color3">col-4</kl-col>
            <kl-col :span="4" class="color4" style="height: 40px">col-4</kl-col>
        </kl-row>
        <h4>middle</h4>
        <kl-row align="middle" style="background-color: #ebebeb">
            <kl-col :span="4" class="color1" style="height: 60px">col-4</kl-col>
            <kl-col :span="4" class="color2" style="height: 70px">col-4</kl-col>
            <kl-col :span="4" class="color3">col-4</kl-col>
            <kl-col :span="4" class="color4" style="height: 40px">col-4</kl-col>
        </kl-row>
        <h4>bottom</h4>
        <kl-row align="bottom" style="background-color: #ebebeb">
            <kl-col :span="4" class="color1" style="height: 60px">col-4</kl-col>
            <kl-col :span="4" class="color2" style="height: 70px">col-4</kl-col>
            <kl-col :span="4" class="color3">col-4</kl-col>
            <kl-col :span="4" class="color4" style="height: 40px">col-4</kl-col>
        </kl-row>
    </div>
</template>
<script lang="ts"></script>
<style></style>

Flex 排序

通过order来改变元素的排序。

col-6-order-2

col-18-order-1

<template>
    <div class="main">
        <kl-row>
            <kl-col :span="6" :order="2" class="color1">col-6-order-2</kl-col>
            <kl-col :span="18" :order="1" class="color2">col-18-order-1</kl-col>
        </kl-row>
    </div>
</template>
<script lang="ts"></script>
<style></style>

响应式布局

参照 Bootstrap 的响应式设计，预设五个响应式尺寸：xm/sm/md/lg/xl

基础

col

offset

col1

col2

col3

<template>
    <div class="main">
        <h4>基础</h4>
        <kl-row>
            <kl-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color1">col</kl-col>
            <kl-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" class="color2">col</kl-col>
            <kl-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color3">col</kl-col>
        </kl-row>
        <h4>offset</h4>
        <kl-row>
            <kl-col :xs="{ span: 2, offset: 22 }" :sm="4" :md="6" :lg="8" :xl="10" class="color1"
                >col1</kl-col
            >
            <kl-col :xs="20" :sm="16" :md="12" :lg="8" :xl="4" class="color2">col2</kl-col>
            <kl-col :xs="2" :sm="4" :md="6" :lg="8" :xl="10" class="color3">col3</kl-col>
        </kl-row>
    </div>
</template>
<script lang="ts"></script>
<style></style>

Row API

Row Attributes

属性名	说明	类型	默认值
gutter	栅间隔	`number`	0
justify	flex 布局下的水平排列方式	`string`	start
align	flex 布局下的垂直排列方式	`string`	top
wrap	溢出是否自动换行	`boolean`	false
tag	自定义元素标签	`string`	div

Row Slots

插槽名	说明	子标签
default	自定义内容	Col

Col API

Col Attributes

属性名	说明	类型	默认值
span	栅格占据的列数	`number`	24
offset	栅格左侧的间隔格数	`number`	0
pull	栅格向左移动格数	`number`	0
push	栅格向右移动格数	`number`	0
order	flex 布局下子元素的排序	`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	自定义内容

Grid 栅格 #

组件概述 #

基础栅格 #

栅格自动换行 #

区域间隔 #

区域偏移 #

栅格排序 #

对齐方式 #

列对齐 #

start

center

end

space-between

space-around

space-evenly

行对齐 #

top

middle

bottom

Flex 排序 #

响应式布局 #

基础

offset

Row API #

Row Attributes #

Row Slots #

Col API #

Col Attributes #

Col Slots #

Grid 栅格

组件概述

基础栅格

栅格自动换行

区域间隔

区域偏移

栅格排序

对齐方式

列对齐

行对齐

Flex 排序

响应式布局

Row API

Row Attributes

Row Slots

Col API

Col Attributes

Col Slots