CSS Grid 基本應用概念 [ Part.Ⅲ ] ★定義網格時命名技巧

嗨! 我們來看看在使用命名"行"的時候，這兩種方式是如何分工合作的。"線"的命名很實用，但一些令人困惑的是來自這個"名稱"和"軌道大小"的組合。透過下列的範例，它應該變得讓人更清楚、更容易上手。

★ 定義網格時命名行 ★

使用"行"和"網格"的模板列屬性來定義網格時，可以將網格中的部分或全部行分配成一個名稱。底下的範例，使用以(行的展示位置)為基礎的簡單佈局。這次將使用= 以"行"命名為基礎來建立的新網格。


關於基於行的位置的其他一切仍然以相同的方式工作，您可以混合命名的行和行號。在重新定義網格時創建響應式設計時，命名行很有用，而不需要通過更改媒體查詢中的行號來重新定義內容位置，您可以確保該行始終在您的定義中命名相同。

★ 為多行取個名字吧 ★

你可能想給一個以上的名字，也許它表示側邊欄和主要起點，比方說: sidebar-end 和 the main-start。在方括號內添加名稱，在它們之間用空格，如:[sidebar-end main-start]。然後，您可以通過任一名稱來引用該行。

★ 為隱式的網格區域命名 ★

在命名行時，可以使用自已喜歡的名稱。該名稱是一個自定義標識，一個作者定義的名稱。選擇名稱時，您需要避免可能出現在規範中的詞語，如:(td)、(span）等。

雖然可以選擇任何名稱，但是如果在區域周圍添加-start和-end，grid將為您建立一個使用的主名稱的命名區域。對於行和列都有[content-start] 和[content-end] 。這意味著我得到一個名為[content]的網格區域，並且可以根據需要在該區域放置一些東西。 

我正在使用與上面相同的網格定義，但是這次我將把一個單獨的項目放到指定的區域內容中。不需要定義區域與網格範本區域, 因為我們的命名"行"已經建立了一個新區域。

★ 來自命名區域的隱式網格 ★

在這個例子中, 我添加了一個額外的 div (overlay).我將已名命的的區域使用"grid-area"屬性，然後在"grid-template-areas. "建立Layout. 這些區域的名稱分別是:

★hd   ★ft   ★main   ★sd

而這些讓我們建構出欄與列:

• hd-start
• hd-end
• sd-start
• sd-end
• main-start
• main-end
• ft-start
• ft-end

在附圖中看到命名行, 請注意, 有些行有兩個名稱, 例如 sd-end 和 main-start 它們將會引用同一行列。使用這些隱式命名定位疊加與使用我們命名的行列定位項目相同。

很開心有這種能力來定位從"命名行"中的(命名區域)創立新的"行"，因此在開始創建網格佈局時，需要花一點時間來規劃您的命名原則。通過選擇對自已和您的團隊有意義的名稱，您將幫助每個人更輕鬆地使用您所設計的Layout。

★與repeat（）具有相同名稱的多行

如果要將網格中的所有行都設為唯一名稱，則需要長時間寫出軌道定義，而不是使用重複語法，因為您需要在定義軌道時在方括號中添加名稱。如果你使用重複語法，你將會得到多個具有相同名字的行。

在下一個例子中，我建立了一個具有十二個等寬列的網格。在定義列軌道的1fr大小之前，我還定義了[col-start]的行名稱。這意味著我們最終將得到一個12行列的網格，它們在1fr寬度列之前都被命名為col-start。

在這裡使用span關鍵字。右邊的項目將從名為col-start的第7行開始，並跨越3行。



重複語法也可以採取一個軌道列表，它不只是一個重複的單一軌道大小。下面的代碼將創建一個八軌道網格，一個窄的1fr寬的列名為col1-start，接著是一個更寬的3fr列，名為col2-start。

.wrapper {
  grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr);
}

如果重複語法將兩行代碼放在一起，那麼它們將被合併，並創建相同的結果，即在非重複的軌道定義中給出多行的名稱。以下定義創建了四個1fr音軌，每個音軌都有一個開始和結束行。

.wrapper {
  grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
}

您可以使用span關鍵字不僅跨越多行，而且建立跨越多個特定名稱的行。


在實踐中，我發現對於簡單的佈局來說，使用命名模板區域效果很好，它可以很好地顯示佈局的外觀，並且很容易在網格作調整。
如果您考慮網格系統（例如在Foundation或Bootstrap等框架中找到的網格系統），則這些系統基於12列網格。框架然後導入代碼來完成所有的計算，以確保列添加到100％。