<template>
<div class="main-container">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
  <div class="box5"></div>
  <div class="box6"></div>
</div>
</template>

<script>
export default {
  name: 'Main',
}
</script>

<style lang="stylus" scoped>
.main-container
  background $fontColor
  width 100%
  height 100%
  display grid
  grid-template-areas \
    'box1 box1 box1'\
    'box2 box3 box4'\
    'box5 box3 box4'\
    'box6 box6 box6'
  grid-template-rows 1fr 3fr 3fr 1fr
  grid-gap 10px
  padding 10px
  .box1
    background red
    grid-area box1
  .box2
    background blue
    grid-area box2
  .box3
    background gold
    grid-area box3
  .box4
    background green
    grid-area box4
  .box5
    background gray
    grid-area box5
  .box6
    background #fff
    grid-area box6
</style>
