/*! For license information please see 979.b1c4a044.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["979"],{38642:function(s,a,n){"use strict";n.r(a);var t=n("80681");let l=["innerHTML"];a.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Layout

\n

Intro

\n

Quickly and easily create layouts with van-row and van-col.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { Col, Row } from 'vant';\n\nconst app = createApp();\napp.use(Col);\napp.use(Row);\n
\n

Usage

\n

Basic Usage

\n

Layout are based on 24-column. The attribute span in Col means the number of column the grid spans. Of course, You can use offset attribute to set number of spacing on the left side of the grid.

\n
<van-row>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n</van-row>\n\n<van-row>\n  <van-col span="4">span: 4</van-col>\n  <van-col span="10" offset="4">offset: 4, span: 10</van-col>\n  <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row>\n  <van-col offset="12" span="12">offset: 12, span: 12</van-col>\n</van-row>\n
\n

Column Spacing

\n

Set grid spacing using gutter attribute. The default value is 0.

\n
<van-row gutter="20">\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n  <van-col span="8">span: 8</van-col>\n</van-row>\n
\n

Vertical Spacing

\n

If you want to set the vertical spacing, you can set [horizontal, vertical] as an array.

\n
<!-- set the vertical spacing -->\n<van-row :gutter="[20, 20]">\n  <van-col span="12">span: 12</van-col>\n  <van-col span="12">span: 12</van-col>\n  <van-col span="12">span: 12</van-col>\n  <van-col span="12">span: 12</van-col>\n</van-row>\n
\n

Justify Content

\n
<van-row justify="center">\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row justify="end">\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row justify="space-between">\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n</van-row>\n\n<van-row justify="space-around">\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n  <van-col span="6">span: 6</van-col>\n</van-row>\n
\n

API

\n

Row Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
gutterGrid spacing\uFF08px\uFF09number | string | Array-
tagCustom element tagstringdiv
justifyFlex main axis, can be set to end/center/space-around/space-betweenstringstart
alignFlex cross axis, be set to center/bottomstringtop
wrapWhether to wrapbooleantrue
\n

Col Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
spannumber of column the grid spansnumber | string-
offsetnumber of spacing on the left side of the gridnumber | string-
tagCustom element tagstringdiv
\n

Row Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
clickEmitted when the row is clickedevent: MouseEvent
\n

Col Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
clickEmitted when the col is clickedevent: MouseEvent
\n

Types

\n

The component exports the following type definitions:

\n
import type { ColProps, RowProps, RowAlign, RowJustify } from 'vant';\n
\n
'},null,8,l))}}}]);