浏览器的支持情况
使用grid的时候必须给它一个确切的行数和列数
.grid-style{ ????display:grid; ??grid-template-columns: 1fr 1fr; //创建了两列的网格 ??grid-column-gap:1px; //设置每列之间的间距 ??grid-row-gap:1px; //设置行之间的间距 ?????grid-template-columns:3fr 1fr 1fr; //第一列占三个网格 ??grid-template-rows:1fr 3fr; //第一行占1个网格第二行占3个网格 ???//响应时布局 ??@media screen and (min-width: 500px) { ?????grid-template-columns: 1fr 1fr 1fr; ??} ?@media screen and (min-width: 800px) { ?????grid-template-columns: 1fr 1fr 1fr 1fr; ??}} css3之grid
原文地址：http://www.cnblogs.com/cxdxm/p/7766128.html