16.grid布局

效果图：

DOM

<div class="grid">
    <div class="item column-start">111</div>
    <div class="item row-start">222</div>
    <div class="item">333</div>
    <div class="item">444</div>
    <div class="item">555</div>
    <div class="item">666</div>
    <div class="item">111</div>
    <div class="item">222</div>
    <div class="item">333</div>
    <div class="item">444</div>
    <div class="item">555</div>
    <div class="item">666</div>
    <div class="item">111</div>
    <div class="item">222</div>
    <div class="item">333</div>
    <div class="item">444</div>
    <div class="item">555</div>
</div>
<div class="keyboard">
     <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>        

css

.grid{
    display:grid;
    /*行高写法1*/
    grid-template-rows: repeat(5, 40px); 
    /*列宽写法1（行高也可以采用这种写法）*/
    /*grid-template-columns: 90px 50px 120px 120px 120px 120px;*/
    /*下面可以创建一个弹性的clumns*/
    /*列宽写法3*/
    /*grid-template-columns: 1fr 1fr 2fr 2fr 2fr 1fr;*/
    /*列宽写法2*/
    grid-template-columns: repeat(6, 1fr);
    /*列宽写法5*/
    /*grid-template-columns:100px repeat(4, 1fr) 2fr;*/
    /*行分隔线*/
    grid-row-gap: 1px;
    /*列行分隔线*/
    grid-column-gap: 1px;
    /*隐藏行*/
    grid-auto-rows: 140px;
    width: 100%;
    max-width: 1080px;
    margin: auto;
    /*justify-items:end;*/
}
.grid>.item{
    background: #58a;
    color: white;
                
    text-align: center;
    line-height: 40px;
    border-radius: 4px;
}
.column-start{
    /*跨几列*/
    /*grid-column:1/7;*/
    /*grid-column:1/span 6;*/
                
    grid-column: span 6;
                
}
.row-start{
    /*跨几行*/
    grid-row:2/5;
}
            
.keyboard{
    margin-top: 1rem;
    border: 1px solid #58a;
    display: -moz-grid;
    display: grid;
    grid-template-rows:repeat(3,40px);
    grid-template-columns:repeat(3,40px);
    grid-row-gap: 1px;
    grid-column-gap: 1px;
    width: 100%;
    max-width: 1080px;
    margin: auto;
    height: 400px;
    /*对齐方式*/
    /*justify-content: start;
    align-content: start;*/
    /*justify-content: end;
    align-content: end;*/
    /*justify-content: space-around;
    align-content: space-around;*/
    /*justify-content: space-between;
    align-content: space-between;*/
    /*justify-content: space-evenly;
    align-content: space-evenly;*/
    align-content: center;
    justify-content: center;
                
}
.keyboard>.item{
    background: #58a;
    color: white;
    text-align: center;
    line-height: 40px;
}

可以打开注释掉的css代码试一试就明白效果了