Learning ! 美好人生

★ 關於auto-placement的預設值 ★ 預設流程是按行排列專案。網格將在1行的每個儲存格中放置一個專案。如果使用網格範本行屬性創建了其他行, 則網格將繼續將專案放置在這些行中。如果網格在顯式網格中沒有足夠的行來放置所有項, 則將創建新的隱式行。 如果使用 grid-template-rows   屬性創建了其他行, 則網格將繼續將專案放置在這些行中。 如果網格在顯式網格中沒有足夠的行來放置所有項目, 它則將創立出新的隱式行。 這意味著它們將包含添加的內容, 而不會導致溢出。 但是, 您可以使用屬性網格 auto-rows 控制這些行的大小。若要使所有創建的行都為100px, 對於網格 auto-rows, 可以使用來建立size最小的行, 若是超過這個高度, 則會自動延伸到適合的內容。 See the Pen opMbqg by Melissa ( @barbow ) on CodePen .

嗨! 我們來看看在使用命名"行"的時候，這兩種方式是如何分工合作的。"線"的命名很實用，但一些令人困惑的是來自這個"名稱"和"軌道大小"的組合。透過下列的範例，它應該變得讓人更清楚、更容易上手。 ★ 定義網格時命名行 ★ 使用"行"和"網格"的模板列屬性來定義網格時，可以將網格中的部分或全部行分配成一個名稱。底下的範例，使用以(行的展示位置)為基礎的簡單佈局。這次將使用= 以"行"命名為基礎來建立的新網格。 See the Pen <a href='https://codepen.io/barbow/pen/QaaGdp/'>QaaGdp</a> by Melissa (<a href='https://codepen.io/barbow'>@barbow</a>) on <a href='https://codepen.io'>CodePen</a>. 關於基於行的位置的其他一切仍然以相同的方式工作，您可以混合命名的行和行號。在重新定義網格時創建響應式設計時，命名行很有用，而不需要通過更改媒體查詢中的行號來重新定義內容位置，您可以確保該行始終在您的定義中命名相同。

★ 網格線 ★  應該指出的是，當我們定義一個網格時，我們定義網格軌道，而不是線條。網格編號的行來定位項目時使用。在我們的三列中，兩排網格我們有四列線。 我們先為他們命名就能快速的定義一個區域，在 grid-template-areas 屬性 的值中指定這個區域的位置 。如果我們想建立包含"Header"、"Sidebar" 、"Content" 、"Footer"。初步為它們作定義吧。 接下來，不使用它們指定的行數放置項目，而是在網格容器上建立整個Layout。 See the Pen <a href='https://codepen.io/barbow/pen/eyeQZa/'>eyeQZa</a> by Melissa (<a href='https://codepen.io/barbow'>@barbow</a>) on <a href='https://codepen.io'>CodePen</