grid布局_grid布局 不压缩

Grid布局https://www.cnblogs.com/cythia/p/10894598.html

1. 概述

网格布局可以算得上是CSS最强大的布局方案了。
它可以将网页分为一个个网格，然后利用这些网格组合做出各种各样的布局。

2. 与flex布局的区别

1. 弹性布局（flex）：是轴线布局（一维布局）
2. 网格布局（grid）：是将容器划分成行和列，产生单元格，然后指定项目所在的单元格（二维布局）

3. fr

为了方便表示比例关系，网格提供了fr关键字（fraction的缩写，意为“片段”），如果两列的宽度分别为1fr和2fr，就表示后者是前者的2倍

4. 总结：

	1.容器和项目
		1.1 行、列和单元格
		1.2 网格线
A. 容器属性
	2 容器属性
		2.1 display：grid 属性
		2.2 display：inline-grid效果
	
	3 grid-template-columns 和 grid-template-rows
		3.1 repeat
		3.2 auto-fill
		3.3 fr
		3.4 minmax
		3.5 auto关键字
		
	4  grid-row-gap和grid-colunm-gap属性
			4.1 grid-row-gap：设置行与行之间的间隔
			4.2 grid-colunm-gap：设置列于列之间的间隔
				注：grid-row-gap和grid-colunms-gap合并简写的话,格式为grid-gap
	
	5 grid-auto-flow
	
	6 justify-items、align-items 、place-items 和 place-item属性
	  			justify-items: start | end | center | stretch;
	  			align-items: start | end | center | stretch;
	  			place-items: <align-items> <justify-items>
	
	 
	7 justify-content、align-content和place-content
		justify-content: start | end | center | stretch | space-around | space-between | space-evenly;
		align-content: start | end | center | stretch | space-around | space-between | space-evenly; 
		




B.项目属性
	1. grid-colunm-start属性
	2. grid-colunm-end属性
	3. grid-row-start属性
	4. grid-row-end属性
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