根据Steven的视频整理[https://www.bilibili.com/video/BV1XE41177oN]
二维排版方式
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./css/new_file2.css"/>
<meta charset="utf-8">
<title>Grid布局</title>
</head>
<body>
<div id="ruler"></div>
<div id="grid-container">
<div class="cell-1"></div>
<div class="cell-2"></div>
<div class="cell-3"></div>
<div class="cell-4"></div>
</div>
</body>
</html>
#ruler{
position: absolute;
top: 0;
left: 0;
width: 580px;
height: 580px;
background-image: url(https:codingstartup.com/assets/grid/grid-ruler.png); /*加上-xy是带坐标图*/
background-size: 580px 580px;
}
#grid-container{
display: grid;
width: 500px;
height: 500px;
background-color: #EEEEEE;
/* grid-lines 可以看作是第四象限的XY交叉线 [Xx]和[Yx] 就是交线 */
/* grid-template-rows:[Y1] 100px [Y2] 100px [Y3] 100px [Y4] 100px [Y5] 100px [Y6]; /* Y轴为row */
/* grid-template-columns:[X1] 100px [X2] 100px [X3] 100px [X4] 100px [X5] 100px [X6]; */ */ /* X轴为column */
grid-template-rows: repeat(5,1fr); /*1fr 所占比例*/
grid-template-columns: repeat(5,1fr); /*repeat() 不适用于 grid-template-areas:*/
grid-template-areas:
"header header header header header"
"nav main main main main"
"nav main main main main"
"nav main main main main"
". footer footer footer ."; /*. 忽略*/
/* row-gap: 10px; gap 每种变量名间的间距
column-gap: 10px; */
}
body{
margin: 40px;
}
.cell-1{
background-color: blue;
grid-area: header;
/* grid-row: 1/3;
grid-column: 1/3; */
/* grid-area: 1/1/3/3; */ /*简写的grid-row和grid-column 左上角坐标和右下角坐标 */
}
.cell-2{
background-color: yellow;
grid-area: nav;
/* grid-row: Y4 / Y6; /* 可以理解为起始位置为4,终止位置为6 */
/* grid-column: 1/ span 3; */ /* span可以理解为延伸,即从1延伸3个单位 */ */
}
.cell-3{
grid-area: main;
background-color: orange;
}
.cell-4{
grid-area: footer;
background-color: black;
}
原文：https://www.cnblogs.com/dafran/p/12907462.html