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屬性