格線

CSS Podcast - 011: Grid

網頁設計中相當常見的版面配置，包括頁首、側欄、內文和頁尾版面配置。

含有標誌和導覽的標頭，以及側欄和含有文章的內容區域

過去幾年來，有許多方法可以解決這個版面配置的問題，但使用 CSS 格線時，這個做法不僅相當簡單，但您有許多選擇。格線在結合運用外部尺寸的控制項時特別有用，可以提供內建函式大小的彈性，很適合這類版面配置。這是因為格線是一種專為二維內容設計的版面配置方法。也就是說，可以同時在資料列和資料欄中排列內容。

建立格狀版面配置時，您需要定義含有列和欄的格線。接著將項目放在該格狀空間中，或允許瀏覽器自動將項目放在您建立的儲存格中。格狀版面配置有很多種，但可讓您快速掌握可用項目的總覽，以便立即製作格線版面配置。

總覽

那麼，你可以如何運用格線？ 格狀版面配置具備下列功能。本指南將說明所有內容。

  1. 網格可以使用列與欄定義。你可以選擇如何調整這些列和欄軌的大小，或者設定這些列和欄軌的格式，或是對內容大小做出反應。
  2. 格線容器的直接子項會自動置於此格線中。
  3. 或者，您也可以將項目放在所需的精確位置中。
  4. 您可以為格狀空間中的線條和區域命名，以便放置在位置。
  5. 格狀容器中的釋出空間可以在測試群組之間分配。
  6. 格線項目可在其區域內對齊。

網格術語

CSS 是第一次擁有實際版面配置系統，因此格線包含許多新術語。

格線

格線由線條組成，可水平和垂直執行。如果格線有四欄，則將有五欄，包括最後一欄後方的欄。

線條是從 1 開始的編號，並依照元件的書寫模式和指令碼方向加上編號。這表示第 1 欄在左側以由左至右的語言 (例如英文)，在右側以由右至左的語言顯示，例如阿拉伯文。

格線圖

格狀軌道

軌跡是兩條格線之間的空間。列追蹤介於兩列之間，另一欄則介於兩欄之間。建立格線時，我們會為這些軌道指派大小，以建立這些軌道。

格線軌道示意圖

網格

格線儲存格是格狀儲存格中的最小空間，由列軌跡的交集定義。這就如同試算表中的表格儲存格或儲存格。 如果您定義了格線，但未放置任何項目，系統會自動在每個定義的格線儲存格中配置一個項目。

格線儲存格的圖表

格線區域

多個格線儲存格。格線區域的建立方式，是讓項目跨越多個軌道。

格線區域的示意圖

缺口

曲目之間有空白或斑點。就大小用途而言，運作方式就像一般的音軌一樣。你無法將內容置於間隔，但可以橫跨所有格狀項目。

有間隔的格狀檢視圖表

網格容器

已套用 display: grid 的 HTML 元素，因此會為直接子項建立新的格線格式內容。

.container {
  display: grid;
}

格線項目

格線項目是格線容器的直接子項項目，

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

資料列和資料欄

如要建立基本格線，您可以定義含有三個欄軌跡、兩個列軌跡和 10 像素間距的格狀檢視畫面，如下所示。

.container {
    display: grid;
    grid-template-columns: 5em 100px 30%;
    grid-template-rows: 200px auto;
    gap: 10px;
}

這個格狀表展示了術語一節說明的許多內容。此報表有三個欄軌。每個音軌都有不同的長度單位。這個指令碼有兩個列軌，一個使用長度單位，另一個使用自動。在自動調整大小播放軌道時，可視為與內容一樣大。根據預設，系統會自動調整播放軌的大小。

如果類別為 .container 的元素含有子項項目，這些子項目會立即顯示在此格線中。您可以在下方示範中查看實際運作情形。

Chrome 開發人員工具中的格狀重疊元素可協助您瞭解網格的各個部分。

在 Chrome 中開啟示範內容。 使用灰色背景 (ID 為 container) 檢查元素。 在 DOM 中選取 .container 元素旁邊的格線徽章，醒目顯示格線。在「Layout」分頁中，選取下拉式選單中的「Display Line Numbers」，即可查看格線的行數。

如同說明文字與操作說明
Chrome 開發人員工具中醒目顯示的格線，顯示行號、儲存格和軌道。

內建函式大小關鍵字

