11. Grid

Grid是將一個容器內的元件布置做網格狀布置，關鍵字為 display: grid(or inline-grid);然後用 grid-template-columns，來設定欄數。直接看以下例子:

	<div class="css11_1">
		<div>A</div>
		<div>B</div>
		<div>C</div>
		<div>D</div>
		<div>E</div>
		<div>F</div>
	</div>

加上css code:

	div.css11_1{
		display: grid;
		grid-template-columns: auto auto;
		padding: 10px;
	}
	
	div.css11_1 > div{
		background: orange;
		border: 1px solid black;
		color: white;
		font-size: 20px;
		text-align: center;
		padding: 20px;
		margin: 5px;
	}

上面css code內的grid-template-columns: auto auto;表示會有兩欄，而 div.css11_1 > div中的>符號表示只作用於子代，而不作用於之後的後代。顯示結果如下:

A

B

C

D

E

F

你可能會好奇若是設定為四欄會怎樣，原則上就是變成四欄，剩下兩個區塊在第二列靠左。

上例中我們使用margin: 5px;來讓各區塊看起來分開，我們可以使用 gird的grid-column-gap方法更方便的分隔兩欄。如下例在css code中加上grid-column-gap: 50px;。 (margin: 5px;去除)的顯示結果。

A

B

C

D

E

F

顯然也可以使用grid-row-gap來加上行的間距。再加上 grid-row-gap: 10px; 的顯示結果:

A

B

C

D

E

F

行欄(row column)的間距設定可以簡寫為: grid-gap: 10px 50px; 若是僅給一個數值表示row column的間距相同。

跨度

元件可以跨越欄或是行，加大跨度，只要使用 grid-column(row)-start及grid-column(row)-end; 來設定即可，如下例:

	div.css11_4{
		display: grid;
		grid-template-columns: auto auto;
		padding: 10px;
		grid-column-gap: 50px;
		grid-row-gap: 10px;
	}

	div.css11_4 > div{
		background: orange;
		border: 1px solid black;
		color: white;
		font-size: 20px;
		text-align: center;
		padding: 20px;
	}

	div.css11_4 > div:first-child{
		color:red;
		background: #1E90FF;
		grid-column-start: 1;
		grid-column-end: 3;
	}

請注意因為要橫跨兩欄，所以要止於第三欄，所以寫 grid-column-end: 3;

A

B

C

D

E

F

跨行就類似了，使用 grid-row-start:1;及grid-row-end:3;

顯示如下:

A

B

C

D

E

F

接下來將兩者合而為一，顯示如下:

A

B

C

D

E

F

css提供另一個簡易的寫法，就是使用
grid-column:1/3;(或寫grid-column:1/ span 2;)
來代替
grid-column-start:1;及grid-column-end:3;
類似的方式可以使用
grid-row:1/3;(或寫grid-row:1/ span 2;)
來代替
grid-row-start:1;及grid-row-end:3;
當合二為一時，可以直接加入兩行，也可以簡寫為
grid-area:1/1/3/3;(或寫1/1/span 2/3;)
來替換，其中前兩個數字是row/column的起始位置，後兩個是結束位置。

網格調整

在之前的例子中使用grid-template-columns: auto auto;來平分欄寬，若是欄寬並不均寬，則可以直接給數值。例如使用前例，先去除跨度，將 grid-template-columns: auto auto auto;改為 grid-template-columns: 100px auto 250px; css code如下:

	div.css11_7{
		display: grid;
		grid-template-columns: 100px auto 250px;
		padding: 10px;
		grid-column-gap: 50px;
		grid-row-gap: 10px;
	}

	div.css11_7 > div{
		background: orange;
		border: 1px solid black;
		color: white;
		font-size: 20px;
		text-align: center;
		padding: 20px;
	}

顯示結果如下:

A

B

C

D

E

F

也可以更改行高，加上 grid-template-rows: 100px 250px; 這行再看結果如下:

A

B

C

D

E

F

另一個方式是使用justify-content屬性來調整網格，有以下參數可使用:

justify-content: space-evenly; 平分欄空間
justify-content: space-around; 欄兩側空間相同(類似有margin)
justify-content: space-between;平分欄空間，但兩邊欄位靠兩側
justify-content: center; 欄位置中
justify-content: start; 欄位靠開始端(左)
justify-content: end; 欄位靠結束端(右)

css code與顯示如下:

div.css11_9{
	display: grid;
	justify-content: space-evenly; /*space-evenly, space-around, space-between, center, start, end*/
	grid-template-columns: 100px 100px 100px;
	grid-template-rows: 100px 250px;
	padding: 10px;
	grid-column-gap: 50px;
	grid-row-gap: 10px;
	background: springgreen;
	border: 1px solid red;
}

