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;
}