昨天我們將格線畫好，接下來在格線基礎上，加上更多的變化。

如果版面單純，子元素由左到右，一個蘿蔔一個坑，那把格線畫完就可以了。不過，來都來了，看看如何透過更多屬性，發揮格線最大的彈性。

今天介紹的屬性，能夠：

• 讓特定格子跨越多欄或多列（跨欄 / 跨列）
• 想讓格子的排序改成由上到下
• 想讓部分格線維持空白
• 調整格子內元素的對齊方式

格線的組成

開始前，先解釋名詞，網格中包含 網格線、網格區域、網格單元、網格間距、網格軌道。介紹屬性的寫法時，會用這些名詞來說明。

常用屬性

▶︎ 子元素佔位

可以在子元素上指定它的尺寸與位置。是以格線線號來計算，起始值是 1。並且支援負數，能用負數來反向計數。-1 表示最後一條線，以此類推，-2 就是倒數第二條。或者，可以用 span 指定要跨幾格。

• grid-column-start：欄的起始線 或 span 跨格數
• grid-column-end：欄的結束線 或 span 跨格數
• grid-column：上方兩向的簡寫（start / end）

.item {
  grid-column-start: 2;      /* 從第 2 條欄線開始 */
  grid-column-end: 4;        /* 到第 4 條欄線結束（跨 2 格） */
}

/* 也可以用 span 指定跨格數 */
.item2 {
  grid-column-start: 2;
  grid-column-end: span 2;   /* 從第 2 條線起，跨 2 格 */
}

/* 簡寫：grid-column: start / end */
.item3 {
  grid-column: 2 / 4;        /* 等同上面第一組寫法 */
}

.item4 {
  grid-column: 2 / span 2;   /* 等同上面第二組寫法 */
}

• grid-row-start：列的起始線 或 span 跨格數
• grid-row-end：列的結束線 或 span 跨格數
• grid-row：上方兩向的簡寫（start / end）

.item {
  grid-row-start: 1;         /* 從第 1 條列線開始 */
  grid-row-end: 3;           /* 到第 3 條列線結束（跨 2 格） */
}

/* 也可以用 span 指定跨格數 */
.item2 {
  grid-row-start: 1;
  grid-row-end: span 2;      /* 從第 1 條線起，跨 2 格 */
}

/* 簡寫：grid-row: start / end */
.item3 {
  grid-row: 1 / 3;           /* 等同上面第一組寫法 */
}

.item4 {
  grid-row: 1 / span 2;      /* 等同上面第二組寫法 */
}

摻在一起做成撒尿牛丸，組合拳打起來！

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 60px);
  gap: 4px;
}

.item1 { grid-column: 1 / 2; grid-row: 1 / 2; }  /* 第1列第1欄 */
.item2 { grid-column: 3 / 4; grid-row: 1 / 2; }  /* 第1列第3欄，中間(第2欄)沒放東西 */
.item3 { grid-column: 2 / 3; grid-row: 2 / 3; }  /* 第2列第2欄，左右兩格空著 */
.item4 { grid-column: 1 / 4; grid-row: 3 / 4; }  /* 第3列整排 */

還可以搭配 z-index，讓元素重疊

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 60px);
  gap: 4px;
}

.bottom {
  grid-column: 1 / 3;
  grid-row: 1 / 3;
  position: relative;
  z-index: 1;
}

.top {
  grid-column: 2 / 4;
  grid-row: 2 / 4;
  position: relative;
  z-index: 2;
}

同場加映 grid-area

• 極致簡寫，注意順序是先指定起始線，再指定終點。可以想像成依上 / 左 / 下 / 右來畫出格子。

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

• 搭配父元素 grid-template-areas ，指定區域名稱。

  .grid {
    display: grid;
    grid-template-areas:
      "header header header"
      "sidebar main   main"
      "footer footer footer";
  }
  
  .header  { grid-area: header; }
  .sidebar { grid-area: sidebar; }
  .main    { grid-area: main; }
  .footer  { grid-area: footer; }
  

  

▶︎ 資料流向

類似 Flexbox 的 flex-direction，在 CSS Grid 父元素下設定 grid-auto-flow，可以改變資料流向與自動版面布局：

• row（預設）：優先橫向填滿再換行
• column：優先縱向填滿再換列

不想留白，可以在加上 dense

• row dense 或 column dense：緊密模式，自動補齊因跳格產生的空白洞
  

💡「HTML 的 dir 屬性」與「writing-mode」也會影響排列方式。

▶︎ 整個網格的對齊

個人較少用到，當 grid 尺寸小於父容器時，使用以下屬性來對齊。操作起來類似 Flexbox 的軸線對齊。

• justify-content：整個網格的水平對齊

• align-content：整個網格的垂直對齊

• place-content：上面兩項的簡寫

  place-content：align-content / justify-content
  

以 place-content 為例

▶︎ 子元素的對齊

決定子元素在自己網格區域內的對齊，有兩種對齊方式。

1. 設定在父元素，統一控制：

   • justify-items：水平對齊

   • align-items：垂直對齊

   • place-items：上面兩項的簡寫

     place-items：align-items / justify-items
     

   
   以 place-items 為例

2. 設定在子元素，個別控制：

   • justify-self：個別水平對齊

   • align-self：個別垂直對齊

   • place-self：上面兩項的簡寫

     place-self：align-self / justify-self
     

   
   以 place-self 為例

.
.
.

呼~！知識點介紹告一段落。明天開始進入實際案例的分享，完成天數 +1 。

參考資料

• 《金魚都能懂的 CSS 必學屬性：網頁設計必備寶典》 李建杭（Amos）著
• MDN Web Docs