div.css11_9 > div{
	background: orange;
	border: 1px solid black;
	color: white;
	font-size: 20px;
	text-align: center;
	padding: 20px;

A

B

C

D

E

F

垂直向也可以調整，使用align-content 屬性，所用參數與justify-content相同，例如將上例的容器加上高度(400px)，然後調整元件的尺寸，再加上align-content屬性，code與顯示如下:

	div.css11_10{
		display: grid;
		height: 400px;
		justify-content: space-evenly; /*space-evenly, space-around, space-between, center, start, end*/
		align-content: center; /*space-evenly, space-around, space-between, center, start, end*/
		grid-template-columns: 100px 100px 100px;
		grid-template-rows: 100px 100px;
		padding: 10px;
		grid-column-gap: 50px;
		grid-row-gap: 10px;
		background: springgreen;
		border: 1px solid red;
	}

	div.css11_10 > div{
		background: orange;
		border: 1px solid black;
		color: white;
		font-size: 20px;
		text-align: center;
		padding: 20px;
	}

A

B

C

D

E

F

另一個分割方式為使用fr(fractional unit)，先將欄位切為數個碎片，再看每一欄占多少寬度。舉例如下:

	div.css11_11{
		display: grid;
		grid-template-columns: 1fr 2fr 1fr;
		grid-template-rows: 1fr 3fr;
		padding: 10px;
		grid-column-gap: 50px;
		grid-row-gap: 10px;
		background: springgreen;
		border: 1px solid red;
	}

	div.css11_11 > div{
		background: orange;
		border: 1px solid black;
		color: white;
		font-size: 20px;
		text-align: center;
		padding: 20px;
	}

A

B

C

D

E

F

看
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 1fr 3fr;
這兩行應該可以看出有三欄，分為四份，中間欄佔兩份。而行也分四份，第二行佔三份。
也可以使用以下寫法:
grid-template-columns: 1fr 2fr 100px;
grid-template-columns: 1fr 100px 2fr 10%;

區塊命名

可以採用對區塊命名的方式來控制其配置，需使用 grid-area: 名稱;屬性來達成。舉例說明如下:

	div.css11_12{
		display: grid;
		padding: 10px;
		grid-column-gap: 50px;
		grid-row-gap: 10px;
		background: springgreen;
		border: 1px solid red;
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(2, 1fr);
		grid-template-areas:'a a';
	}

	div.css11_12 > div{
		background: orange;
		border: 1px solid black;
		color: white;
		font-size: 20px;
		text-align: center;
		padding: 20px;
	}

	div.css11_12 > div:first-child{
		grid-area: a;
	}

根據上面的css code，首先我們將first-child命名為a。然後將它的範圍定義為
grid-template-areas:'a a';
表示a區塊佔據前兩欄。此外 repeat(3, 1fr)是1fr 1fr 1fr的另一個寫法。

A

B

C

D

E

F

上例中grid-template有三行，也可以合併寫為如下:
grid-template-areas:'a a .';
一點代表一欄，例如要做5欄，可以使用
grid-template-areas:'a a . . .';
如下:

A

B

C

D

E

F

如果跨度包含欄跟行，那麼使用如下語法:
grid-template-areas:'a a . . .' 'a a . . .';
顯示如下:

A

B

C

D

E

F

請注意雖然沒有5行，但是還是要寫'a a . . .'。

我們可以將每一區塊都命名，然後放在任何位置上。例如:

	div.css11_15{
		display: grid;
		padding: 10px;
		grid-column-gap: 50px;
		grid-row-gap: 10px;
		background: springgreen;
		border: 1px solid red;
		grid-template-columns: repeat(3, fr);
	}

	div.css11_15 > div{
		background: orange;
		border: 1px solid black;
		color: white;
		font-size: 20px;
		text-align: center;
		padding: 20px;
	}

	div.css11_15 > div:first-child{
		grid-area: 1/3/2/4;
	}
	div.css11_15 > div:nth-child(2){
		grid-area: 1/2/2/3;
		background: red;
	}
	div.css11_15 > div:nth-child(3){
		grid-area: 1/1/2/2;
	}
	div.css11_15 > div:nth-child(4){
		grid-area: 2/3/3/4;
	}
	div.css11_15 > div:nth-child(5){
		grid-area: 2/2/3/3;
	}
	div.css11_15 > div:last-child{
		grid-area: 2/1/3/2;
	}

A

B

C

D

E

F

使用區塊B來說明，它的位置在1/2/2/3，前兩個數字是起始行欄(row column) ，後兩個數字是結束行欄。

Layout

你應該早就猜想到可以使用Grid來做版面配置，以下為一簡單範例:

	<div class="css11_16">
		<div id="header">Header here</div>
		<div id="nav">nav here</div>
		<div id="leftbar">leftbar here</div>
		<div id="rightbar">rightbar here</div>
		<div id="content">content here</div>
		<div id="footer">footer here</div>
	</div>

加上css code:

	div.css11_16 > div{
		border: 1px solid blue;
		padding: 20px;
		font-size: 20px;
		font-weight: bolder;
		text-align: center;
		margin:2px;
	}

	div.css11_16 #header{
		grid-area: header;
		background: blue;
		color:gold;
	}

	div.css11_16 #nav{
		grid-area: nav;
		background: black;
		color: white;
	}

	div.css11_16 #leftbar{
		grid-area: leftbar;
		height: 500px;
		background: pink;
	}

	div.css11_16 #rightbar{
		grid-area: rightbar;
		background: pink;
	}

	div.css11_16 #content{
		grid-area: content;
		background: tan;
	}

	div.css11_16 #footer{
		grid-area: footer;
		background: green;
		padding: 10px;
		text-align: center;
	}

	div.css11_16{
		display: grid;
		/*grid-template-columns: repeat(5, 1fr);*/
		grid-template-areas: 
		'header header header header header header'
		'nav nav nav nav nav nav'
		'leftbar content content content content rightbar'
		'footer footer footer footer footer footer'	;
	}

css code中leftbar內之height: 500px;在真實使用時應去除，此處是為了讓這一行看起來長一點好看用的。顯示結果如下，比之前一章的方法來得簡潔有效得多了。

nav here

leftbar here

rightbar here

content here