格線

網頁設計中常見的版面配置是標題、側欄、內文和頁尾版面配置。

標頭含有標誌和導覽,側欄和內容區域則分別顯示文章和文章

多年以來,有許多方法可解決這個版面配置問題,但使用 CSS 格線不僅相對簡單,還提供許多選項。格線非常適合用於結合外部大小設定提供的控制項,以及內部大小設定的彈性,因此非常適合這類版面配置。這是因為格線是專為二維內容設計的版面配置方法。也就是同時以列和欄排列內容。

建立格線版面配置時,您會定義格線的列數和欄數。接著,您可以將項目放到該格狀檢視畫面,或讓瀏覽器自動將項目放到您建立的儲存格中。格線有許多功能,但只要瞭解可用的功能,您就能立即製作格線版面配置。

總覽

那麼,您可以如何運用格線?格狀版面配置具有下列功能。本指南將說明所有這些功能。

  1. 您可以使用列和欄定義網格。您可以選擇這些資料列和欄的大小,或讓它們根據內容大小調整大小。
  2. 這個格線容器的直接子項會自動放到這個格線。
  3. 或者,您也可以將項目放置在所需的精確位置。
  4. 您可以為格線上的線條和區域命名,方便放置。
  5. 格狀容器中的空白空間可分散在各個軌道之間。
  6. 格狀項目可在其區域內對齊。

格線術語

格線有許多新的術語,因為這是 CSS 首次擁有真正的版面配置系統。

格線

格線由水平和垂直的線條組成。如果你的格線有四個欄,則會有五個欄線,包括最後一個欄後面的一條。

行號從 1 開始,編號會依照元件的書寫模式和腳本方向。也就是說,在由左至右書寫的語言 (例如英文) 中,欄 1 會顯示在左側,而在由右至左書寫的語言 (例如阿拉伯文) 中,欄 1 會顯示在右側。

格線的圖表表示

格線軌道

軌道是指兩條格線之間的空間。列軌道位於兩條列線之間,而欄軌道位於兩條欄線之間。建立格線時,我們會為這些軌道指派大小。

格線軌道的圖表表示

網格

格線儲存格是格線上最小空間,由資料列和資料欄軌跡的交叉點定義。就像試算表中的表格儲存格或儲存格一樣。如果您定義了格線,但未放置任何項目,系統會自動將一個項目排入每個定義的格線儲存格。

格線單元的圖表表示

格線區域

幾個格子組合在一起。格狀區域的建立方式是讓項目跨越多個音軌。

格狀區域的圖表表示

Gaps

軌道之間的溝槽或小巷。為了方便調整大小,這些軌道會像一般軌道一樣運作。您無法將內容放入間距,但可以跨越間距放置格狀項目。

以圖表表示的格線,其中有間隔

格線容器

已套用 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 元素旁的格線徽章,即可醒目顯示格線。在「版面配置」分頁中,選取下拉式選單中的「顯示行號」,即可在格狀檢視畫面中查看行號。

如說明文字和操作說明所述
Chrome 開發人員工具中醒目的格狀畫面,顯示行號、儲存格和軌跡。

內建大小設定關鍵字

除了長度和百分比維度 (如尺寸單位一節所述) 之外,格線軌跡也可以使用內在的尺寸關鍵字。這些關鍵字是在「方塊大小」規格中定義,並在 CSS 中新增其他方塊大小設定方法,而非僅限於格線軌道。

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

min-content 關鍵字會盡可能縮小音軌,但不會讓音軌內容溢出。變更範例的格狀版面配置,讓三個欄的軌道都以 min-content 大小顯示,就表示軌道會變得與軌道中字詞的長度一樣窄。

max-content 關鍵字則會產生相反的效果。軌道會變得足夠寬,讓所有內容都能以一長串連續字串顯示。由於字串不會換行,因此這可能會導致溢位。

fit-content() 函式一開始的運作方式與 max-content 相同。不過,一旦音軌達到您傳遞至函式的大小,內容就會開始捲動。因此,如果 max-content 大小小於 10em,fit-content(10em) 會建立小於 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() 函式

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

這個函式表示您可以為音軌設定最小和最大大小。這項功能相當實用。以上述 fr 單位為例,該單位會分配剩餘空間,因此可使用 minmax() 寫為 minmax(auto, 1fr)。格線會查看內容的內在大小,然後在為內容提供足夠空間後,分配可用空間。也就是說,您可能無法取得每個音軌都能平均分配網格容器中可用空間的情況。

如要強制將音軌的大小分配為等分,請在格狀容器中減去間距,使用 minmax。將 1fr 做為音軌大小,並替換為 minmax(0, 1fr)。這會使音軌的最小大小為 0,而非 min-content 大小。接著,格線會採用容器中所有可用的大小,扣除任何間距所需的大小,然後根據 fr 單位分享其餘部分。

repeat() 標記法

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 76.
  • Safari: 10.1.

Source

如要建立 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-fillauto-fit

