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;

未完待续