<template>
    <div class="ht-base-multiseriate-grid-demo">
        <ht-base-list>
            <ht-base-row  :gutter="24">
                <ht-base-col v-for="item of data" :key="item.title" :xs="8" :sm="6">
                    <ht-base-list-item>
                        <ht-base-card :title="item.title" class="demo-list-card" size="small">卡片内容</ht-base-card>
                    </ht-base-list-item>
                </ht-base-col>
            </ht-base-row>
        </ht-base-list>
    </div>
</template>

<script>
    const data = [
        {
            title: '第一列标题',
        },
        {
            title: '第二列标题',
        },
        {
            title: '第三列标题',
        },
        {
            title: '第四列标题',
        },
        {
            title: '第五列标题',
        },
        {
            title: '第六列标题',
        },
        {
            title: '第七列标题',
        },
        {
            title: '第八列标题',
        },
    ]
  export default {
      name: 'HtBaseMultiseriateGridDemo',
      data () {
          return {
              data,
          }
      },
  }
</script>
<style lang="less">
    .ht-base-multiseriate-grid-demo {
        .demo-list-card{
            width: 100%;
        }
    }
</style>

