Grid布局

css的布局方式主要有三种：float&position布局、flex布局、grid布局。

float布局存在非常多的问题，能别用就别用（由于出现时间较早，所以是三种布局中兼容性最好的）。

flex是轴线布局，只能针对项目在轴线的位置来实现布局。优点是现在基本的浏览器都支持flex布局，对比于float又非常的简便。
grid布局则是将容器划分行(row)和列(column)，产生单元格，然后指定项目(item)所在的单元格。grid布局方式远比flex布局强大，最直观的体现就是可以少用很多div来完成布局（div多了不好命名）。

基本概念

grid布局十分复杂，但是只要理解了下面这张图就会非常容易理解grid布局

image

容器属性(container Attribute)

我们一定要弄清楚那些属性是写在容器上的，那些属性是写在项目上的

grid-template-columns/grid-template-rows

div{
    dispaly:grid;
    grid-template-columns:100px 100px 100px 100px
    grid-template-rows:100px 100px 100px 100px
    grid-gap:4px;
}

给容器设定为4行4列，宽高都为100px

image

1.repat()

但是每次都要写几行几列有点麻烦，这个时候我们可以使用repat()方法

div{
    dispaly:grid;
    grid-template-column:repat(4,100px);
    grid-template-row:repat(4,100px);
    grid-gap:4px;
}

repat()方法的第一个参数是行列的数量，第二个参数为大小。

2.auto-fill自动填充

item的大小我们已经得知，但是container的大小不确定时，可以使用auto-fill自动填充

grid-template-column:repat(auto-fill,100px);

3. fr(fraction)

为了方便表示比例关系，grid布局提供了tr关键字;

grid-template-column:1tr 2tr 3tr

这意味着第三列还会占据百分之50的空间。

4.minmax()

minmax()第一次参数为最小值，第二个参数为最大值。

5.auto 自动填充

6 网格线

grid布局存在隐藏的网格线，方便我们进行定位。

image

row-gap

gap表示item之间的相互的距离

grid-cotumn-gap :10px
grid-row-gap:10px

grid-template-area

一个区域由单个或者多个单元格组成，grid-template-area就是用于指定区域

    .container{
        grid-template-column:repat(3,33%)
        grid-template-area:'a b c' 'd d d'   
        grid-column-gap:4px;
    }
    <div class="container">
        <div class="box1">区域a</div>
        <div class="box2">区域b</div>
        <div class="box3">区域c</div>
        <div class="box4">区域d</div>
        <div class="box5">区域d</div>
        <div class="box6">区域d</div>
    </div>

区域的命名会影响到网格线，每个区域的起始网格线会自动命名为 areaName-start，终止线会自动命名为areaName-end

区域不需利用，则使用（.）表示

grid-auto-flow

划分网格以后，容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是"先行后列"即先填满第一行，再开始第二行

image

justify-items(水平方向)/align-items(重置方向)

设置单元格内容的水平和垂直方向的对齐方式。有四个属性start、end、center、stretch
合并属性place-items

justify-content/align-content

设置内容的对齐方式

• space-between 多余空间放在中间
• spce-around 空间放在两边
• flex-strat items都往起点靠拢
• flex-end items都往终点靠拢
• center 往中间靠拢 水平居中

grid-auto-columns/grid-auto-rows

用来设置多出来的项目宽高
有时候我们只设置了3*3个项目。但实际上有10个，这个属性就是用来设置多出来的项目的。

item Attribute

gird-column-starte/gird-column-end || grid-row-start/grid-row-end

用于设置item所占用的网格线

grid-column-start:1;
grid-column-end:3;

gird-column-starte/gird-column-end合并属性：grid-colums
grid-row-start/grid-row-end合并属性：grid-rows

        .container{
            width: 1000px;
            display: grid;
            grid-template-columns: repeat(2,50%);
            grid-template-rows: repeat(2,300px);
            grid-gap: 10px;
            text-align: center;
            line-height: 300px;
        }
        .box1,.box2,.box3{
            border: black solid 1px;
        }
        .box3{
            grid-column-start: 1;
            grid-column-end: 3;
        }

一个容器存在两列就会有三条网格线，我们给item设置为从起始线开始，到终止线结束

image

也可以使用span写法

        .box3{
            grid-column-start: span3;
        }

grid-area

指定项目放在哪一个区域。

在container里划分好区域，把第二行都设定为C区域

.container{
    grid-template-area:'a b' 'c c' 
}
.box3{
    grid-arae:c;
}

这样写一样能达到上面的效果，等于box3直接占用整个第二行C区域。

grid-ared属性可以用作grid-row-start/end grid-column-start/end的合并简写方式，直接指定项目位置。

grid-column-start:1;
grid-column-end:3;
grid-row-start:1;
grid-row-end:3;

等价于

grid-area:1,1,3,3;

justify-self/align-self

设置单元格内容的水平和垂直方向对齐方式，和合并为place-self