一个简单的响应式横向网格布局框架Responsive Grid System

网页设计中有一个怎么也绕不开的问题，那就是布局问题。一般来说，一个div可能会分割成很多部分，同样是横向分割成两部分，但是在不同的项目中，我们可能会用不同的css代码，网格系统其实就是为这一类似的问题提供一个统一的解决办法。

网格布局有很多，但是有很多非常复杂，往往无法二次开发。Responsive Grid System是国外的一个网站，他们提供了一种非常简单的实现。其实每一个前端开发人员都可以写出这样的框架，但是，从头开始也许会让很多人动力不足。这个框架代码很简单，对我而言，采用它的原因仅仅是我能修改它，沿用它的结构和命名规则，很多时候，让我们无从开头一个系统的css代码的原因恰恰是因为不知道如何命名。

可以500%提高开发效率的前端UI框架！

我对这个框架的态度是：它给我们开了个好头，我可以按照我的想法继续下去。还有就是兼容性，国外那些特立独行的设计师们很少会考虑不支持html5的浏览器，他们或许做出来很多酷的效果，但别高兴早了，都是些在ie上没法用的。这个css框架可以兼容ie6.

 

来看看这个框架的例子程序，以3列和4列为例：

html代码：

<div class="section group">
    <div class="col span_1_of_3">
    This is column 1
    </div>
    <div class="col span_1_of_3">
    This is column 2
    </div>
    <div class="col span_1_of_3">
    This is column 3
    </div>
</div>
<div class="section group">
    <div class="col span_1_of_4">
    This is column 1
    </div>
    <div class="col span_1_of_4">
    This is column 2
    </div>
    <div class="col span_1_of_4">
    This is column 3
    </div>
    <div class="col span_1_of_4">
    This is column 4
    </div>
</div>

 

 

 

css代码： 可以500%提高开发效率的前端UI框架！

/*  SECTIONS  */
.section {
    clear: both;
    padding: 0px;
    margin: 0px;
}
         
/*  COLUMN SETUP  */
.col {
    display: block;
    float:left;
    margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }
         
/*  GRID OF THREE  */
.span_3_of_3 {
    width: 100%;
}
.span_2_of_3 {
    width: 66.1%;
}
.span_1_of_3 {
    width: 32.2%;
}
         
/*  GRID OF FOUR  */
.span_4_of_4 {
    width: 100%;
}
.span_3_of_4 {
    width: 74.6%;
}
.span_2_of_4 {
    width: 49.2%;
}
.span_1_of_4 {
    width: 23.8%;
}
         
/*  GROUPING  */
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}

 

 

虽然代码谁都能看懂，但是对于善于学习的人来说，关注的往往不是实现本身，而是为什么这样实现，如果是我，会怎么实现。所以我还是简单的讲讲这个网格系统的“原理”：

How It Works

 

.section

section元素将页面横向分割成几部分。可以500%提高开发效率的前端UI框架！

.group

group元素解决浮动的问题，这类似于网上的clearfix。兼容ie6以上。

.col

col将section分割成小栏目。每一栏都有一定的margin值。每一栏的宽度是用的百分比。百分比值应该是作者根据经验得出来的。

评论

1 楼 yizhyi 2014-10-14  

为什么没有效果图？