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;未完待续