1 九宫格布局（无边距）

javascript"><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 左右布局（无边距）

javascript"><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 常见大屏幕布局（有边距）

javascript"><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>