除了「大小單位」一節所述的長度和百分比維度外，格線軌跡則可使用內建函式大小調整關鍵字。這些關鍵字是在 Box Sizing 規格中定義，並在 CSS 中新增更多大小方塊的方法，而不只是格線軌跡。

  • min-content
  • max-content
  • fit-content()

min-content 關鍵字可將音軌最小化，避免播放軌跡內容溢出。如果變更格狀版面配置範例，讓三個資料欄軌在 min-content 大小皆相同，則會成為軌跡中最長字詞的狹窄。

max-content 關鍵字相反。 音軌的寬度會足以容納所有內容，並用一個長的未解字串顯示。 這可能會導致字串溢位，因為系統不會截斷字串。

首先，fit-content() 函式的運作方式與 max-content 類似。不過，曲目達到傳入函式的大小後，內容就會開始包裝。因此，如果 max-content 大小小於 10em，但絕不會大於 10em，fit-content(10em) 就會建立小於 10em 的測試群組。

在下一個示範中，請嘗試變更格線軌道的大小，嘗試不同的內建函式大小調整關鍵字。

fr 單位

包括長度維度、百分比，以及這些新的關鍵字。 還有一種特殊的大小調整方法，僅適用於格狀版面配置。此為 fr 單位，這是彈性長度，用來說明格線容器中的可用空間比例。

fr 單位的運作方式與在 Flexbox 中使用 flex: auto 的方式類似。在項目配置完成後分配空間。因此，請將三欄的可用空間都相同：

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

由於 fr 單位共用可用空間，因此可與固定大小差距或固定大小的軌跡結合。如要採用包含固定大小元素的元件，第二個軌跡佔據空間，您可以使用 grid-template-columns: 200px 1fr 的追蹤清單。

為 fr 單位使用不同的值會按比例共用空間。較大的值會獲得更多備用空間。在下方的示範中，會變更第三個音軌的值。

minmax() 函式

瀏覽器支援

  • 57
  • 16
  • 52
  • 10.1

資料來源

這個函式可讓您設定曲目的上下限。 這非常實用。如果我們採用上述 fr 單位來分配剩餘空間，則可使用 minmax() 做為 minmax(auto, 1fr) 來寫出它。格狀檢視畫面會查看內容的原始大小，然後在給內容有足夠的空間後分配可用空間。這表示您可能會發現，每個軌道的共用空間在格線容器中的所有可用空間可能都相同。

如要強制軌道在格狀容器中保留相同空間，減去間隔使用最小值。 將 1fr 替換為 minmax(0, 1fr) 的軌道大小。這會將音軌的大小下限設為 0，而非內容最小的大小。接著，格線會擷取容器中的所有可用大小，扣除落差所需的大小，並根據 fr 單位分享其餘部分。

repeat() 標記法

瀏覽器支援

  • 57
  • 16
  • 76
  • 10.1

資料來源

如要建立有相同資料欄的 12 欄軌跡格線，您可以使用以下 CSS。

.container {
    display: grid;
    grid-template-columns:
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr),
      minmax(0,1fr);
}

或者，您也可以使用 repeat() 寫入：

.container {
    display: grid;
    grid-template-columns: repeat(12, minmax(0,1fr));
}

repeat() 函式可用來重複發布測試群組清單的任何部分。 例如，您可以重複曲目模式。此外，你也可以建立一些一般測試群組和重複章節。

.container {
    display: grid;
    grid-template-columns: 200px repeat(2, 1fr 2fr) 200px; /*creates 6 tracks*/
}

auto-fill和auto-fit

您可以結合學到的全部內容、追蹤大小、minmax() 並重複，利用格線版面配置建立實用的模式。也許您不想指定資料欄追蹤的數量，而是想要建立符合容器大小的任意數量。

方法是使用 repeat() 和 auto-fill 或 auto-fit 關鍵字。 在下方示範的格中，系統會建立任意數量的 200 像素音軌，且能容納於容器內。在新視窗中開啟示範畫面，並查看格線在變更可視區域大小時的變化。

在試用方案中，我們可以選擇的曲目數量不拘。但是軌道無法彈性調整。結尾會有一些差距，直到空間足以容納另一個 200 像素音軌為止。 如果新增 minmax() 函式，您可以要求任意數量的曲目，大小下限為 200 像素，上限為 1fr。格線接著繪出 200 像素的軌跡，剩餘的空間則平均分配。

