<template>
  <div class="demo-layout-responsive">
    <ui-row :gutter="10">
      <ui-col
        :xs="8"
        :sm="6"
        :md="4"
        :lg="3"
        :xl="1">
        <div class="grid-content bg-blue"></div>
      </ui-col>
      <ui-col
        :xs="4"
        :sm="6"
        :md="8"
        :lg="9"
        :xl="11">
        <div class="grid-content bg-blue-light"></div>
      </ui-col>
      <ui-col
        :xs="4"
        :sm="6"
        :md="8"
        :lg="9"
        :xl="11">
        <div class="grid-content bg-blue"></div>
      </ui-col>
      <ui-col
        :xs="8"
        :sm="6"
        :md="4"
        :lg="3"
        :xl="1">
        <div class="grid-content bg-blue-light"></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-responsive {
  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>
