[优化] 栅格文档

This commit is contained in:
就眠儀式
2021-11-17 23:51:15 +08:00
parent 624d4916e1
commit b817d323f6
4 changed files with 57 additions and 51 deletions

View File

@@ -5,12 +5,12 @@
<template>
<lay-row space="10">
<lay-col md="6"><div class="grid-demo">1</div></lay-col>
<lay-col md="6"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
<lay-col md="3"><div class="grid-demo">3</div></lay-col>
<lay-col md="3"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
<lay-col md="3"><div class="grid-demo">5</div></lay-col>
<lay-col md="3"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
<lay-col md="12"><div class="grid-demo">1</div></lay-col>
<lay-col md="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
<lay-col md="6"><div class="grid-demo">3</div></lay-col>
<lay-col md="6"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
<lay-col md="6"><div class="grid-demo">5</div></lay-col>
<lay-col md="6"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
</lay-row>
</template>
@@ -48,8 +48,8 @@ export default {
<template>
<lay-row space="10">
<lay-col md="6"><div class="grid-demo">1</div></lay-col>
<lay-col md="3" mdOffset="3"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
<lay-col md="12"><div class="grid-demo">1</div></lay-col>
<lay-col md="6" mdOffset="6"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
</lay-row>
</template>
@@ -87,8 +87,8 @@ export default {
<template>
<lay-row space="10">
<lay-col md="6" sm="6" xs="12"><div class="grid-demo">1</div></lay-col>
<lay-col md="6" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
<lay-col md="12" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
<lay-col md="12" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
</lay-row>
</template>
@@ -113,12 +113,12 @@ export default {
<template>
<lay-container fluid>
<lay-row space="10">
<lay-col md="2" sm="6" xs="12"><div class="grid-demo">1</div></lay-col>
<lay-col md="2" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
<lay-col md="2" sm="6" xs="12"><div class="grid-demo">3</div></lay-col>
<lay-col md="2" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
<lay-col md="2" sm="6" xs="12"><div class="grid-demo">5</div></lay-col>
<lay-col md="2" sm="6" xs="12"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">1</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">2</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">3</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">4</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo">5</div></lay-col>
<lay-col md="4" sm="12" xs="24"><div class="grid-demo grid-demo-bg1">6</div></lay-col>
</lay-row>
</lay-container>
</template>