這會建立 2D 回應式版面配置，而無需使用任何媒體查詢。

auto-fill 和 auto-fit 之間有細微差異。在下一個示範中，使用上述語法製作格線版面配置，但在格線容器中只有兩個格線項目。使用 auto-fill 關鍵字即可看到已建立的空白曲目。將關鍵字變更為 auto-fit，軌道大小會收合為 0。也就是說，彈性軌跡現在變得能夠吸收空間。

auto-fill 和 auto-fit 關鍵字的行為完全相同。當播放第一首曲目後，兩者之間沒有任何差異。

自動放置

您目前在示範中已看過格線自動放置功能。項目會按照在來源中顯示的順序，在每個儲存格中逐一放置。對許多版面配置來說，這可能就是您需要的。如果您需要進一步掌控廣告，不妨參考以下兩件事。 首先，是調整自動顯示的版面配置。

在資料欄中放置項目

格狀版面配置的預設行為是將項目沿著列放置。您可以改用 grid-auto-flow: column，將項目放到資料欄內。您必須定義資料列追蹤，否則相關項目會建立內建函式的欄軌，並將所有版面配置排在一列中。

這些值與文件的書寫模式有關。資料列一律會按照文件或元件的書寫模式執行。在下一個示範中，您可以變更 grid-auto-flow 和 writing-mode 屬性值的模式。

移動軌道

您可以在自動放置的版面配置中，讓部分或所有項目涵蓋多個曲目。使用 span 關鍵字加上要橫跨的行數做為 grid-column-end 或 grid-row-end 的值。

.item {
    grid-column-end: span 2; /* will span two lines, therefore covering two tracks */
}

由於您尚未指定 grid-column-start，因此會使用 auto 的初始值，並會根據自動放置規則放置。您也可以使用簡短 grid-column 指定相同項目：

.item {
    grid-column: auto / span 2;
}

填補空檔

如果自動放置版面配置的部分項目橫跨多個軌跡，可能會導致網格含有部分未填滿的儲存格。採用完全自動放置版面配置的格狀版面配置預設行為為一律向前推進。系統會根據項目在來源中的順序，或透過 order 屬性進行的任何修改來放置項目。如果空間不足，無法容納某個項目，格狀檢視畫面會留下間隔，並移至下一個軌跡。

在下一個示範中，我們將顯示這個行為。這個核取方塊會套用密集封裝模式。 只要將 grid-auto-flow 的值設為 dense，即可啟用這項功能。這個值設定完成後，格線就會在版面配置中稍後擷取項目，並使用這些項目填補空白處。這可能表示螢幕與邏輯順序中斷連線。

放置項目

您有許多 CSS 格線功能。 現在，一起來看看如何在已建立的格線中放置項目。

首先，請記住，CSS 格線版面配置是以編號行的格線為基礎。如果要在格狀空間中放置內容，最簡單的方法是讓內容逐行對齊。您將在本指南中瞭解其他放置項目的方法，但您隨時可以存取這些編號行。

您可根據委刊項編號放置委刊項的屬性如下：

這些章節提供了簡寫，可讓您一次設定開始和結束線：

如要放置項目，請設定格線區域的開始與結束線。

.container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 200px 100px);
}

.item {
    grid-column-start: 1; /* start at column line 1 */
    grid-column-end: 4; /* end at column line 4 */
    grid-row-start: 2; /*start at row line 2 */
    grid-row-end: 4; /* end at row line 4 */
}

Chrome 開發人員工具可提供視覺化的指南，讓您檢查項目的放置位置。

行號會依書寫模式和元件方向顯示。在下一個示範中，請變更書寫模式或方向，看看項目的位置如何與文字流動一致。

堆疊項目

您可以使用線條定位，將項目放入格線的同一個儲存格中。換句話說，您可以堆疊項目，或讓一個項目稍微重疊。來源中較晚的項目會顯示在先前項目之上。您可以使用 z-index 變更這個堆疊順序，就像變更定位項目一樣。

負數行數

使用 grid-template-rows 和 grid-template-columns 建立格線時，會建立明確格線。這是您定義了測試群組大小的格線。

有時候，您會會有的項目顯示在這個明確的格狀空間之外。例如，您可以定義欄軌，然後新增數列格線項目，而不定義列軌。根據預設，系統會自動調整音軌大小。您也可以使用 grid-column-end 在明確格線定義之外的位置放置項目。在這兩種情況下，格線將建立軌跡來讓版面配置正常運作，而這些軌跡稱為隱含格線。

