Layout 布局

通过基础的 24 分栏，迅速简便地创建布局。

TIP

组件默认使用 Flex 布局，不需要手动设置 type="flex"。

请注意父容器避免使用 inline 相关样式，会导致组件宽度不能撑满。

基础布局

使用列创建基础网格布局。

通过 row 和 col 组件，并通过 col 组件的 span 属性我们就可以自由地组合布局。

<template>
  <wl-row>
    <wl-col :span="24"><div class="grid-content" /></wl-col>
  </wl-row>
  <wl-row>
    <wl-col :span="12"><div class="grid-content" /></wl-col>
    <wl-col :span="12"><div class="grid-content" /></wl-col>
  </wl-row>
  <wl-row>
    <wl-col :span="8"><div class="grid-content" /></wl-col>
    <wl-col :span="8"><div class="grid-content" /></wl-col>
    <wl-col :span="8"><div class="grid-content" /></wl-col>
  </wl-row>
  <wl-row>
    <wl-col :span="6"><div class="grid-content" /></wl-col>
    <wl-col :span="6"><div class="grid-content" /></wl-col>
    <wl-col :span="6"><div class="grid-content" /></wl-col>
    <wl-col :span="6"><div class="grid-content" /></wl-col>
  </wl-row>
  <wl-row>
    <wl-col :span="4"><div class="grid-content" /></wl-col>
    <wl-col :span="4"><div class="grid-content" /></wl-col>
    <wl-col :span="4"><div class="grid-content" /></wl-col>
    <wl-col :span="4"><div class="grid-content" /></wl-col>
    <wl-col :span="4"><div class="grid-content" /></wl-col>
    <wl-col :span="4"><div class="grid-content" /></wl-col>
  </wl-row>
</template>

<script lang="ts" setup>
import { WlRow,WlCol } from 'whale-ui';
</script>

<style scoped>
.wl-row{
  margin-bottom: 20px;
}
.wl-col > div {
  min-height: 36px;
}
.wl-col{
  border-radius: 4px;
}

.wl-row .wl-col:nth-child(2n+1) {
  background: #d3dce6;
}
.wl-row .wl-col:nth-child(2n) {
  background: #e5e9f2;
}
</style>```

分栏间隔

支持列间距。

行提供 gutter 属性来指定列之间的间距，其默认值为0。

<template>
  <wl-row :gutter="20">
    <wl-col :span="6"><div class="grid-content" /></wl-col>
    <wl-col :span="6"><div class="grid-content" /></wl-col>
    <wl-col :span="6"><div class="grid-content" /></wl-col>
    <wl-col :span="6"><div class="grid-content" /></wl-col>
  </wl-row>
</template>

<script lang="ts" setup>
import { WlRow,WlCol } from 'whale-ui';
</script>

<style scoped>
.wl-row{
  margin-bottom: 20px;
}
.wl-col > div {
  min-height: 36px;
}
.wl-col div{
  border-radius: 4px;
}

.wl-row .wl-col:nth-child(2n+1) div{
  background: #d3dce6;
}
.wl-row .wl-col:nth-child(2n) div{
  background: #e5e9f2;
}
</style>```