CSS Grid 基本應用概念 [ Part.Ⅰ]
網頁佈局是設計風格完成之後發表到網路上的基本動作之一,這系列文章主要是介紹 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&...