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>

 

place-items，place-content，place-self三者区别：

1、place-items和place-content作用于整个网格容器，控制其中的所有项目的位置；

2、place-self作用于单个网格项，允许你针对每个项目设置不同的位置，可以看成place-items的子集

3、place-items是设置单元格内容的水平位置，可以看成place-self的合集

4、place-content是整个内容区域在容器里面的水平位置，针对的是父级div

5、place-items和place-self针对的是父级div底下的div

 

参考链接：

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