在多數情況下，使用隱含或明確顯示的格狀檢視沒有任何差別。不過，使用行距式刊登位置時，可能會出現兩者之間的主要差異。

您可以使用負數行編號，從明確格狀檢視的結尾行放置委刊項。假如您想設定某個項目從第一行到最後一欄，就非常實用。 在這種情況下，您可以使用 grid-column: 1 / -1。該項目會沿著明確格狀空間延伸，

不過，這項做法僅適用於明確格線。製作三個自動放置項目的版面配置，您希望第一個項目橫跨格線末端。

側欄含有 8 個同層格線項目

您可能會認為您可以為該項目提供 grid-row: 1 / -1。在下方示範中可看出這種做法無效。軌跡是在隱性格線中建立，無法透過 -1 到達格狀版面的結尾。

調整隱含軌跡的大小

根據預設，在隱含格線中建立的軌跡會自動調整大小。不過，如果您想控制資料列的大小，請使用 grid-auto-rows 屬性及 grid-auto-columns 資料欄。

如何建立大小下限為 10em、大小上限為 auto 的所有隱含資料列：

.container {
    display: grid;
    grid-auto-rows: minmax(10em, auto);
}

如要使用 100px 和 200px 寬軌的模式建立隱含資料欄，在這種情況下，第一個隱含資料欄為 100 像素、第二個 200 像素、第三個 100 像素，以此類推。

.container {
    display: grid;
    grid-auto-columns: 100px 200px;
}

已命名格線

如果程式碼行有名稱，而不是數字，這類元素可更輕鬆將項目放入版面配置中。您可以在方括號中新增選擇的名稱，為格線中的任一行命名。您可以加入多個名稱，只要用相同括號內的空格隔開即可。已有命名的行之後，即可使用這些行來取代數字。

.container {
    display: grid;
    grid-template-columns:
      [main-start aside-start] 1fr
      [aside-end content-start] 2fr
      [content-end main-end]; /* a two column layout */
}

.sidebar {
    grid-column: aside-start / aside-end;
    /* placed between line 1 and 2*/
}

footer {
    grid-column: main-start / main-end;
    /* right across the layout from line 1 to line 3*/
}

格線範本區域

您也可以為格線區域命名，並將項目加入這些已命名區域。這項技巧非常實用，可讓您直接在 CSS 中查看元件的樣子。

首先，請使用 grid-area 屬性為格狀容器的直接子項命名：

header {
    grid-area: header;
}

.sidebar {
    grid-area: sidebar;
}

.content {
    grid-area: content;
}

footer {
    grid-area: footer;
}

您可以加入關鍵字 auto 和 span 以外的任何名稱。 為所有項目命名後，請使用 grid-template-areas 屬性定義每個項目橫跨的格線儲存格。每個資料列都是在引號內定義。

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "header header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

使用 grid-template-areas 有幾項規則。

  • 這個值必須是沒有空白儲存格的完整網格。
  • 如要跨越音軌，請重複名稱。
  • 重複名稱後建立的區域必須為矩形，且無法中斷連線。

如果違反上述任何規則，系統會將該值視為無效並擲回。

如果要在格狀空間保留空白，請使用 . 或多個倍數，且兩者之間沒有空格。舉例來說，如要將網格中的第一個儲存格留空，我可以新增一系列 . 字元：

.container {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-areas:
        "....... header header header"
        "sidebar content content content"
        "sidebar footer footer footer";
}

由於整個版面配置都集中在一處定義，因此只要使用媒體查詢功能，即可輕鬆重新定義版面配置。在下一個範例中，我以重新定義 grid-template-columns 和 grid-template-areas 的值，建立了兩個欄的版面配置，並移至三個資料欄。在新視窗中開啟該範例，調整可視區域大小，看看版面配置是否改變。

您也可以查看 grid-template-areas 屬性與 writing-mode 和方向的關係，就像其他格線方法一樣。

急用屬性

有兩種簡寫屬性可讓您一次設定許多格線屬性，在您將兩者搭配運作的方式破壞之前，這些屬性看起來可能有些令人困惑。決定要使用長號或偏好使用長話模式完全由您決定。

grid-template

瀏覽器支援

  • 57
  • 16
  • 52
  • 10.1

資料來源

