CSS Grid网格布局从未如此简单
grid网格布局
一丶首先是作用在容器上的语法：
1.display : grid
将元素设置为网格布局
2.grid-template-columns : 设置列数
grid-template-rows : 设置行数
单位：fr，是个比例单位，表示占用网格的份数，1fr就代表一份，在网格的宽高固定的情况下使用。把每行的份数相加总和为多少fr，就把网格宽或高平均分成几份，具体每列设多少fr，就占据网格宽或高的多少份。例：grid-template-rows：1fr 1fr 1fr；网格共有三行，网格平均分成三份，每行占网格的一份。
可简写为：grid-template-rows: repeat(3 , 1fr);
grid-template-columns: repeat(3 , 1fr);
3. 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;
4.grid-column-gap : 列的间距
grid-row-gap : 行的间距
复合写法： grid-gap : grid-row-gap grid-column-gap
5.（1）justify-items : 子项的水平居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
start 以初始位置对齐
center 以中心位置对齐
end 以结束位置对齐
（2） align-items : 子项的垂直居中方式
默认 : stretch 默认值，拉伸。表现为水平或垂直填充。
start 以初始位置对齐
center 以中心位置对齐
end 以结束位置对齐
复合写法：place-items : align-items justify-items
6.（1）justify-content : 整体网格的水平对齐方式
默认：stretch 拉伸。表现为水平或垂直填充。
start ：子项以初始位置对齐
end：子项以中心位置对齐
center：子项以结束位置对齐
space-between：表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly： evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
（2）align-content : 整体网格的垂直对齐方式
默认：stretch 拉伸。表现为水平或垂直填充。
start ：子项以初始位置对齐
end：子项以中心位置对齐
center：子项以结束位置对齐
space-between：表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。
space-around：around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly： evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。
复合写法： 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
通常使用第一种方法，举例： #box3 div:nth-of-type(2){ grid-area: a5; }
#box3 div:nth-of-type(3){ grid-area: a9; } - grid-column-start 水平方向上占据的起始位置
grid-column-end 水平方向上占据的结束位置
grid-row-start 垂直方向上占据的起始位置
grid-row-end 垂直方向上占据的结束位置
注：只有在grid-column-end和 grid-row-end 中可以设置span操作。span去设置的不是结束位置，而是个数。
正常数字是位置，加上span是个数。
同时， 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>
<style>
*{margin: 0;padding: 0;}
img{display: block;}
ul{list-style: none;}
a{text-decoration: none;}
html,body{width: 100%;height: 100%;}
#main{width: 100%;height: 100%;display:flex}
/* -------------PART1-------------- */
#part1{width: 250px;padding-left: 20px;box-sizing: border-box;background: pink;}
#main .ul1{
line-height: 30px;color: #5c5f63;margin-top: 40px;margin-bottom: 60px;
}
#main .ul1 li:nth-of-type(1){
font-size: 28px;margin-bottom: 70px;
}
#main .ul1 li:nth-of-type(8){
margin-bottom: 50px;
}
#main .ul2{
font-size: 12px;line-height: 16px;color:#5c5f63 ;margin-top: 40px;margin-bottom: 21px;
}
#main a{color:#5c5f63 ;font-size: 12px;}
#main a:nth-of-type(2){
padding: 0 12px;margin: 0 12px;
border-right: 1px solid #5c5f63;
border-left: 1px solid #5c5f63;
}
/* --------------------PART2----------- */
#part2{
text-align: center;
display: grid;flex: 1;
grid-template: "a1 a1 a2 a3 a3 a3" 1fr
"a1 a1 a2 a3 a3 a3" 1fr
"a4 a4 a4 a5 a6 a6" 1fr
"a4 a4 a4 a7 a8 a8" 1fr
/1fr 1fr 1fr 1fr 1fr 1fr ;
}
#part2 div:nth-of-type(1){
grid-area: a1;background:url(../img/1.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(2){
grid-area: a2;background:url(../img/2.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(3){
grid-area: a3;background:url(../img/3.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(4){
grid-area: a4;background:url(../img/4.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(5){
grid-area: a5;background:url(../img/5.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(6){
grid-area: a6;background:url(../img/7.jpg) no-repeat center /100% 100%;
}
#part2 div:nth-of-type(7){
grid-area: a7;background:url(../img/6.jpg) no-repeat center / 100% 100%;
}
#part2 div:nth-of-type(8){
grid-area: a8;background:url(../img/8.jpg) no-repeat center /100% 100%;
}
#part2 div span{
display: flex;height: 100%;width: 0%;
background: rgba(0, 0, 0, .5); overflow: hidden;color:transparent;justify-content: center;
align-items: center;
}
#part2 div:hover span{
animation: qq .5s ease forwards;
}
@keyframes qq{
0%{width: 0%;}
70%{color:transparent;}
100%{width: 100%;color: white;}
}
</style>
</head>
<body>
<div id="main">
<div id="part1">
<ul class="ul1">
<li>JEAN-GEORGES</li>
<li>ABOUT</li>
<li>RESTAURANTS</li>
<li>GROUPS&EVENTS</li>
<li>PHOTOS</li>
<li>STORS</li>
<li>PRESS</li>
<li>RECIPES</li>
<li>RESERVATIONS</li>
</ul>
<img src="../img/1.png" alt="">
<ul class="ul2">
<li>CAREERS</li>
<li>CONTACT US</li>
<li>NEWSLETTER</li>
<li>ACCESSIBLE</li>
</ul>
<a href="#">LEGAL</a>
<a href="#">PHOTOS</a>
<a href="#">CREDITS</a>
</div>
<div id="part2">
<div><span>RESERVATIONS</span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
<div><span></span></div>
</div>
</div>
</body>
</html>
逆战班
2020.02.29