css网格

body：

	<div class="container">
        <div class="item1">1</div>
        <div class="item2">2</div>
        <div class="item3">3</div>
        <div class="item4">4</div>
        <div class="item5">5</div>
        <div class="item6">6</div>
        <div class="item7">7</div>
        <div class="item8">8</div>
        <div class="item9">9</div>

    </div>

style：

 .container{
            display: grid;
            width: 900px;
            grid-template-areas:'a a b'
                                'a a d'
                                'c e d';
                                //网格的布局
            /* auto-fill 自动填充
            repeat(num,cellWidth)重复
            fr fraction 倍数
            auto 自动
            minmax 区间 */
            grid-template-columns: repeat(3,300px);
            /*行间距*/
            /*grid-row-gap: 20px;*/
            /*列间距*/
            /*grid-column-gap: 20px;*/
            /*行高*/
            grid-auto-rows: 300px 300px 300px;
            /*grig-gap: grid-row-gap grid-column-gap
            如果省略第二个参数 默认第二参数与第一参数相同
            最新语法可以忽略grid 直接写成 gap:10px */
			/*row默认 先行后列  dense (尽量塞满)   column先列后行*/
            /*grid-auto-flow: column;*/
            /*设置单元格内容的水平对齐方式 start end center stretch(拉伸)*/
            /*justify-items: stretch;*/
            /*设置单元格内容的垂直对齐方式*/
            /*align-items: stretch;*/
            /*对齐方式 如果没有第二个参数 则第二个参数与第一个参数相同*/
            /*place-items: center center;*/
            justify-content: center;
            align-content: center;
            /*place-content: center center;*/
        }
  .item1{
            background-color: red;
            /*grid-column-start: span 2;*/
            /*grid-column-end: 3;*/
            /*grid-row-start: d;*/
            /*grid-row-end: g;*/
            /*grid-column-start: a-start;*/
            /*grid-column-end: b-end;*/
            /*grid-row:1/3*/
            /* grid-area: a;   grid-row-start/grid-column-start/grid-row-end/grid-column-end */
            /*grid-area: 1/1/2/3;*/
            grid-area: a;
        }
        .item2{
            background-color: yellow;
            grid-area: b;
        }
        .item3{
            background-color: green;
            grid-area: c;
        }
        .item4{
            background-color: blue;
            grid-area: d;
        }
        .item5{
            background-color: pink;
            grid-area: e;
        }
        .item6{
            background-color: gray;
        }
        .item7{
            background-color: purple;
        }
        .item8{
            background-color: orange;
        }
        .item9{
            background-color: gold;
        }