Grid网格布局
Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。
作用在容器上的：
display : grid
grid-template-columns : 设置列数
grid-template-rows : 设置行数
fr单位
repeat()方法
注：网格中提供了一个新的单位：fr ( 比例单位 )
grid-template-areas : 划分区域的
注：区域必须是矩形。
grid-template:复合写法
grid-template-rows
grid-template-columns
grid-template-areas
grid-template:
"a1 a1 a1" 1fr
"a3 a3 a2" 1fr
"a3 a3 a2" 1fr
/1fr 1fr 1fr;
grid-column-gap : 列的间距
grid-row-gap : 行的间距
grid-gap : 复合写法
grid-row-gap grid-column-gap
justify-items : 子项的水平居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
start
center
end
align-items : 子项的垂直居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
start
center
end
place-items : 复合写法
align-items justify-items
justify-content : 整体网格的水平对齐方式
默认：stretch
start
end
center
space-between
space-around
space-evenly
align-content : 整体网格的垂直对齐方式
默认：stretch
start
end
center
space-between
space-around
space-evenly
place-content : 复合写法
align-content justify-content
作用在子项上的：
grid-area : 找指定的区域
1.对应网格的名字
2.写对应的线的数字：grid-area : 1 / 3 / span 2 / 4;
grid-row-start / grid-column-start / grid-row-end / grid-column-end
grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置
注：只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。
正常数字是位置，加上span是个数。
grid-column:3 / 4;
grid-column-start / grid-column-end
grid-row:1 / span 2;
grid-row-start / grid-row-end
justify-self 单个网格中水平对齐方式
algin-self单个网格中竖直对齐方式
place-self复合写法，有顺序（竖直，水平）
实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
*{margin: 0;padding: 0;}
ul{list-style: none;}
a{text-decoration: none;color: #77818e;}
img{display: block;}
.clear:after{content: "";display: block;clear: both;}
html,body{height: 100%;}
#box{height:100%;display: flex;}
#box .box1{width:250px;}
#box .box1 div:nth-of-type(1){height: 240px;line-height: 240px;font-size: 26px;color: #77818e;font-family: Arial; padding-left: 24px;}
#box .box1 div:nth-of-type(2){height: 238px;font-size: 20px;color: #77818e;font-family: Arial;padding-left: 26px;}
#box .box1 div:nth-of-type(2) li{height: 34px;}
#box .box1 div:nth-of-type(3){height: 70px;line-height: 72px;font-size: 20px;color: #77818e;font-family: Arial;padding-left: 26px;}
#box .box1 div:nth-of-type(4){height: 80px;line-height: 86px;font-size: 14px;color: #77818e;}
#box .box1 div:nth-of-type(4) a{margin-left:22px;}
#box .box1 div:nth-of-type(5){height: 70px;font-size: 16px;color: #77818e;font-family: Arial;padding-left: 24px;}
#box .box1 div:nth-of-type(6){height: 52px;line-height: 52px; font-size: 10px;color: #77818e;font-family: Arial;}
#box .box1 div:nth-of-type(6) a{margin-left: 24px;}
#box .box1 .div text{float: left;}
#box .box2{width:auto;height: 100%;
display:grid;flex: 1;
grid-template-columns: repeat(6,1fr);
grid-template-rows: repeat(4,1fr);
grid-template-areas:
"a1 a1 a2 a3 a3 a3"
"a1 a1 a2 a3 a3 a3"
"a4 a4 a4 a5 a6 a6"
"a4 a4 a4 a7 a8 a8";}
#box .box2 div:nth-of-type(1){grid-area: a1;}
#box .box2 div:nth-of-type(2){grid-area: a2;}
#box .box2 div:nth-of-type(3){grid-area: a3;}
#box .box2 div:nth-of-type(4){grid-area: a4;}
#box .box2 div:nth-of-type(5){grid-area: a5;}
#box .box2 div:nth-of-type(6){grid-area: a6;}
#box .box2 div:nth-of-type(7){grid-area: a7;}
#box .box2 div:nth-of-type(8){grid-area: a8;}
#box .box2 div a{width:100%;height:100%;display: block;}
#box .box2 div img{width: 100%;height: 100%;display: block;}
#box .box2 div{position: relative;overflow: hidden;}
#box .box2 div p{width: 100%;height: 100%; color: white;background: rgba(0, 0, 0, .5);text-align: center;font-size: 16px;position: absolute;left: -100%; transition: 1s;display: flex;justify-content: center;align-items: center;}
#box .box2 div:hover p{left:0;top:0;}
</style>
</head>
<body>
<div id="box">
<div class="box1">
<div>
<a href=""><p>JEAN-GEORGES</p></a>
</div>
<div>
<ul>
<a href=""><li>ABOUT</li></a>
<a href=""><li>RESTAURANTS</li></a>
<a href=""><li>GROUPS $ EVENTS</li></a>
<a href=""><li>PHOTOS</li></a>
<a href=""><li>STORE</li></a>
<a href=""><li>PRESS</li></a>
<a href=""><li>RECIPES</li></a>
</ul>
</div>
<div>
<a href=""> RESERVATIONS</a>
</div>
<div>
<a href="#" class="iconfont iconxiangji"></a>
<a href="#" class="iconfont iconfacebook"></a>
<a href="#" class="iconfont iconboke"></a>
<a href="#" class="iconfont iconbird-xiaoniao"></a>
</div>
<div>
<ul>
<a href=""><li>CAREERS</li></a>
<a href=""><li>CONTENT US</li></a>
<a href=""><li>NEWSLETTER</li></a>
<a href=""><li>ACCESSIBLE</li></a>
</ul>
</div>
<div>
<ul class="text">
<a href="">LEGAL</a> |
<a href="">PHOTOS</a> |
<a href="">CREDITS</a>
</ul>
</div>
</div>
<div class="box2">
<div>
<a href="#"><img src="./img/01.jpg" alt=""></a>
<a href="#"><p> RESERVATIONS</p></a>
</div>
<div>
<a href="#"><img src="./img/02.jpg" alt=""></a>
<a href="#"><p> RESERVATIONS</p></a>
</div>
<div>
<a href="#"><img src="./img/03.jpg" alt=""></a>
<a href="#"><p> RESERVATIONS</p></a>
</div>
<div>
<a href="#"><img src="./img/04.jpg" alt=""></a>
<a href="#"><p> RESERVATIONS</p></a>
</div>
<div>
<a href="#"><img src="./img/05.jpg" alt=""></a>
<a href="#"><p> RESERVATIONS</p></a>
</div>
<div>
<a href="#"><img src="./img/06.jpg" alt=""></a>
<a href="#"><p> RESERVATIONS</p></a>
</div>
<div>
<a href="#"><img src="./img/07.jpg" alt=""></a>
<a href="#"><p> RESERVATIONS</p></a>
</div>
<div>
<a href="#"><img src="./img/08.jpg" alt=""></a>
<a href="#"><p> RESERVATIONS</p></a>
</div>
</div>
</div>
</body>
</html>
效果图