网格布局：display:grid

1.grid-template-columns ： 列属性
grid-template-rows：行属性

 		#site{
            color: white;
            display: grid;
            /* 把列分为3列，每列占1等分，可以使用repeat减少代码的重复 */
            // grid-template-columns: 1fr 1fr 1fr; /* repeat(3,1fr) */
            /* minmax表示最大值最小值 */
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 100px minmax(100px,auto) 100px;
            /* 每一列之间的间隔 */
            grid-column-gap: 10px;
            /* 每一行之间的间隔 */
            grid-row-gap: 5px;
            /* 行列间隔简写 */
            grid-gap: 10px 5px;
        }
        #part1 {
            background: blue;
            /*根据行列线号对该网格就行移动，然后其他的每一个格子就会自动补齐（如图2）*/
			grid-column-start: 2;
            grid-column-end: 3;    

            /*下列简写成 grid-row：2 / 3 */
            grid-row-start: 2;
            grid-row-end: 3;
        }
        #part2 {
            background: green;
        }
        #part3 {
            background: grey;
        }
        #part4 {
            background: red;
        }
        #part5 {
            background: yellow;
        }
        #part6 {
            background: purple;
        }
        #part7 {
            background: black;
        }
        #part8 {
            background: pink;
        }
        #part9 {
            background: orange;
        }

        <div id='site'>
	        <div id='part1'>1</div>
	        <div id='part2'>2</div>
	        <div id='part3'>3</div>
	        <div id='part4'>4</div>
	        <div id='part5'>5</div>
	        <div id='part6'>6</div>
	        <div id='part7'>7</div>
	        <div id='part8'>8</div>
	        <div id='part9'>9</div>
	    </div>

实例图：


2.grid-template-areas

		#site{
            color: white;
            display: grid;
            grid-template-columns: 3fr 1fr;
            grid-auto-rows: 100px 100px 300px 100px;
            grid-template-areas: 
                "header header"
                "nav nav"
                "main aside"
                "footer footer"
                
        }
        #area1{
            background: blue;
            grid-area: header;
        }
        #area2{
            background: green;
            grid-area: nav;
        }
        #area3{
            background: yellow;
            grid-area: main;
        }
        #area4{
            background: gray;
            grid-area: aside;
        }
        #area5{
            background: red;
            grid-area: footer;
        }
		<div id='site'>
	        <div id='area1'>1</div>
	        <div id='area2'>2</div>
	        <div id='area3'>3</div>
	        <div id='area4'>4</div>
	        <div id='area5'>5</div>
	    </div>

3.隐形网格
如果你定义了三行两列的网格，而你需要九个网格，那么多出来的三个网格就是隐形网格

#site{
            color: white;
            display: grid;
            grid-template-columns: 2fr 1fr;
            grid-template-rows: repeat(3,50px);

            /* 隐形网格的高度 */
            grid-auto-rows: 100px;
        }
        #part1 {
            background: blue;
        }
        #part2 {
            background: green;
        }
        #part3 {
            background: grey;
        }
        #part4 {
            background: red;
        }
        #part5 {
            background: yellow;
        }
        #part6 {
            background: purple;
        }
        #part7 {
            background: black;
        }
        #part8 {
            background: pink;
        }
        #part9 {
            background: orange;
        }
        <div id='site'>
	        <div id='part1'>1</div>
	        <div id='part2'>2</div>
	        <div id='part3'>3</div>
	        <div id='part4'>4</div>
	        <div id='part5'>5</div>
	        <div id='part6'>6</div>
	        <div id='part7'>7</div>
	        <div id='part8'>8</div>
	        <div id='part9'>9</div>
	    </div>