grid-template 屬性是 grid-template-rows、grid-template-columns 和 grid-template-areas 的簡寫。系統會先定義資料列，以及 grid-template-areas 的值。欄大小會在 / 之後新增。

.container {
    display: grid;
    grid-template:
      "head head head" minmax(150px, auto)
      "sidebar content content" auto
      "sidebar footer footer" auto / 1fr 1fr 1fr;
}

grid 個房源

瀏覽器支援

  • 57
  • 16
  • 52
  • 10.1

資料來源

grid 簡寫的使用方式與 grid-template 簡寫完全相同。用這種方式使用時，系統會將接受的其他格線屬性重設為初始值。完整組合如下：

  • grid-template-rows
  • grid-template-columns
  • grid-template-areas
  • grid-auto-rows
  • grid-auto-columns
  • grid-auto-flow

或者，您也可以使用此簡短定義隱含格線的行為，例如：

.container {
    display: grid;
    grid: repeat(2, 80px) / auto-flow  120px;
}

對齊

格線版面配置與您在 Flexbox 指南中介紹的對齊屬性相同。在格線中，開頭為 justify- 的屬性一律用於內嵌軸，即在書寫模式下，語句的執行方向。

以 align- 開頭的屬性會顯示在區塊軸上，代表區塊在寫作模式中的方向。

發布額外空間

在這個示範中，格線大於版面配置固定寬度軌跡所需的空間。這表示格狀檢視的內嵌和區塊尺寸皆有空間。嘗試不同的 align-content 和 justify-content 值，看看測試群組的行為。

請注意，使用 space-between 等值時，落差會變大，而跨越兩個軌跡的任何格線項目也會逐漸變大，以吸收加入的額外空間。

移動內容

具有背景顏色的項目看起來會完全填滿所在的格狀區域，因為 justify-self 和 align-self 的初始值為 stretch。

在示範中，您可以變更 justify-items 和 align-items 的值，看看這會如何改變版面配置。格線區域不會改變大小，而是在定義區域內移動項目。

隨堂測驗

測驗您對網格的瞭解程度

以下何者是 CSS 格線術語？

行
格線是按照這些水平和垂直運作的分隔符進行劃分。
社交圈
很抱歉，CSS 格線中沒有圓形的概念。
細胞
資料列和資料欄的同一交集會建立一個格線儲存格。
區域
合併多個儲存格。
訓練
很抱歉，CSS 格線中沒有火車概念。
缺口
儲存格之間的空格。
歷程
單一資料列或資料欄是指格狀檢視畫面。
 
main {
  display: grid;
}

格線的預設版面配置方向為何？

資料列
在未定義任何欄的情況下，格線子項按照平常的區塊方向版面配置。
欄
如果有 grid-auto-flow: column，則版面配置會是欄。

auto-fit 和 auto-fill 方案有何不同？

auto-fit 會將儲存格延展至符合容器大小，而 auto-fill 不會。
auto-fill 會盡可能將更多項目放入範本中，而不會延展。Fit 讓你貼合手腕。
auto-fit 會延展容器以符合子項，而 auto-fill 可讓子項符合容器。
這不是這些屬性的行為。

什麼是 min-content？

與 0% 相同
0% 是上層方塊的相對值，min-content 則是與方塊中的字詞和圖片相對的值。
最小的字母
雖然有最小的字母，但這並不是 min-content 所指的字母。
最長的字詞或圖片。
在「CSS 超棒」一詞中，我們稱為 min-content。

什麼是 max-content？

最長的句子或最大圖片。
這是要求或指定的方塊內容大小上限。這要先是句子的寬度，或者是圖片最寬的圖片。
最長的字母。
雖然內容包含最長的字母，但這並不是 max-content 所指的字母。
最長的字。
最長的單字是 min-content。

什麼是自動置入？

當格狀空間根據瀏覽器經驗法則，以最佳順序擷取子項項目，並按最佳順序排列。
瀏覽器不會變更你的內容順序，只有你的樣式會進行這項作業。
當格線子項項目獲得 grid-area，並放在該儲存格上時。
因為明確刊登位置並非自動刊登位置。
未指派的格線項目位於版面配置範本的下一個項目中。
沒有明確區域的格線項目會放在下一個可用的格線儲存格中

資源

本指南會概略介紹格線版面配置規格的不同部分。如需更多資訊，歡迎參閱下列資源。