CareUI

# 栅格

# 基本使用

1
1
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
3
3
3
3
4
4
4
6
6
12
<template>
    <div class="tdesign-demo-item--grid">
        <t-row v-for="(i, idx) in demoCols" :key="idx">
        <t-col v-for="(j, jdx) in i" :key="jdx" :span="j">
            <div>{{ j }}</div>
        </t-col>
        </t-row>
    </div>
</template>

<script>
export default {
  data() {
    return {
      demoCols: [
        Array(12).fill(1),
        Array(6).fill(2),
        Array(4).fill(3),
        Array(3).fill(4),
        Array(2).fill(6),
        Array(1).fill(12),
      ],
    };
  },
};
</script>
显示代码 复制代码

# 区块间隔

水平 gutter 为固定值
col-3
col-3
col-3
col-3
水平 gutter 为响应式
col-3
col-3
col-3
col-3
水平和垂直 gutter 均为固定值
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
水平 gutter 响应式，垂直 gutter固定值
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
水平和垂直 gutter 均为响应式
col-3
col-3
col-3
col-3
col-3
col-3
col-3
col-3
<template>
    <div class="tdesign-demo-item--grid">
        <!-- 只指定水平gutter，垂直默认为0 -->
        <span>水平 gutter 为固定值</span>
        <t-row :gutter="16">
            <t-col :span="3">
                <div>col-3</div>
            </t-col>
            <t-col :span="3">
                <div>col-3</div>
            </t-col>
            <t-col :span="3">
                <div>col-3</div>
            </t-col>
            <t-col :span="3">
                <div>col-3</div>
            </t-col>
        </t-row>

        <!-- 水平gutter为响应式 -->
        <span>水平 gutter 为响应式</span>
        <t-row :gutter="{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }">
        <t-col :span="3">
            <div>col-3</div>
        </t-col>
        <t-col :span="3">
            <div>col-3</div>
        </t-col>
        <t-col :span="3">
            <div>col-3</div>
        </t-col>
        <t-col :span="3">
            <div>col-3</div>
        </t-col>
        </t-row>

        <!-- 指定水平和垂直gutter，注：垂直gutter只在同一个row组件下面的col组件之间生效 -->
        <span>水平和垂直 gutter 均为固定值</span>
        <t-row :gutter="[16, 24]">
        <t-col v-for="i in 8" :key="i" :span="3">
            <div>col-3</div>
        </t-col>
        </t-row>

        <!-- 水平gutter响应式，垂直gutter固定值-->
        <span>水平 gutter 响应式，垂直 gutter固定值 </span>
        <t-row :gutter="[{ xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }, 24]">
        <t-col v-for="i in 8" :key="i" :span="3">
            <div>col-3</div>
        </t-col>
        </t-row>

        <!-- 水平和垂直 gutter 均为响应式 -->
        <span>水平和垂直 gutter 均为响应式</span>
        <t-row :gutter="[
        { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 },
        { xs: 8, sm: 16, md: 24, lg: 32, xl: 32, xxl: 40 }]">
        <t-col v-for="i in 8" :key="i" :span="3">
            <div>col-3</div>
        </t-col>
        </t-row>
    </div>
</template>
显示代码 复制代码

← Layout 布局 →