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</...

網頁佈局是設計風格完成之後發表到網路上的基本動作之一，這系列文章主要是介紹  CSS Grid  的用法，是我自己對於學習CSS Grid的紀錄，其實網路上已經有許多介紹關於  CSS Grid  的資源，相信在   CSS Grid  規範出現之後，我們就不必再依賴   Float 來製作網頁佈局了。 ★  Grid 是什麼？ ★  “Grid” 是一組交錯的水平和垂直線，元素內容可以放置在 Grid 裏。 CSS 網格佈局具有以下特點： 1)       固定與靈活控制留白的大小 2)       更精準的定位 item 的位置 3)       更自由的控制對齊方式 4)       靈活運用重疊的區域 Grid 強大的規範，讓我們設計 Layout 時更加得心應手，當( flexbox )與Grid 結合使用時，可以幫助您創作出以前無法在 CSS 中實現的佈局。 ★ 定義行與列的屬性  ★ 使用 grid-template-columns 和 grid-template-rows 屬性在我們的網格上定義行和列。這個例子我們運用了 200px 來建立預設的欄位寬度，子元素將會以 200px 的尺寸在 Grid 裏呈現。 See the Pen <a href='https://codepen.io/barbow/pen/rYZqmp/'>rYZqmp</a> by Melissa (<a href='https://codepen.io/barbow'>@barbow</a>) on <a href='https://codepen.io'>CodePen&...