制作自己的栅格系统 CSS

制作自己的栅格系统 CSS


响应式设计

在谈论栅格系统之前，我们先了解一下，响应式设计。简单来说，我们在设计的页面的时候，并不知道我们的页面会在什么设备呈现，为了在不同的设备上有最好的呈现效果，我们需要作出一些响应和调整。

响应式 Web 设计（Responsive Web design）的理念是，页面的设计与开发应当根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。

响应式设计有几个比较重要的点，包括：

  • viewport：让页面宽度等于设备宽度

  • 流式布局：百分比和浮动

  • @media：断点

栅格系统

为了能够更好的使用响应式设计，栅格系统应运而生。通过栅格系统，可以在切分的网格里按顺序叠加不同的宽度，并且易于管理。这样做的好处是显而易见的：

  • 提高生产力，通过在网格的划分，元素更容易堆放而且在跨浏览器上面具有一致性，使我们可以专心的注意布局而不是兼容上。

  • 具有灵活性，无论是什么样的布局，都可以拆分到粒度为一个网格的大小。

  • 支持响应式设计，栅格系统本身能很好的和响应式设计结合在一起，或者说，我们的栅格系统是基于响应式设计的。



栅格系统的实现

1.jpg


Container

2.jpg


一个用于摆放栅格系统的容器。通常我们希望这个容器占满整个整个页面，除非显示设备特别大，这个时候定一个最大宽度，则

.container {    width: 100%;    max-width : 1200px; }


Row

3.jpg

用于防止里面的列（ column ）溢出到其他的行。通常会需要清除浮动，因为我们是通过浮动来制作栅格系统的。

.row:before,.row:after {    content: "";     display: table;      clear: both;}

Column

4.jpg


栅格系统的核心，规定了列的宽度，位置和间隔。而在此之前，我们需要规定所有的盒子模型为 border-box 类型，这样做的原因是避免繁琐的计算和更简单的分列。（当然你也可以让页面上所有的盒子模型都设置为 border-box。）

.container * {     box-sizing: border-box}

这里我们把每一行分成 6 列，通过将其设置为浮动且百分比，能够很好的制作响应式页面。

[class *= 'col-'] {   float: left;     min-height: 1px;      padding: 12px;   /* 设置间距 */  }.col-1 { width: 16.66%; } .col-2 { width: 33.33%; } .col-3 { width: 50%; } .col-4 { width: 66.664%; } .col-5 { width: 83.33%; } .col-6 { width: 100%; }

Responsive

到此为止，我们的栅格系统已经设置的差不多了，为了支持响应式设计，参考 boostrap 的设置，我们可以给不同列设置不同的断点，这里以实现 md 和 sm 两种界限为例子：

@media all and (min-width: 769px) {    .col-md-1 { width: 16.66%; }     .col-md-2 { width: 33.33%; }     .col-md-3 { width: 50%; }     .col-md-4 { width: 66.664%; }     .col-md-5 { width: 83.33%; }     .col-md-6 { width: 100%; }}@media all and (max-width: 768px) {    .col-sm-1 { width: 16.66%; }     .col-sm-2 { width: 33.33%; }     .col-sm-3 { width: 50%; }     .col-sm-4 { width: 66.664%; }     .col-sm-5 { width: 83.33%; }     .col-sm-6 { width: 100%; }}