阮一峰的网格布局（grid）教程3月25日发布，只为学习一波网格布局。网格布局虽然还不能支持商业使用，但是扩展一下知识面也是不错的。主流浏览器对网格布局的支持可以用来查看。Grid被称为史上最强大的布局方案。它将网页分成小格子，不同的格子可以任意组合，做出各种布局。布局。网格布局不同于弹性布局。flex布局是一种一维布局，只能改变item的轴位置。网格布局是一种二维布局，将容器分成行和列，生成单元格，然后指定项目所在的单元格。容器属性显示属性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-rowsdiv{display:grid;网格模板列：100px100px100px；grid-template-rows:100px100px100px;}//指定三行三列的网格，列宽和行高均为100px。除了设置px，还可以使用百分比div{display:grid;网格模板列：33.3%33.3%33.3%；grid-template-rows:33.3%33.3%33.3%;}repeat()当网格过多时使用repeat函数简化重复值。div{显示：网格；网格模板列：重复（3,33.3%）；grid-template-rows:repeat(3,33.3%);}repeat()接受2个参数，第一个参数是repeat，第二个参数是要重复的值。repeat()也可以重复某种模式grid-template-columns:repeat(2,100px20px80px);auto-fill关键字有时候单元格大小是固定的，但是容器大小是不确定的，如果你想让每一行或者每一列容纳尽可能多的单元格，可以使用auto-fill关键字来表示自动填充。.container{显示：网格；grid-template-columns:repeat(auto-fill,100px)}//自动填充，每列100px宽；fr关键字用于表示比例关系，网格布局提供了fr关键字。如果两列的宽度分别为1fr和2fr，则表示后者是前者的两倍。.container{显示：网格；grid-template-columns:1fr1fr;}minmax()minmax()函数生成一个长度范围，表示长度在这个范围内，接受两个参数，即最小值和最大值grid-tempalte-columns:1fr1frminmax(100px,1fr);auto关键字auto关键字表示长度由浏览器自己决定。网格模板列：100px自动100px；待续
