vue网格布局--grid布局

1 九宫格布局（无边距）

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
</div>

<style scoped>
 /* 网格布局 三行三列 */
.container {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: grid;
  /* 分三部分 每一部分占三分之一 */
  grid-template-columns: repeat(3, 1fr);  // 列
  grid-template-rows: repeat(3, 1fr);     // 行
}

.item {
  color: #fff;
  border: 1px solid skyblue;
}

</style>

2 左右布局（无边距）

<div class="container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
</div>

<style scoped>
 /* 网格布局 跨行跨列 */
.container {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: grid;
  /* 两行三列 */
  grid-template-columns: repeat(3, 1fr);  
  grid-template-rows: repeat(2, 1fr);
}

.item {
  color: #fff;
  border: 1px solid skyblue;
}
.item1 {
  /* 占比为 从第一列到第三列（根据边框线查数） */
  grid-column: 1 / 3;
}
.item2 {
  /* 占比为 从第三列到第四列  第一行到第三行 */
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

</style>

3 常见大屏幕布局（有边距）

<div class="container">
  <div class="item item1">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>

<style scoped>
 /* 网格布局 跨行跨列 */
.container {
  width: 100vw;
  height: 100vh;
  background-color: #000;
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;  
  grid-template-rows: repeat(3, 1fr);
  /* 行列之间的边距  周围一圈没有 */
  gap: 10px;
}

.item {
  color: #fff;
  border: 1px solid skyblue;
}
.item2 {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
}

</style>