CSS Grid

每次打 grid 这个单词的时候都很纠结,因为使用的是腾讯QQ拼音输入法,待选字符里面排第一的都会是”狗日的”.
实际使用中, CSS Grid 是需要设计师的良好设计结构为基础,良好的语义化html为辅助的.前者,我们可以试着去影响设计人员学习grid布局思想,后者则需要我们自己进行精细再精细的琢磨与总结.否则,grid会非常难以甚至无法在项目中得以实施.

什么是 CSS Grid

它是一种基于栅格布局体系的CSS框架.而这里所谓”框架”,其实质只是由普通CSS编写,并具有最大化复用程度的代码集合.

为什么要用 CSS Grid

就像萝卜白菜一样,每个人都有自己所选所爱,我们的设计人员同样如此.而为页面制作中的视觉设计提供一种规范的思想,能够很大程度上的提高前端开发与设计人员之间的和谐程度.但这只是一种思路而已,并不能作为统一的标准.如果想在自己的团队中推行,需要很大的成本去完善各个环节.

推荐的 CSS Grid 方式

下面就看看我现今觉得可以在中型项目中使用的一种布局方式:

/* **************** GRIDS ***************** */
.line:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.lastUnit:after{content: " . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . ";visibility:hidden; clear:both;height:0 !important;display:block;line-height:0;}
.line{*zoom:1;}
.unit{float:left;}
.size1of1{float:none;}
.size1of2{width:50%;}
.size1of3{width:33.33333%;}
.size2of3{width:66.66666%;}
.size1of4{width:25%;}
.size3of4{width:75%;}
.size1of5{width:20%;}
.size2of5{width:40%;}
.size3of5{width:60%;}
.size4of5{width:80%;}
.lastUnit {display: table-cell; *display:block;*zoom:1;float:none;_position:relative; _left:-3px; _margin-right: -3px;width:auto;}

其实,这是OOCSS中的百分比布局思想.推崇这种 CSS Grid 方式有以下的几个原因:

• 具有宽度自适应的先天优点,尤其是在手持设备成为未来趋势的今天.
• 条理清晰,维护便利
• 其中 .lastUnit 具有宽度自适应的优点,意味着不论前面放了多少的Unit(当然,前提是要比Unit总数小的),它都不会被”挤”下来.
• 可以方便的自定义宽度,只需使用时在基本布局宽度后面加上自定义的class.
• 利于设计人员理解与学习(个人的经验是,这样的思维比单纯的栅格化更利于设计人员接受).

当然,这样的布局并不一定适合项目,需要根据需求进行修改,例如,我的这个博客就没有使用 CSS Grid,因为DesiZen的布局足够的简单,但是借鉴了其布局的 .lastUnit,大家可以发现没有使用float,因此,无论我怎么改变左面的宽度,右面都可以伸缩自如.