Grid

The rasterization system of the layout, through the principle of 24 and other regions, defines the outer framework of the information block based on row 'row' and column 'col', and realizes fast page layout.

Overview of components

<kl-row>:Row component.

<kl-col>:Col component.

A basic grid system can be created using a single group of kl-row and kl-col'raster components. Note: All columns (kl-col) must be placed inside rows (kl-row).

The underlying raster

The arrangement of regions is achieved by setting the span value to column kl-col.

Note that columns in a raster system use values from 1 to 24 to represent the extent they span, and if the sum of kl-colin a kl-row exceeds 24, the extra kl-col will start on a new line.

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>

Grid word wrapping

Wrap settings for column raster areas are implemented by setting the wrap property value to row kl-row.

:wrap:true means that the raster wraps automatically, otherwise it does not wrap, the default value is 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>

Area spacing

The interval between ranges is achieved by setting the value of the gutterattribute to the column kl-row.

(16+8n)px is recommended as the raster interval (n is the natural number).

If you need a vertical interval, you can write it in the form of an array [horizontal interval, vertical interval].

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>

Region offset

The offset of the range is achieved by setting the value of the offset attribute to the column kl-col.

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>

Raster sorting

Sort the column raster area by setting the push and pull attribute values to the column kl-col.

The pull attribute value represents the number of bins shifted to the left.

The push attribute value represents the number of bins shifted to the right

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>

Alignment

Use flex layouts for flexible alignment of columns.

By setting the justify attribute to kl-row to define the horizontal layout of the child elements, you can set start/center/end/space-between/space-around/space-evenly.

You can set top/middle/bottom by setting the align attribute to kl-row to define the vertical layout of the child elements.

Column alignment

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>

Line alignment

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 sorting

Change the order of elements by 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>

Responsive layout

Referring to Bootstrap's responsive design, five responsive sizes are preset: 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

The property name	description	type	Default value
gutter	Gate spacing	`number`	0
justify	Horizontal arrangement under flex layout	`string`	start
align	Vertical arrangement under flex layout	`string`	top
wrap	Whether the overflow wraps word automatically	`boolean`	false
tag	Custom element labels	`string`	div

Row Slots

Slot name	description	Sublabels
default	Customize content	Col

Col API

Col Attributes

Slot name	description	type	Default value
span	The number of columns occupied by the raster	`number`	24
offset	The number of compartments to the left of the grid	`number`	0
pull	The grid moves the number of tiles to the left	`number`	0
push	The grid moves the number of tiles to the right	`number`	0
order	The ordering of child elements under a flex layout	`number`	0
xs	<768px	`number/object`	—
sm	>=768px	`number/object`	—
md	>=992px	`number/object`	—
lg	>=1200px	`number/object`	—
xl	>=1920px	`number/object`	—
tag	Custom element labels	`string`	div

Col Slots

Slot name	description
default	Customize content

Grid #

Overview of components #

The underlying raster #

Grid word wrapping #

Area spacing #

Region offset #

Raster sorting #

Alignment #

Column alignment #

start

center

end

space-between

space-around

space-evenly

Line alignment #

top

middle

bottom

Flex sorting #

Responsive layout #

基础

offset

Row API #

Row Attributes #

Row Slots #

Col API #

Col Attributes #

Col Slots #

Grid

Overview of components

The underlying raster

Grid word wrapping

Area spacing

Region offset

Raster sorting

Alignment

Column alignment

Line alignment

Flex sorting

Responsive layout

Row API

Row Attributes

Row Slots

Col API

Col Attributes

Col Slots