Grid 网格布局

<template>
  <div>
    <!-- <div class="container">
    <div class="item item1" style="grid-area: 2/2/3/4;">1</div>
    <div class="item item2">2</div>
    <div class="item item3">3</div>
    <div class="item item4">4</div>
    <div class="item item5">5</div>
    <div class="item item6">6</div>
    <div class="item item7">7</div>
    <div class="item item8">8</div>
    <div class="item item9">9</div>
  </div> -->
    <!-- <div class="container">
      <div class="item item3" style="grid-area: 1/1/3/3;">1</div>
      <div class="item item4">2</div>
      <div class="item item5" style="grid-area: 2/3/4/4;">4</div>
      <div class="item item6">3</div>
      <div class="item item7">5</div>
    </div> -->
    <div class="container">
      <div class="item item1" style="grid-area: 1/1/1/3;">1</div>
      <div class="item item2">2</div>
      <div class="item item3">3</div>
      <div class="item item4" style="grid-area: 2/2/3/4;">4</div>
      <div class="item item5" style="grid-area: 3/1/4/3;">5</div>
      <div class="item item6">6</div>
    </div>
    <div></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {}
  },
  computed: {},
  methods: {}
}
</script>
<style lang="scss" scoped>
.container {
  display: grid;
  // height: 500px;
  // 行高
  grid-template-rows: repeat(3, 100px);
  // 列宽
  grid-template-columns: repeat(3, 100px);
  // grid-template-columns: repeat(2, 100px 50px 100px);
  // grid-template-columns: repeat(auto-fit, 100px);
  // grid-template-columns: 1fr 2fr 1fr;
  // grid-template-columns: 100px 2fr 1fr;
  // grid-template-columns: 100px 2fr minmax(100px, 1fr);
  // grid-template-columns: 100px auto 100px;
  // grid-template-columns: [c1] 100px [c2] 100px [c3] 100px [c4];
  // grid-template-columns: 30% 40% 30%;
  // grid-template-columns: repeat(3, 1fr);
  // row-gap: 10px;
  // column-gap: 10px;
  gap: 10px 10px;
  // unknow
  // grid-template-areas: 'a b c' 'd e f' 'g h i';
  // grid-auto-flow: column;
  // grid-auto-flow: row;
  // justify-items: center;
  // align-items: end;
  // place-items: center center;
  // justify-content: center;
  // align-content: center;
  place-content: center center;
  // 用与网格线占用过多，没空间的块
  // grid-auto-rows: 100px;
}
.item {
  font-size: 2em;
  text-align: center;
  border: 1px solid #e5e4e9;
}
.item1 {
  background-color: #ef342a;
  // 网格线
  // grid-column-start: 2;
  // grid-column-end: 4;
  // grid-row-start: 2;
  // grid-row-end: 3;
  // grid-column: 2/4;
  // grid-row: 2/3;
  // grid-row-start/grid-column-start/grid-row-end/grid-column-end
  // grid-area: 2/2/3/4;
  // grid-area: e;
}
.item2 {
  background-color: #f68f26;
  // justify-self: center;
  // align-self: center;
  // place-self: center;
}
.item3 {
  background-color: #4ba946;
  // grid-area: d;
}
.item4 {
  background-color: #0376c2;
}
.item5 {
  background-color: hsl(310, 66%, 34%);
}
.item6 {
  background-color: hsl(115, 79%, 58%);
}
.item7 {
  background-color: hsl(352, 86%, 48%);
}
.item8 {
  background-color: rgb(16, 238, 71);
}
.item9 {
  background-color: hsla(54, 93%, 54%, 0.87);
}
</style>

 参考链接：

https://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html