grid布局常用属性

grid布局即网格布局（二维），flex布局（一维）

<div class="wrap">

       <div class="item">item 1</div>

       <div class="item">item 2</div>

       <div class="item">item 3</div>

       <div class="item">item 4</div>

       <div class="item">item 5</div>

       <div class="item">item 6</div>

        </div>

.wrap{

display:grid;

} 

1.grid-template-columns属性设置列宽， grid-template-rows属性设置行高

①

grid-template-columns：200px ,300px,400px;

/* 声明了三列，宽度分别为 200px 300px 400px */

grid-template-rows：200px ,300px,400px;

/* 声明了三行，高度分别为 200px 300px 400px */

② fr将空间分成多个等分空间

grid-template-rows: 1fr 2fr 3fr;

三行，高度比1:2:3;

③ repeat():简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。

grid-template-rows: 1fr 1fr 1fr;

等价于grid-template-rows: repeat(3,1fr);

④minmax():函数接受两个参数，分别为最小值和最大值。

grid-template-columns:minmax(200px,500px);

/* 宽度最小200px,最大500px*/

⑤auto：由浏览器决定长度

grid-template-columns:200px,auto,200px;

第一,三列为 200px，中间由浏览器决定长度

2.grid-row-gap :行间隙   grid-column-gap：列间隙    grid-gap ：行，列间隙

grid-row-gap :40px;  行间隙40px

grid-gap:40px;   列间隙40px,行间隙40px

grid-column-gap：40px;  列间隙40px

3.网格模板

            grid-template-areas: 'header header header'

     /* 第一行header独占一行，因为有三列，所以要写3个header */

            'artical artical aside'

  /* 第二行artical与aside宽为2:1 */

            'box-1 box-2 box-3'

            'footer footer footer';

.header{

            grid-area: header;

            border:2px solid red;

        }

//.header放置在header模板上

4 . justify-content   项目在容器里面的水平位置   

 align-ittems 项目在容器里面的竖直位置 

start   ：对齐起始边框

end    ：对齐结束边框

center : 居中

space-around , space-between , stretch和flex布局一样

5.跨行 跨列

grid-column-start ：左边框所在的垂直网格线

grid-column-end ：右边框所在的垂直网格线

grid-row-start ：上边框所在的水平网格线

grid-row-end ：下边框所在的水平网格线