grid玩法：布局，九宫格

参考https://cloud.tencent.com/developer/article/1186773

1、布局

左右固定，中间自适应；左固定，右自适应；右固定，左自适应 -----见布局

2、九宫格

css:

.container{
     display: grid;
     grid-template-columns:repeat(3,1fr);
     grid-template-rows: repeat(3,1fr);
     height: 800px;
     width: 800px;
     grid-gap: 10px;
     margin: auto;
 }
.container div{
    text-align: center;
    background: pink;
}

html:

<div class=\"container\">
    <div class=\"item\">1</div>
    <div class=\"item\">2</div>
    <div class=\"item\">3</div>
    <div class=\"item\">4</div>
    <div class=\"item\">5</div>
    <div class=\"item\">6</div>
    <div class=\"item\">7</div>
    <div class=\"item\">8</div>
    <div class=\"item\">9</div>
</div>

3、圣杯布局和双飞翼布局

html:

<div class=\"container\">
        <div class=\"header\">header</div>
        <div class=\"left\">left</div>
        <div class=\"body\">body</div>
        <div class=\"right\">right</div>
        <div class=\"footer\">footer</div>

    </div>

css:第一种：

.container{
    display: grid;
    grid-template-columns: 200px 1fr 200px;/*三列，左右固定，中间自适应*/
    grid-template-rows: 100px 1fr 100px;/*三行，固定头部和底部的高度，中间自适应*/
    height: 800px;
    grid-template-areas: 
    \'header header header\'
    \'left body right\'
    \'footer footer footer\'
}
.header{
    grid-area: header;
    background: pink;
}
.left{
    grid-area: left;
    background: yellow;
}
.body{
    grid-area: body;
    background: yellowgreen;
}
.right{
    grid-area: right;
    background: lawngreen;
}
.footer{
    grid-area: footer;
    background: lightblue;
}

css第二种：

.container{
    display: grid;
    grid-template-columns: 200px 1fr 200px;/*三列，左右固定，中间自适应*/
    grid-template-rows: 100px 1fr 100px;/*三行，固定头部和底部的高度，中间自适应*/
    height: 800px;
}
.header{
    grid-area: 1/1/1/4;
    background: pink;
}
.left{
    background: yellow;
}
.body{
    background: yellowgreen;
}
.right{
    background: lawngreen;
}
.footer{
    grid-area: 3 /1/3/ 4;
    background: lightblue;
}