fr单位知识

fr单位：这个单位怎么来说明呢？他的意思是fr单位代表网格容器中可用空间的一等份，这样说不是很好理解。
image
grid-template-columns: 2fr 2fr 1fr; 上面的图片意思是我用了这个就是网格模板的行分成了3份，每一份是2：2：1你也可以这样理解就是整个网格中有两个是1的两倍的。1fr 2fr是没有大小这个概念的他只在特定的网格中作为倍数划分。
1fr 1fr 1fr 与2fr 2fr 2fr是没有区别的你应该懂我的意思。

网格轨道

我们通过 grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列，说的真啰嗦就是说的是columns定义网格中一共分几列rows是分成几行。

repeat() 标记重复

repeat()有两个参数一个是你要分几个第二个是分的分多大。
意思就是grid-template-columns: 400px 1fr 1fr 1fr;你写着费劲是不？grid-template-columns: 400px repeat(3,1fr);你完全可以这样写。
你也可以这样写repeat(5,1fr 2fr);第二个参数传两个值， 1fr 2fr这样循环五次。
image

grid-auto-rows 和 grid-auto-columns

定义在grid-template-columns与grid-template-rows区域之外的行高。同grid-auto-columns类似，当单元格超出规定区域时，定义其行高。

minmax()定义最小高度

定义的高度跟当前容器的内容大小一样，但是最小高度不能少于minmax的这个参数
例子：grid-auto-rows: minmax(100px, auto); 高度不能少于100px，高度随内容大小而定

Grid网格线

e685add1289e2bd39ea66a99b17ed1ae.png
明白网格之后能够干什么呢？可以通过网格线的标号来进行start、end布局
我使用了grid-column-start (en-US), grid-column-end (en-US), grid-row-start (en-US) 和 grid-row-end (en-US) 属性
这里进行实践我们用grid来进行对mdn进行简单的布局：
6629e5ecdfc3ee4ae191720d142984ba.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            .wrapper{
                display: grid;
                grid-template-coluans:1fr 2fr 1fr;
                /* grid-template-rows: 1fr 2fr 1fr; */
                grid-auto-rows: minmax(100px,auto);
                grid-column-start: 3;
                }
            .wrapper div{
                background-color: antiquewhite;
                border: 1px solid rebeccapurple;
                margin-bottom: 10px;
            }    
            .box1{
                grid-column-start: 1;
                grid-column-end: 4;
                
            }
            .box2{
                grid-row-start: 2;
                grid-row-end: 4;
            }
            .box3{
                grid-row-start: 2;
                grid-row-end: 4;
            }
            .box4{
                grid-row-start: 2;
                grid-row-end: 4;
            }
            .box5{
                grid-column: 1/ 4;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box1">1</div>
            <div class="box2">2</div>
            <div class="box3">3</div>
            <div class="box4">4</div>
            <div class="box5">5</div>
        </div>
    </body>
</html>

效果图
68ab5c59b67145b18d5be9cc7dafd84b.png

网格间距

grid-column-gap 和 grid-row-gap 属性来创建，或者直接使用两个合并的缩写形式 grid-gap
grid-column-gap列于列之间的宽度 grid-row-gap行于行之间的宽度
grid-gap: 1rem 200px;第一个参数是行间距第二个参数是列间距，如果你想要间距一样当然你也可以写一个参数即可。

嵌套网格

嵌套网格和他的父级并没有关系。它并没有从它的父级继承属性
当你给儿子元素也加display: grid;这个里面也可以进行grid布局了并且儿子的布局元素不会继承父亲的元素。

.box3{
                display: grid;
                grid-row-start: 2;
                grid-row-end: 4;
                grid-template-rows: repeat(3, 1fr);
            }

image

z-index 控制层级

谁的值大谁的在上面。

CSS中网格对齐

对于网格来说，我们是让元素在它们各自的网格区域中对齐。

网格区域命名

grid-area 是一种对于 grid-row-start (en-US)、grid-column-start (en-US)、grid-row-end (en-US) 和 grid-column-end (en-US) 的简写，grid-area 属性还可以用于为网格项分配名称。然后，可以通过网格容器的 grid-template-areas 属性引用命名的网格项目

通过给元素起名字然后将起的名字写到grid-template-areas进行排版。就是我这里比如设置了9个网格需要将9个网格中都写入当前的网格属于哪个div的。

.wrapper {
              display: grid;
              grid-template-columns: repeat(3,1fr);
              grid-auto-rows: 100px;
              grid-template-areas: "head head head" "leftmain rightmain rightmain" "footer footer footer";
            }
            .box1{
                grid-area: head;
            }
            .box2{
                grid-area: leftmain;
            }
            .box3{
                grid-area: rightmain;
            }
            .box4{
                grid-area: footer;
            }

a4b899dde7209e0536289f5fc1eae8e9.png
对单元格留空：通过用.的方式给单元格留空". head head"这里的意思就是头部的最左边的单元格留下空了。通过这种方式是可以创建上下排列的单元格的要注意的是不能创建出L形状的区域。

网格布局图片展示小Demo

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Grid网格布局</title>
        <style>
            body{
                margin: 0;
                padding: 0;
                height: 100vh;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .container{
                width: 100%;
                display: grid;
                position: absolute;;
                grid-template-rows: 207px 155px 259px;
                grid-template-columns: 400px 365px 299px 118px 296px;
                grid-template-areas: 'a b d d f' 'a b e h h' 'a c e h h';
                justify-content: center;
                grid-gap: 3px
            }
            .item:nth-child(1){
                grid-area: a;
            }
            .item:nth-child(2){
                grid-area: b;
            }
            .item:nth-child(3){
                grid-area: c;
            }
            .item:nth-child(4){
                grid-area: e;
            }
            .item:nth-child(5){
                grid-area: f;
            }
            .item:nth-child(6){
                grid-area: d;
            }
            .item:nth-child(7){
                grid-area: h;
            }
             /* img{max-width: 100%; max-height: 100%; } */
             .item{
                 overflow: hidden;
             }
            
        </style>
    </head>
    <body>
        <div class="container">
            <div class="item"><img src="../JS/images/1.jpg" alt=""></div>
            <div class="item"><img src="../JS/images/3.jpg" alt=""></div>
            <div class="item"><img src="../JS/images/4.jpg" alt=""></div>
            <div class="item"><img src="../JS/images/1.jpg" alt=""></div>
            <div class="item"><img src="./gz.jpg" alt=""></div>
            <div class="item"><img src="../JS/images/4.jpg" alt=""></div>
            <div class="item"><img src="../JS/images/2.jpg" alt=""></div>
        </div>
        
    </body>
</html>

image