使用 span 关键字。除了”起始线与结束线“的定位方法，你还可以使用”起始线与跨越轨道数量“的定位方法。

即：grid-column: 1 / 3; 和 grid-column: 1 / span 2; 是等价的。

<template>
  <div class="wrapper">
    <div class="box1">One</div>
    <div class="box2">Two</div>
    <div class="box3">Three</div>
    <div class="box4">Four</div>
  </div>
</template>
<style scoped>
.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 100px);
  background: #f0f0f0;
  gap: 5px;
}
div {
  background: lightblue;
  text-align: center;
}
.box1 {
  grid-column: 1;
  grid-row: 1 / 4;
}
.box2 {
  grid-column: 3;
  grid-row: 1 / 3;
}
.box3 {
  grid-column: 2;
  grid-row: 1;
}
.box4 {
  grid-column: 2 / 4;
  grid-row: 3;
}
</style>

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24