您可以將所有關於音軌大小、minmax() 和重複播放的知識結合起來,藉由格狀版面配置建立實用的模式。您可能不想指定欄列的數量,而是想建立容器可容納的所有欄列。

您可以使用 repeat()auto-fillauto-fit 關鍵字來達成此目的。在下方示範中,格狀區塊會建立盡可能多且可容納在容器中的 200 像素軌道。在新視窗中開啟示範內容,並查看網格在可視區域大小變更時的變化。

在示範中,我們會取得可用的音軌。不過,這些軌道並非彈性軌道。直到有足夠的空間放入另一個 200 像素的音軌,才會出現空白。如果您新增 minmax() 函式,即可要求符合 200 像素 (最小) 和 1fr (最大) 的大小限制的音軌數量。接著,格線會排列 200 個像素的軌道,並將剩餘空間平均分配給這些軌道。

這會建立二維回應式版面配置,而不需要任何媒體查詢。

auto-fillauto-fit 之間有些許差異。在下一個示範中,我們會使用上述語法建立格狀版面配置,但格狀容器中只有兩個格狀項目。使用 auto-fill 關鍵字,您可以看到已建立空白軌道。將關鍵字變更為 auto-fit,並將音軌縮減至 0 大小。也就是說,彈性軌道現在會擴展,以便使用空間。

auto-fillauto-fit 關鍵字的其他行為則完全相同。一旦第一個追蹤記錄填入,兩者就沒有差異。

自動刊登

您在上述範例中已看到格線自動刊登位置的運作方式。項目會依照來源中顯示的順序,一個一個放入格子中。對於許多版面配置而言,這可能就夠了。如果您需要更完整的控管權,可以採取下列幾種做法。首先,請調整自動刊登位置版面配置。

將項目放入資料欄

格線版面配置的預設行為是沿著行放置項目。您可以改為使用 grid-auto-flow: column 將項目放入欄位。您需要定義列軌道,否則項目會建立內在的欄軌道,並將所有項目排列在一個長列中。

這些值與文件的寫入模式有關。資料列的方向一律會與文件或元件的寫入模式中句子執行的方向相同。在下一個示範中,您可以變更 grid-auto-flowwriting-mode 屬性的值模式。

跨越曲目

您可以讓自動置入版面配置中的部分或所有項目跨越多個音軌。使用 span 關鍵字,並加上要跨越的行數,做為 grid-column-endgrid-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-rowsgrid-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);
}

如要建立隱含的資料欄,並使用 100 像素和 200 像素寬的軌道模式。在這種情況下,第一個隱含欄會是 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;
}

名稱可以是任何名稱,但不能使用關鍵字 autospan。所有項目都命名後,請使用 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-columnsgrid-template-areas 的值,以便將版面配置改為三欄。在新視窗中開啟範例,試著調整可視區域大小,看看版面配置會如何變化。

您也可以查看 grid-template-areas 屬性與 writing-mode 和方向的關係,以及其他格狀方法。

快速鍵屬性

有兩個簡寫屬性可讓您一次設定多個格線屬性。這些屬性看起來可能有點令人困惑,但只要您瞭解它們如何搭配使用,就會發現它們很實用。你可以選擇使用哪種語法,也可以使用長寫形式。

grid-template

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

grid-template 屬性是 grid-template-rowsgrid-template-columnsgrid-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 資源

Browser Support

  • Chrome: 57.
  • Edge: 16.
  • Firefox: 52.
  • Safari: 10.1.

Source

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-contentjustify-content 值,瞭解軌道的運作方式。

請注意,使用 space-between 等值時,間距會變得更大,而跨越兩個軌道的任何格線項目也會增加,以吸收加入間距的額外空間。

移動內容

由於 justify-selfalign-self 的初始值為 stretch,因此含有背景顏色的項目會完全填滿所放置的格線區域。

在示範中變更 justify-itemsalign-items 的值,看看這會如何變更版面配置。格狀區域不會變更大小,而是在定義區域內移動項目。

進行隨堂測驗

測驗您對格線的瞭解

下列哪些是 CSS 格線術語?

訓練
差距
細胞
社交圈
曲目
區域
main {
  display: grid;
}

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

資料列

auto-fitauto-fill 有何不同?

auto-fit 會將容器拉長,以便容納子項,而 auto-fill 則會讓子項適合容器。
auto-fit 會將儲存格拉長,以符合容器大小,而 auto-fill 則不會。

什麼是 min-content

最長的字詞或圖片。
最小的字母
與 0% 相同

什麼是 max-content

最長的句子或最大的圖片。
最長的字詞。
最長的字母。

什麼是自動刊登位置?

當格狀子項項目已獲得 grid-area,並放置在該儲存格時。
未指派的格線項目在版面配置範本中相鄰。
當網格將子項項目取出,並根據瀏覽器的推論法將其放置在最佳順序時。

資源

本指南概略說明瞭格線版面配置規格中的各個部分。如需更多資訊,請參閱下列資源。