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;

未完待續