Grid網格佈局學習（1）

阮一峯的網格佈局（grid）教程於3月25號發佈,正好學習一波grid佈局。雖然grid佈局還不可以支持商用,擴展一下知識面也是好的。

grid佈局在主流瀏覽器的支持狀況can i use查看

grid號稱是史上最強大的佈局方案，它將網頁劃分紅一個個小網格，能夠任意組合不一樣的網格,作成各式各樣的佈局。

grid佈局和flex佈局不一樣，flex佈局是一維佈局，只能改變項目的軸線位置。grid佈局是二維佈局,將容器劃分紅行和列,產生單元格,而後指定項目所在的單元格。

容器屬性

display屬性

display:grid 指定一個容器採用網格佈局。

div{
    display:grid
}

默認狀況下容器都是塊級元素,但也能夠設置成行內元素。

div{
    diplay:inline-grid;
}

注意:設置成網格佈局以後，容器的float、display:inline-block、display:inline-cell、vertical-align和column-*等設置都失效。

grid-template-columns屬性和grid-template-rows屬性

容器指定爲網格佈局以後,就要設置列寬 grid-template-columns、行高 grid-template-rows

div{
    display:grid;
    grid-template-columns:100px 100px 100px;
    grid-template-rows:100px 100px 100px;
}
//指定了三行三列的網格,列寬和行高都是100px。

除了設置px還能夠用百分比

div{
    display:grid;
    grid-template-columns:33.3% 33.3% 33.3%;
    grid-template-rows:33.3% 33.3% 33.3%;
}

repeat()

網格特別多的時候能夠用repeat函數簡化重複的值。

div{
    display:grid;
    grid-template-columns:repeat(3,33.3%);
    grid-template-rows:repeat(3,33.3%);
}

repeat()接受2個參數,第一個參數是重複的次數,第二個參數是所要重複的值。
repeat()重複某種模式也是能夠的

grid-template-columns:repeat(2, 100px 20px 80px);

auto-fill關鍵字

有時候單元格大小是固定的，可是容器大小是不肯定的,若是但願每一行或每一列容納儘量多的單元格,這時能夠用auto-fill關鍵字表示自動填充。

.container{
    display:grid;
    grid-template-columns:repeat(auto-fill,100px)
}
//自動填充，每列寬100px;

fr關鍵字

爲了表示比例關係,網格佈局提供了fr關鍵字。若是兩列的寬分別爲1fr和2fr,就表示後者是前者的2倍。

.container{
    display:grid;
    grid-template-columns:1fr 1fr;
}

minmax()

minmax()函數產生一個長度範圍,表示長度就在這個範圍以內,接受兩個參數,分別是最小值、最大值

grid-tempalte-columns:1fr 1fr minmax(100px,1fr);

auto關鍵字

auto關鍵字表示由瀏覽器本身決定長度。

grid-template-columns:100px auto 100px;

未完待續