CSS 网格布局小记

 1display: grid;
 2
 3/* 设置行列间隔 */  
 4grid-gap: 0.5rem;
 5
 6/*  
 7 * `repeat()`接受两个参数，第一个参数指定重复次数，第二个参数指定重复的值。
 8
 9 * auto-fill 用尽可能多的列填充行（包括空列）  
10 * 每当新列可以安装时，它都会创建隐式列，因为它试图用尽可能多的列填充行。新添加的列可能是空的，但其仍将占用行中的空间。
11
12 * auto-fit 通过折叠空列后再扩展现有列以尽可能占用行中可用空间  
13 * 工作方式与auto-fill类似，不同之处在于，在列排列完成后，会将空列折叠，然后将剩余空间分配给现有的列。  
14 */
15
16/*grid-template-columns: repeat(auto-fill, 100px);*/  
17grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));  
18grid-template-rows: repeat(auto, 1fr);
19
20/*  
21 * grid-template-areas 属性用于定义区域  
22 * 网格布局允许指定"区域"（area），一个区域由单个或多个单元格组成  
23 * 区域的命名会影响网格线。每个区域的起始网格线，会自动命名为区域名-start，终止网格线自动命名为区域名-end  
24 */
25
26/*  
27 * *-content 属性是整个内容区域在容器里面的 * 位置（左中右）  
28 * *-content属性是整个内容区域的 * 位置（上中下）  
29 */
30
31/*  
32 * *-items属性设置单元格内容的 * 位置（左中右）  
33 * *-items属性设置单元格内容的 * 位置（上中下）  
34 * place-items 单元格对齐方式简写  
35 */
36
37/*  
38 * *-self属性设置单元格内容的 * 位置（左中右）  
39 * *-self属性设置单元格内容的 * 位置（上中下）
40 *  
41 * 跟 *-items 属性的用法完全一致，只作用于单个项目  
42 */
43
44/*  
45 * minmax()函数产生一个长度范围，表示长度就在这个范围之中  
46 * 接受两个参数，分别为最小值和最大值  
47 */
48
49/*  
50 * auto 关键字表示由浏览器自己决定长度  
51 * grid-template-columns: 100px auto 100px;  
52 * 上面代码中，第二列的宽度，基本上等于该列单元格的最大宽度  
53 * 除非单元格内容设置了min-width，且这个值大于最大宽度  
54 */
55
56/* grid-area 属性指定项目放在哪一个区域 */
57
58/* grid-template-* 属性中，可以使用方括号指定每一根网格线的名字，一根线可以有多个名称 */
59
60/* **grid-auto-flow 属性 指定网格排列顺序 */
61
62/* grid-auto-* 属性用于设置浏览器自动创建的多余网格的列宽和行高 */