Grid网格布局

近期研究了一下网格布局，发现是真的好用！！！以下为本人学习阮大大的《CSS Grid网格布局》的部分学习笔记

网格布局

使用display:grid;实现网格布局
grid-template-columns:100px 100px 100px;定义每一列的列宽；三列都是100px
grid-template-rows:100px 100px 100px;定义每一行的行款；三行都是100px

1.可简写为以下形式使用repeat()方法：

1. grid-template-columns:repeat(3,100px);(列数，尺寸)repeat(3,33.3%)
2. grid-template-rows:repeat(3,100px);（行数，尺寸）repeat(3,33.3%)

repeat()还可以重复某种模式：

• grid-template-columns:repeat(2,100px 20px 80px);
• 定义了六列，第一列和第四列的宽度为100px,第二列和第五列为20px,第三列和第六列为80px

2.auto-fill关键字

单元格的大小是固定的，但是容器大小不确定，如果希望每一行或每一列容纳尽可能多的单元格，需要使用auto-fill关键字
例：grid-template-columns:repeat(auto-fill,100px);
假设容器为700px，则最多容下7个单元格

3.fr关键字

用于比例关系。如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。剩余空间的几倍。
grid-template-columns:1fr 1fr;//两列平分

4.minmax()

产生一个长度范围，表示长度在这个范围之中。接受两个参数，分别为最大值和最小值。
grid-template-columns:1fr 1fr minmax(100px,1fr);

5.auto关键字

表示有由浏览器自己决定长度
grid-template-columns:100px auto 100px;//可用于两列固定中间自适应

6.网格线的名称

grid-template-columns和grid-template-rows中可以使用方括号，指定每一根网格线的名字，方便以后的引用。
grid-template-columns:[cl] 100px [c2] 100px [c3] auto [c4];
grid-template-rows:[r1] 100px [r2] 100px [r3] auto [r4];

7.布局实例

两栏布局：grid-template-columns:70% 30%；
十二网格布局：grid-template-columns:repeat(12,1fr);

8.行间距(row-gap)与列间距(column-gap)以及gap(row-gap与column-gap简写)

row-gap:30px;
column-gap:20px;
等同于gap:30px 20px;

9.grid-template-areas

网格布局指定区域，一个区域可以由单个或多个单元格组成
grid-template-columns:repeat(3,100px);
grid-template-rows:repeat(3,100px);

grid-template-areas:"a b c"
		    "d e f"
		    "g h i";

上面的例子是分成了九个单元格，并命名为a到i九个区域,还可以分为下面这种形式

grid-template-areas:"a a a"
		    "b b b"
		    "c c c";

上面是将9个单元格分为3个区域，如果有些区域不需要利用，则使用点(.)表示

grid-template-area:"a . c"
		   "d . e"
	           "g . i"

中间一列为点，表示没有用到该单元格，或者该单元格不属于任何区域

10.grid-auto-flow

容器的子元素会按照顺序，自动放置在每一个网格。默认的放置顺序是“先行后列”，即放满第一行之后再，开始放入第二行。这个顺序由grid-auto-flow决定，默认值是row，也可以把他设置为column,变成“先列后行”;
grid-auto-flow:column;