Files
workspace/code/g3soft-libs/docs/examples/grid/basic.vue
T
2026-10-08 22:38:34 +08:00

26 lines
732 B
Vue

<script setup lang="ts">
// 24 栅格:span 表示占几格,一行总和超过 24 会自动换行
import { G3Col, G3Row } from '@g3soft/ui'
</script>
<template>
<G3Row :gutter="12">
<G3Col :span="24"><div class="cell">span 24</div></G3Col>
<G3Col :span="12"><div class="cell">span 12</div></G3Col>
<G3Col :span="12"><div class="cell">span 12</div></G3Col>
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
<G3Col :span="8"><div class="cell">span 8</div></G3Col>
</G3Row>
</template>
<style scoped>
.cell {
padding: 12px 0;
border-radius: 6px;
background: rgba(24, 24, 27, 0.04);
font-size: 13px;
text-align: center;
}
</style>