CSS Grid 基本應用概念 [ Part.Ⅰ]
網頁佈局是設計風格完成之後發表到網路上的基本動作之一，這系列文章主要是介紹
★ Fr 單位
它屬於"Grid" 的獨特長度單位，能幫助我們建立靈活的 grid tracks. 新的
另一種方式是與其它分數單位混合使用，如下:
.wrapper{
display: grid;
grid-template-columns: 500px 1fr 2fr;
}
先在第一區寬度設定500px，其它區域能分配的空間將被500px佔去了一部份，剩下來的空間將被分為三等分，按照fr的設定而分配。
★ 用 repeat() 來定義相同的Grid 行列
使用
★ 以 minmax() 自動建立行、列 Size ★
製作網頁時，常希望在空白網格中，除了能保有預設的高度之外，當網格增加了內容之後還能隨內容長短而自由的伸展，這個
CSS Grid 的用法，是我自己對於學習CSS Grid的紀錄，其實網路上已經有許多介紹關於 CSS Grid 的資源，相信在 CSS Grid 規範出現之後，我們就不必再依賴 Float 來製作網頁佈局了。
★ Grid是什麼？
“Grid”是一組交錯的水平和垂直線，元素內容可以放置在Grid裏。CSS網格佈局具有以下特點：1)
固定與靈活控制留白的大小2)
更精準的定位item的位置3)
更自由的控制對齊方式4)
靈活運用重疊的區域
Grid強大的規範，讓我們設計Layout時更加得心應手，當(flexbox)與Grid結合使用時，可以幫助您創作出以前無法在CSS中實現的佈局。
Grid強大的規範，讓我們設計Layout時更加得心應手，當(flexbox)與Grid結合使用時，可以幫助您創作出以前無法在CSS中實現的佈局。
★ 定義行與列的屬性
使用
grid-template-columns和grid-template-rows屬性在我們的網格上定義行和列。這個例子我們運用了200px來建立預設的欄位寬度，子元素將會以200px的尺寸在Grid裏呈現。★ Fr 單位
它屬於"Grid" 的獨特長度單位，能幫助我們建立靈活的 grid tracks. 新的
fr單位表示網格容器中可用空間的一小部分，它還可以根據空間的範圍增長或縮小喔。另一種方式是與其它分數單位混合使用，如下:
.wrapper{
display: grid;
grid-template-columns: 500px 1fr 2fr;
}
先在第一區寬度設定500px，其它區域能分配的空間將被500px佔去了一部份，剩下來的空間將被分為三等分，按照fr的設定而分配。
★ 用 repeat() 來定義相同的Grid 行列
使用
repeat()可以建立重覆的 grid tracks，它們適用建立相同尺寸的網格與多重網格。★ 以 minmax() 自動建立行、列 Size ★
製作網頁時，常希望在空白網格中，除了能保有預設的高度之外，當網格增加了內容之後還能隨內容長短而自由的伸展，這個
minmax()功能是最佳的解決方案。在範例中，grid-auto-rows將使用minmax()的值來定義這個屬性，這意味著自動建立的"行", 預設的高度至少是100px，最大的auto。使用auto意味著大小將會依內容的大小作伸展。
留言
張貼留言