格線

CSS Podcast - 011：格狀檢視畫面

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

這些年來 解決這個問題的方法有很多種 但透過 CSS 格線 不但相對簡單明瞭 但你有很多選擇 格線特別適合用來合併 與原生規模調整功能一樣簡單 因此很適合搭配這類版面配置使用 這是因為格線是專為平面內容設計的版面配置方法， 也就是說，系統會同時排列列和欄中的項目。

建立格狀版面配置時，您要定義包含列和欄的格線。 然後將項目放到該格狀檢視中 或者允許瀏覽器自動將儲存格加入您建立的儲存格中。 有很多東西可以格線 但會概略介紹 可以立即建立格線版面配置

總覽

格線的用途為何？ 格線版面配置提供下列功能。 本指南將提供所有功能的相關資訊。

1. 可以使用列和欄定義格線。 你可以選擇如何調整這些列和欄軌跡的大小，或是回應內容大小。
2. 格線容器的直接子項會自動放置於這個格線上。
3. 或者，您也可以將項目放在所需的精確位置。
4. 您可以替格狀空間中的線條和區域命名，以便輕鬆放置。
5. 格狀容器中的備用空間可分配到不同軌道之間。
6. 你可以在區域內對齊格線項目，

網格術語

Grid 第一次有了實際的版面配置系統，因此網格內有許多新的術語，

格線

網格由線條組成 都是以水平和垂直方向執行 如果方格有四欄 您就會有五行資料欄，包括最後一欄後的另一行

行的編號從 1、 方法是在元件的書寫模式和指令碼方向後面加上編號 也就是說，第 1 行文字會由左到右的語言顯示，例如英文、 寫成從右到左的語言 (如阿拉伯文)

格線軌道

軌跡是兩條格線之間的空間。 單行軌跡介於兩列和兩欄之間。 建立格狀檢視畫面時，我們會為音軌指派大小，以建立這些音軌。

網格

格線儲存格是由列軌和欄軌交集定義的格狀空間中的最小空間， 就跟試算表中的表格儲存格或儲存格一樣。 如果您定義了格線，但未在清單中放置任何項目 這些元素會自動在每個定義的格線儲存格中排列一個項目。

格線區域

多個格線儲存格。 格線區域的建立方式是使某個項目橫跨多個軌跡。

差距

軌道之間的溝槽或巷弄。 調整大小時，如同一般軌道一樣。 您無法將內容放入空檔，但可以橫跨格線項目。

格線容器

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

.container {
  display: grid;
}

格線項目

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

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

資料列和資料欄

如要建立基本格線，您可以定義包含三個欄軌的格狀清單， 。

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

這個網格會示範術語一節所述的許多項目。 這個模型共有三個欄軌， 每個音軌都使用不同的長度單位。 這個資料集有兩個列軌 一個使用長度單位和一個汽車 將模型大小調整為「自動調整」大小時，可視為與內容一樣大。 根據預設，音軌會自動調整大小。

如果含有 .container 類別的元素含有子項目， 他們會立即出現在這個格狀空間中您可以在下方的示範中查看實際操作。

Chrome 開發人員工具中的格線疊加層可協助您瞭解格線的各個部分。

在 Chrome 中開啟示範。 以灰色背景 (ID 為 container) 檢查元素。 在 DOM 中選取 .container 元素旁邊的格線標記，即可醒目顯示格線。 在「版面配置」分頁中 在下拉式選單中選取「顯示行號」，即可查看格線中的行號。

內建相同大小的關鍵字

除了 大小單位、 格線軌可使用內建函式大小關鍵字。 請按照 Box Sizing 規格定義這些關鍵字 在 CSS 中導入其他大小方塊的方法 而不只是格線軌道

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

min-content 關鍵字會讓音軌縮小，不如軌跡內容溢位。 變更範例格狀版面配置，讓三個欄軌達到 min-content 大小 的意思是，在曲目中最長的字詞

max-content 會產生相反效果 如此一來，音軌的寬度會足以讓所有內容顯示在一個不中斷的長字串中。 這可能會造成字串溢位，因為字串不會換行。

