css3属性 grid 网格布局使用示例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>title>
<style>
body {
margin: 0;
}
.content-box {
height: 100vh;
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-gap: 20px;
}
.box:nth-child(1) {
grid-column: 2 / 5;
}
.box:nth-child(2) {
grid-column-start: 1;
grid-column-end: 4;
grid-row-start: 2;
grid-row-end: 4;
}
.box:nth-child(3) {
grid-column-start: 4;
grid-column-end: 6;
grid-row-start: 2;
grid-row-end: 6;
}
.box:nth-child(4) {
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 4;
grid-row-end: 6;
}
.box:nth-child(5) {
grid-column-start: 3;
grid-row-start: 4;
grid-row-end: 6;
}
style>
head>
<body>
<div class="content-box">
<div class="box" style="background: #3d4c7c">1div>
<div class="box" style="background: #405855">2div>
<div class="box" style="background: #4d3f53">3div>
<div class="box" style="background: #6e5665">4div>
<div class="box" style="background: #635e4d">5div>
div>
body>
html>
原文：https://www.cnblogs.com/heroljy/p/14978273.html