格線佈局的基本概念

CSS 格線佈局 介紹了二維的 CSS 格線系統。格線可以用來佈置頁面的主要區域、或小型用戶介面。本文介紹 CSS 格線 Level 1 規範的其中一部份。這份概觀顯示的某些功能，將在教學的其他部份詳細解釋。

什麽是格線？

格線是一組水平線和垂直線的交叉集合（intersecting set）：一個定義為行（row），另一個定義為列（column）。你可以讓各元素依照行列的規則放到各格線上。CSS 格線佈局具有以下特點：

固定和靈活的軌道尺寸

你可以給各格線指定一個固定的軌道大小，例如像素（pixel）。這樣就能把格線設為指定的像素，以貼近你期望的排版。也可以創建一個使用百分比、或是新的 fr 單位之格線。 fr 單位就是為了格線布局而生。

單元佈置

你可以在格線使用行號、名字、目標區域，讓各單元放到精確的位置。格線也有控制非明式（explicit）單元的布局演算法。

Creation of additional tracks to hold content

你可以按照需求，定義明式格線、也可以處理沒有指定的格線、還可以增加額外的行（row）與列（column）。如果需要「盡可能地放進容器容得了的列」之類的也辦得到。

控制對齊

格線也包含了依序對齊的功能，以便控制各格線內的各單元、還有整個格線要如何對齊。

Control of overlapping content

數個單位也能被放進 grid cell、或是區域的一部分相互重疊。我們可以透過 z-index 控制該分層。

格線是個強大的規範、它在與諸如 彈性盒子 之類的 CSS 結合時，也有助於用 CSS 建立前所尚未有的排版。一切都建立要從建立 格線容器 （grid container）開始。

格線容器

我們會宣告 display: grid 或 display: inline-grid 來給一個元素建立格線容器（ grid container ）。宣告以後，該元素的所有 直接子元素 會變成 格線單位 （grid item）

本例中，我有個稱作 wrapper class 的 div，裡面有五個元素。

html 
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>

接著我讓 .wrapper 變成格線容器（grid container）。


css
.wrapper {
  display: grid;
  box-sizing: border-box;
.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;

在它下面的直接子元素，現在都是格線單元了。從網路瀏覽器來看，各單元變成格線的前後，似乎沒什麼不同，因為目前格線只有建立一個格線列，來放所有的格線單元。這時候，你會發現格線檢測器相當好用。如果在 Firefox 檢查這個示例的格線，你會發現在 grid 值旁邊，有一個小圖標。點選這個小圖標，瀏覽器視窗的元素，就會被一個圖層覆蓋。


在理解並與 CSS 格線共事時，這個工具能幫你視覺化理解，格線到底怎麼做動的。


如果要開始把做得更像格線，我們還需要多寫個 column track。

格線軌道（Grid Track）

我們在格線裡透過 grid-template-columns 與 grid-template-rows 屬性定義了行與列。它們也定義了格線軌道。 格線軌道 是在格線的兩個欄位之間的空隙。下圖就會看到軌道的高亮：就在格線裡面的第一行。

I can add to our earlier example by adding the grid-template-columns property, then defining the size of the column tracks.

I have now created a grid with three 200-pixel-wide column tracks. The child items will be laid out on this grid one in each grid cell.

html 
<div class="wrapper">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>

css
.wrapper {
  display: grid;
  grid-template-columns: 200px 200px 200px;
  box-sizing: border-box;
.wrapper {
  border: 2px solid #f76707;
  border-radius: 5px;
  background-color: #fff4e6;
.wrapper > div {
  border: 2px solid #ffa94d;
  border-radius: 5px;
  background-color: #ffd8a8;
  padding: 1em;
  color: #d9480f;
.nested {
  border: 2px solid #ffec99;
  border-radius: 5px;
  background-color: #fff9db;
  padding: 1em;