css grid layout擅長將頁面劃分為主要區域，或者在從html基元構建的控制項的各個部分之間定義大小，位置和圖層之間的關係。
與**一樣，網格布局使作者能夠將元素對齊到列和行中。但是，css網格可能比使用**更多或更容易布局。例如，網格容器的子元素可以自己定位，使它們實際重疊和分層，類似於css定位元素。
onetwo
three
four
five
sixcss檔案
@charset "utf-8";
display: grid;
grid-template-columns: repeat(3, 1fr);/*使用repeat()可以建立重複的網格軌道。
這個適用於建立相等尺寸的網格專案和多個網格專案。
repeat()接受兩個引數：
第乙個引數定義網格軌道應該重複的次數，
第二個引數定義每個軌道的尺寸。
fr單位可以幫助我們建立乙個彈列的網格軌道,
它代表了網格容器中可用的空間*/
grid-gap: 10px;/*grid-gap是grid-row-gap和grid-column-gap兩個屬性的縮寫，
如果它指定了兩個值，那麼第乙個值是設定grid-row-gap的值，
第二個值設定grid-column-gap的值。如果只設定了乙個值，
表示行和列的間距相等，也就是說grid-row-gap和grid-column-gap的值相同*/
grid-auto-rows: minmax(100px, auto);/*minmax()函式建立網格軌道的最小或最大尺寸
minmax()函式接受兩個引數：
第乙個引數定義網格軌道的最小值，
第二個引數定義網格軌道的最大值。
可以接受任何長度值，也接受auto值。
auto值允許網格軌道基於內容的尺寸拉伸或擠壓*/
}.one
.two
.three
.four
.five
.six
grid layout 網格布局 快速上手
grid布局非常強大，他是二維布局模式，將容器劃分成 行 和 列 產生單元格，然後指定專案所在單元格，而flex是一維布局，grid遠比flex強大的多。這裡我只講日常工作中常用的屬性。1 容器上的屬性 1 display屬性 display grid 用來指定容器為網格布局。這跟我們以前寫 dis...
CSS3 grid layout（網格布局）（三）
讓我們接著來看網格布局 網格軌道可以使用任何長度單位進行定義。網格還引入了乙個另外乙個長度單位來幫助我們建立靈活的網格軌道，那就是fr。fr代表網格容器中可用空間的一等份，並且受其影響的網格軌道會隨著可用空間的變化增長或者收縮。fr的數量表示在行或列中可容納的網格軌道的數量，而fr值的大小則決定了網...
CSS3 grid layout（網格布局）（四）
讓我們接著來看網格布局 與其他長度單位混合所產生的頁面效果 下面先放上例子 如下 height 100 display grid grid template columns 1fr 200px 定義乙個寬為1fr的列軌道和乙個寬為200px的列軌道 div1 div2 two效果如圖 我們可以看到，...