fit-content() 函式一開始會以 max-content 的形式運作。 不過，一旦軌跡達到傳入函式的大小後， 系統就會開始包裝內容 因此 fit-content(10em) 會建立一個長度小於 10em 的音軌。 如果 max-content 大小小於 10em， 但絕不會大於 10em。

在下一項示範中，您可以調整格線軌道大小，藉此嘗試各種內建大小的關鍵字。

fr 單位

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

fr 單位的運作方式與在 Flexbox 中使用 flex: auto 的方式類似。 會在項目編排後分配空間。 因此，可以讓三個資料欄中的可用空間都相同：

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

當 F 單位共用可用空間時 可以與固定大小差距或固定大小軌道結合。 如果元件具有固定大小的元素，而第二個軌跡佔滿所需的空間， 可做為 grid-template-columns: 200px 1fr 的曲目清單

為 fr 單位使用不同值會依比例共用空間。 較大的值會使空間更多。 在下面的示範中，變更第三首音軌的值。

minmax() 函式

這個函式代表您可以設定曲目的最小和最大尺寸。 這項功能非常實用 如果我們以上述 fr 單位為例，其中會分配剩餘空間 但可以考慮使用 minmax() 以 minmax(auto, 1fr) 表示。 格狀檢視內容與內建函式的大小 並在內容足夠空間後分配可用空間 因此，你可能無法得知各個音軌的佔比不均 顯示格狀容器中所有可用的空間

如要強制音軌在格狀容器中的空間均佔比，減去間距，請使用 minmax。 將 1fr 替換為 minmax(0, 1fr) 做為音軌大小。 這會將音軌的大小下限設為 0，而非最小內容大小。 接著格線會擷取容器中所有的可用大小 扣除任何落差所需的大小 並根據你的冷門分享其他分子。

repeat() 標記法

如果要建立具有等號欄的 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 像素、最大 1 fr。 接著，格線會排列 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 格線版面配置是以格線編號線條為基礎。 如要將項目放在格線上，最簡單的方式就是從一條行之間排列。 本指南將說明放置項目的其他方式 但你隨時都能取得這些編號

您可以使用下列屬性，按委刊項數量放置委刊項：

• grid-column-start
• grid-column-end
• grid-row-start
• grid-row-end

您可使用簡寫功能，同時設定開始與結束行：

• grid-column
• grid-row

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

.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。 該項目會在明確的格狀檢視中向右延伸。

不過，這僅適用於明確的格線。 將三列自動放置項目的版面配置製成版面配置 您想讓第一個項目橫跨到格線的結尾處

你認為可以把商品交給 grid-row: 1 / -1。 在下面的示範中，會發現效果不彰。 軌跡是在隱含格線中建立 沒有辦法使用 -1 到達格線末端。

調整隱式軌道大小

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

如要建立所有隱含資料列，大小下限為 10em 且大小上限為 auto，請執行下列操作：

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

如要建立隱含資料欄，模式應為 100px 和 200px 的寬度音軌。 在這個例子中，第一個隱含資料欄是 100px 第二個 200 像素 第三個 100px 等等

.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

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 資源

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- 的屬性用於區塊軸。 方塊在寫作模式中的配置方向

• justify-content敬上 和 align-content： 在格線容器中或不同軌道之間分配額外空間。
• justify-self 和 align-self: 會套用至格線項目，在其所在的格線區域內移動。
• justify-items 和 align-items: 套用至格線容器，以設定項目的所有 justify-self 屬性。

提供額外空間

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

請注意，使用 space-between、 ，且任何橫跨兩個軌道的格線項目也會擴大，以吸收這段間距增加的額外空間。

移動內容

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

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

隨堂測驗

測試你對網格的瞭解

main {
  display: grid;
}

資源

本指南將概略介紹格線版面配置規格的各個部分。 如需更多資訊，請參閱下列資源。

• MDN CSS 格線版面配置
• 格線完整指南
• 建立格線容器
• 在 Chrome 開發人員工具中檢查 CSS 格線
• 完整的格線學習教材