CSS 网格布局小记

CSS Grid 布局简单笔记。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
display: grid;

/* 设置行列间隔 */  
grid-gap: 0.5rem;

/*  
 * `repeat()`接受两个参数,第一个参数指定重复次数,第二个参数指定重复的值。

 * auto-fill 用尽可能多的列填充行(包括空列)  
 * 每当新列可以安装时,它都会创建隐式列,因为它试图用尽可能多的列填充行。新添加的列可能是空的,但其仍将占用行中的空间。

 * auto-fit 通过折叠空列后再扩展现有列以尽可能占用行中可用空间  
 * 工作方式与auto-fill类似,不同之处在于,在列排列完成后,会将空列折叠,然后将剩余空间分配给现有的列。  
 */

/*grid-template-columns: repeat(auto-fill, 100px);*/  
grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  
grid-template-rows: repeat(auto, 1fr);

/*  
 * grid-template-areas 属性用于定义区域  
 * 网格布局允许指定"区域"(area),一个区域由单个或多个单元格组成  
 * 区域的命名会影响网格线。每个区域的起始网格线,会自动命名为区域名-start,终止网格线自动命名为区域名-end  
 */

/*  
 * *-content 属性是整个内容区域在容器里面的 * 位置(左中右)  
 * *-content属性是整个内容区域的 * 位置(上中下)  
 */

/*  
 * *-items属性设置单元格内容的 * 位置(左中右)  
 * *-items属性设置单元格内容的 * 位置(上中下)  
 * place-items 单元格对齐方式简写  
 */

/*  
 * *-self属性设置单元格内容的 * 位置(左中右)  
 * *-self属性设置单元格内容的 * 位置(上中下)
 *  
 * 跟 *-items 属性的用法完全一致,只作用于单个项目  
 */

/*  
 * minmax()函数产生一个长度范围,表示长度就在这个范围之中  
 * 接受两个参数,分别为最小值和最大值  
 */

/*  
 * auto 关键字表示由浏览器自己决定长度  
 * grid-template-columns: 100px auto 100px;  
 * 上面代码中,第二列的宽度,基本上等于该列单元格的最大宽度  
 * 除非单元格内容设置了min-width,且这个值大于最大宽度  
 */

/* grid-area 属性指定项目放在哪一个区域 */

/* grid-template-* 属性中,可以使用方括号指定每一根网格线的名字,一根线可以有多个名称 */

/* **grid-auto-flow 属性 指定网格排列顺序 */

/* grid-auto-* 属性用于设置浏览器自动创建的多余网格的列宽和行高 */