<template>
  <div class="demo-layout-basic">
    <ui-row>
      <ui-col :span="24">
        <div class="grid-content bg-blue-blue">
          100%
        </div>
      </ui-col>
    </ui-row>
    <ui-row>
      <ui-col :span="12">
        <div class="grid-content bg-blue">
          50%
        </div>
      </ui-col>
      <ui-col :span="12">
        <div class="grid-content">
          50%
        </div>
      </ui-col>
    </ui-row>
    <ui-row>
      <ui-col :span="8">
        <div class="grid-content bg-blue">
          33.3%
        </div>
      </ui-col>
      <ui-col :span="8">
        <div class="grid-content">
          33.3%
        </div>
      </ui-col>
      <ui-col :span="8">
        <div class="grid-content bg-blue">
          33.3%
        </div>
      </ui-col>
    </ui-row>
    <ui-row>
      <ui-col :span="6">
        <div class="grid-content bg-blue">
          25%
        </div>
      </ui-col>
      <ui-col :span="6">
        <div class="grid-content">
          25%
        </div>
      </ui-col>
      <ui-col :span="6">
        <div class="grid-content bg-blue">
          25%
        </div>
      </ui-col>
      <ui-col :span="6">
        <div class="grid-content">
          25%
        </div>
      </ui-col>
    </ui-row>
    <ui-row>
      <ui-col :span="4">
        <div class="grid-content bg-blue">
          16.7%
        </div>
      </ui-col>
      <ui-col :span="4">
        <div class="grid-content">
          16.7%
        </div>
      </ui-col>
      <ui-col :span="4">
        <div class="grid-content bg-blue">
          16.7%
        </div>
      </ui-col>
      <ui-col :span="4">
        <div class="grid-content">
          16.7%
        </div>
      </ui-col>
      <ui-col :span="4">
        <div class="grid-content bg-blue">
          16.7%
        </div>
      </ui-col>
      <ui-col :span="4">
        <div class="grid-content">
          16.7%
        </div>
      </ui-col>
    </ui-row>
  </div>
</template>

<script>
import { Row, Col } from "amumu-ui"
export default {
  components: {
    "ui-row": Row,
    "ui-col": Col,
  },
  data() {
    return {
      value: "",
    }
  },
}
</script>
<style lang="scss">
.demo-layout-basic {
  background: linear-gradient(to right, #F3F3F3 50%,#fff 50%);
  background-size: 80px 100%;
  .mm-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }

    .grid-content {
      height: 76px;
      line-height: 76px;
      text-align: center;
    }
  }
  .bg-blue {
    opacity: 0.5;
    background: #0081F7;
    color: #fff;
  }
}
</style>
