Grid box（网格式布局）

1.基础设置：

			display: grid;	
			/* grid可以嵌套使用 */
            grid-auto-rows: minmax(100px,auto);/* minmax(最小高度 最大高度) 可以设置为auto*/
            /* grid-auto-rows: 300px;行高 */
            grid-template-columns: 1fr 1fr;/*设置列宽*/
            /* grid-template-colums:repeat(2,1fr);  repeat（列数 宽度）*/
            grid-column-gap: 1rem;/*列间距*/ 
            grid-row-gap: 1rem;/*行间距*/
            grid-gap: 1rem;/* grid-gap是行间距和列间距的缩写 编写规则为：先行后列*/            
            justify-items: start;/* 水平对齐方式 */
            /* stretch(默认值) 完全拉伸 */
            /* start 以行轴线的起始位置对齐 */
            /* end 以行轴线的末位置对齐 */
            /* center 以行轴线的中心区域对齐  */
            align-items: center;/* 垂直对齐方式 */
            /* center 以列轴线的中心区域对齐 */
            /* stretch(默认值) 完全拉伸 */
            /* start 以列轴线的起始位置对齐 */
            /* end 以列轴线的末位置对齐 */
            对于单独的网格设计对齐方式要用到 justify-self和align-self 
            /* 网格的跨列 */
            grid-column:1/3; /* 跨越起始1到终止3列网格线 */
            /* 网格的跨行 */
            grid-row:1/3;  /*跨越起始网格线1-终止3行网格线*/

2.自定义网格布局：

例子：搭建一个3*3的网格
html部分

<div class="main">
        <div class="header">
           <h1>Hello NSh1>
        div>
        <div class="age">100div>
        <div class="phone">12313215div>
        <div class="box box-1">box-1div>
        <div class="box box-2">box-2div>
        <div class="box box-3">box-3div>
    div>

  .main{
     
            display: grid;
            grid-template-areas: 
            'a a a'
            'b b c'
            'd e f';
            grid-gap: 1rem;
        }
        .header{
     
            grid-area: a;
        }
        .age{
     
            grid-area: b;
        }
        .phone{
     
            grid-area: c;
        }
        .box-1{
     
            grid-area: d;
        }
        .box-2{
     
            grid-area: e;
        }
        .box-3{
     
            grid-area: f;
        }
        .header,
        .age,
        .box-1,
        .box-2,
        .box-3,
        .phone{
     
            text-align: center;
            border: 1px #cccccc solid;
        }

效果如下：

3.网格的嵌套：

html部分：

<div class="main">
        <div class="header"><h1>Hello NSh1>div>
        <div class="age">100div>
        <div class="phone">12313215div>
        <div class="box box-1">
            <div class="xx">xxdiv>
            <div class="xx">xxdiv>
            <div class="xx">xxdiv>
        div>
        <div class="box box-2">box-2div>
        <div class="box box-3">box-3div>
 div>

css部分·：

 .main{
     
            display: grid;
            grid-template-columns: repeat(3,3fr);
            grid-auto-rows: minmax(100px,auto);
            grid-gap: 1rem;
        }
        .main>div{
     
            background-color: #cccccc;
        }
        .main>div:nth-child(2n){
     
            background-color: cadetblue;
        }
        .box-1{
     
            display: grid;/*对box-1所在的网格在进行嵌套*/
            grid-template-columns: repeat(3,1fr);
            text-align: center;
        }

4.响应式布局拓展：

//对于网格布局来说，可以通媒体查询完成一定的响应式布局
 @media(max-width: 600px){
     
            .main{
     
                display: grid;
                grid-template-areas: 
            'a '
            'b' 
            'c'
            'd'
            'e'
            'f'; 
            }
//这个就是当最大宽度小于600px时，单元格变为6行1列