Row

a-row和a-col中span的xs/md/xl等，是以浏览器宽度为基础，而此c-row，是以其本身宽度为基础。

span响应式

Col

Col

Col

span中可用什么配置与a-col的span一致

<template>
  <c-row>
    <c-col :span="{ xs: 2, sm: 4, md: 6, lg: 8, xl: 10, xxl: 8 }"> Col </c-col>
    <c-col :span="{ xs: 20, sm: 16, md: 12, lg: 8, xl: 4, xxl: 8 }"> Col </c-col>
    <c-col :span="{ xs: 2, sm: 4, md: 6, lg: 8, xl: 12, xxl: 8 }"> Col </c-col>
  </c-row>
</template>
<script setup lang="ts"></script>
<style scoped>
.crco-col {
  height: 48px;
  line-height: 48px;
  color: var(--color-white);
  text-align: center;
}
.crco-col:nth-child(2n) {
  background-color: rgba(var(--arcoblue-6), 0.9);
}
.crco-col:nth-child(2n + 1) {
  background-color: var(--color-primary-light-4);
}
</style>

显示代码复制代码复制代码

gutter响应式

Col

Col

Col

<template>
  <c-row :gutter="{ xs: 6, sm: 30 }">
    <c-col span="6">
      <div>Col</div>
    </c-col>
    <c-col span="12">
      <div>Col</div>
    </c-col>
    <c-col span="6">
      <div>Col</div>
    </c-col>
  </c-row>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.crco-col {
  div {
    height: 48px;
    line-height: 48px;
    color: var(--color-white);
    text-align: center;
  }
}
.crco-col:nth-child(2n) {
  div {
    background-color: rgba(var(--arcoblue-6), 0.9);
  }
}
.crco-col:nth-child(2n + 1) {
  div {
    background-color: var(--color-primary-light-4);
  }
}
</style>

显示代码复制代码复制代码