<template>
<div>
<fish-row>
<fish-col span="24" class="demo-col">col-24</fish-col>
</fish-row>
<fish-row>
<fish-col span="12" class="demo-col">col-12</fish-col>
<fish-col span="12" class="demo-col demo-col2">col-12</fish-col>
</fish-row>
<fish-row>
<fish-col span="8" class="demo-col">col-8</fish-col>
<fish-col span="8" class="demo-col demo-col2">col-8</fish-col>
<fish-col span="8" class="demo-col">col-8</fish-col>
</fish-row>
<fish-row>
<fish-col span="6" class="demo-col">col-6</fish-col>
<fish-col span="6" class="demo-col demo-col2">col-6</fish-col>
<fish-col span="6" class="demo-col">col-6</fish-col>
<fish-col span="6" class="demo-col demo-col2">col-6</fish-col>
</fish-row>
<fish-row>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
<fish-col span="1" class="demo-col">col-1</fish-col>
<fish-col span="1" class="demo-col demo-col2">col-1</fish-col>
</fish-row>
</div>
</template>
<script>
export default {
name: 'demo-grid-base'
}
</script>
<style>
.demo-col {
background: #e0f0fa;
padding: 10px 0;
text-align: center;
margin-bottom: 5px;
}
.demo-col2 {
background: #7dbcea;
}
</style>