import{o as a,a as n,y as t}from"./vue-libs.b44bc779.js";const l={class:"van-doc-markdown-body"},p=t(`

Layout

Intro

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

Install

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

import { createApp } from 'vue';
import { Col, Row } from 'vant';

const app = createApp();
app.use(Col);
app.use(Row);

Usage

Basic Usage

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.

<van-row>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
  <van-col span="8">span: 8</van-col>
</van-row>

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

<van-row>
  <van-col offset="12" span="12">offset: 12, span: 12</van-col>
</van-row>

Column Spacing

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

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

Justify Content

<van-row justify="center">
  <van-col span="6">span: 6</van-col>
  <van-col span="6">span: 6</van-col>
  <van-col span="6">span: 6</van-col>
</van-row>

<van-row justify="end">
  <van-col span="6">span: 6</van-col>
  <van-col span="6">span: 6</van-col>
  <van-col span="6">span: 6</van-col>
</van-row>

<van-row justify="space-between">
  <van-col span="6">span: 6</van-col>
  <van-col span="6">span: 6</van-col>
  <van-col span="6">span: 6</van-col>
</van-row>

<van-row justify="space-around">
  <van-col span="6">span: 6</van-col>
  <van-col span="6">span: 6</van-col>
  <van-col span="6">span: 6</van-col>
</van-row>

API

Row Props

AttributeDescriptionTypeDefault
gutterGrid spacing\uFF08px\uFF09number | string-
tagCustom element tagstringdiv
justifyFlex main axis, can be set to end/center/space-around/space-betweenstringstart
alignFlex cross axis, be set to center/bottomstringtop
wrap v3.0.11Whether to wrapbooleantrue

Col Props

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

Row Events

EventDescriptionArguments
clickEmitted when the row is clickedevent: MouseEvent

Col Events

EventDescriptionArguments
clickEmitted when the col is clickedevent: MouseEvent

Types

The component exports the following type definitions:

import type { ColProps, RowProps, RowAlign, RowJustify } from 'vant';
`,13),c=[p],j={__name:"README",setup(e,{expose:s}){return s({frontmatter:{}}),(h,d)=>(a(),n("div",l,c))}};export{j as default};