css Grid布局
Grid布局
css的布局方式主要有三种：float&position布局、flex布局、grid布局。
float布局存在非常多的问题，能别用就别用（由于出现时间较早，所以是三种布局中兼容性最好的）。
flex是轴线布局，只能针对项目在轴线的位置来实现布局。优点是现在基本的浏览器都支持flex布局，对比于float又非常的简便。
grid布局则是将容器划分行(row)和列(column)，产生单元格，然后指定项目(item)所在的单元格。grid布局方式远比flex布局强大，最直观的体现就是可以少用很多div来完成布局（div多了不好命名）。
基本概念
grid布局十分复杂，但是只要理解了下面这张图就会非常容易理解grid布局
image
我们需要记住这些单词
row(行)、column(列)、container(容器)、item(项目)、gap(间隔)、area(区域)
容器属性(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
gird-auto-flow:column优先从列开始排放grid-auto-flow:row优先从行开始排放gird-auto-flow:row dense稠密的排放，让后面的元素自动放入前面多余的空间
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
