<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
body{
display: grid;
}
.header{
grid-row: 1;
grid-column:1/5;
background:orange;
}
.footer{
grid-row:3;
grid-column:1/5;
background:orange;
}
.left{
grid-row:2;
grid-column:1/2;
background:gold;
}
.center{
grid-row: 2;
grid-column: 2/4;
background:palevioletred;
}
.right{
grid-row:2;
grid-column: 4/5;
background: saddlebrown;
}
</style>
</head>
<body>
<div class="header">1</div>
<div class="left">2</div>
<div class="center">3</div>
<div class="right">4</div>
<div class="footer">5</div>
</body>
</html>首先给最外层的body设成display:grid。当然，是外层父级元素即可，不一定是body。
grid-row就是说由上到下，#header占据第1格，#left,#middle,#right占据第2格，#footer占据第3格。
而grid-column表示，在横向从左向右，分成了五格。其中#header和#footer占据全部。#left占据第1格，#middle占据第2到第4格，#right占据第5格。
不管是实现起来还是理解起来都很方便。
162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
