[Part 1] 介紹 Grid 內元素屬性

屬性

• grid-column-start / grid-column-end / grid-row-start / grid-row-end：指定內元素行與列的開始和結束線段
• grid-column / grid-row：為 start、end 的縮寫
• grid-area：為 grid-column、grid-row 的縮寫
• justify-self / align-self：自定義對齊（覆蓋外元素定義的 items 屬性）
• place-self：為 justify-self、align-self 的縮寫

grid-column-start / grid-column-end / grid-row-start / grid-row-end

grid-column-start / grid-column-end

grid-column-start: auto|span n|column-line;
grid-column-end: auto|span n|column-line;

• auto：自動填入（方向由 grid container 的 grid-auto-flow 決定），通常一個元素佔用一格
• span n：跨越固定數量的行或列 grid line
• column-line：grid line 的號碼（從 1 開始，反方向從 -1 開始）

grid-column-start / grid-column-end 範例

CodePen 範例

• grid-column-start: auto
  
• grid-column-start: span 3
  
• grid-column-start: 2
  
• grid-column-end: auto
  
• grid-column-end: 4
  
• grid-column-end: span 4
  

grid-row-start / grid-row-end

grid-row-start: auto|span n|column-line;
grid-row-end: auto|span n|column-line;

• auto：自動填入（方向由 grid container 的 grid-auto-flow 決定），通常一個元素佔用一格
• span n：跨越固定數量的行或列 grid line
• row-line：grid line 的號碼（從 1 開始，反方向從 -1 開始）

grid-row-start / grid-row-end 範例

• grid-row-start: auto
  

• grid-row-start: span 2
  

• grid-row-start: span 3
  

• grid-row-start: 2
  

• grid-row-start: 3
  

• grid-row-end: auto
  

• grid-row-end: span 2
  

• grid-row-end: 3
  

• grid-row-end: 4
  

grid-column / grid-row

grid-column

為 grid-column-start / grid-column-end 的縮寫。

grid-column: grid-column-start / grid-column-end;

.item1 {  
	grid-column: 1 / 3;  
}

相等於

.item1 {  
	grid-column-start: 1;
	grid-column-end: 3;  
}

grid-row

為 grid-row-start / grid-row-end 的縮寫。

grid-row: grid-row-start / grid-row-end;

.item1 {  
	grid-row: 2 / 4;  
}

相等於

.item1 {  
	grid-row-start: 2;
	grid-row-end: 4;  
}

grid-area

grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end | itemname;

.item1 {  
	grid-area: 2 / 4 / 5 / 8;  
}

相等於

.item1 {  
	grid-row-start: 2;
	grid-column-start: 4; 
	grid-row-end: 5; 
	grid-column-end: 8; 
}

也相等於

.item1 {  
	grid-row: 2 / 5;
	grid-column: 4 / 8; 
}