CSS第三课栅格系统

这一节内容我自己都觉得比较鸡肋，就当捧个场$_$，感兴趣的完全可以自行参考 uikit 和 bootstrap 的实现，以及二者的差异。

实现自己的栅格系统，实现响应式布局

利用栅格系统，完成设计稿的第二块区域。学有余力的同学，可以尝试再用inline-block实现。

section two

编写HTML

<section>
  <div class = "container text-center">
    <header class = "section__header">
      <h2>WHY USE OUR PLATFORM</h2>
    </header>
    <ul class = "list-nostyle row">
      <li class = "media--left col-md-4">
        <img src = "">
        <div class = "media__body">
          <h3 class = "media__heading">……</h3>
          <p>……</p>
        </div>
      </li>
      ……
    </ul>
  </div>
</section>

栅格系统

栅格系统的作用在于：

快速布局
可重用
响应式设计

如果用过Bootstrap，你就知道，Bootstrap采用了12列的栅格。其实你完全可以自由设计栅格的列数，12、16、24等等都是可以。

但是，你可能需要关注，960这个数字，很多网站默认的宽度都是960px：

website use 960px

之所以选择960是因为绝大多数显示器都是1024宽，那为了避免出现水平方向的滚动条，那就会采用一个比1024窄一点的宽度，而960正可以被很多数整除：

1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480, 960

对于布局来说，你可以选择更多的比例。

如果我们选择1000，相对就不是那么方便了：

1, 2, 4, 5, 8, 10, 20, 25, 40, 50, 100, 125, 200, 250, 500, 1000

现在我们来写一个栅格系统：

栅格系统的基本结构

在进行排版时，需要对水平轴划分，将相应的内容放到之前规划的位置。这就是我们看到的row（行）和column（列），column作为row的子元素；

html结构：

<div class = "row">
  <div class = "col-x">
  </div>
</div>

有的栅格系统还会用一个container将row包裹起来，这不是必须的，如果你没有特殊的需求，放心大胆的直接用row和column。在bootstrap中，row需要被container包裹，看下源码，想想为什么Bootstrap这么设计：

.container
{
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .container {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .container {
    width: 1170px;
  }
}

.row {
  margin-right: -15px;
  margin-left: -15px;
}

定义列Column

我们这里采用12列的栅格系统，行用.row来控制，列column我们参考Bootstrap的命名，col-md-x。

其中，x代表1~12的数字，xs,sm,md,lg匹配不同屏幕大小：

栅格类

采用float：

[class ^= "col-"]{
  float: left;
  list-style: none; 
}

.col-md-12{
  width: 100%;
}
.col-md-11{
  width: 91.66666667%;
}
.col-md-10{
  width: 83.33333333%;
}
.col-md-9{
  width: 75%;
}
.col-md-8{
  width: 66.66666667%;
}
.col-md-7{
  width: 58.33333333%;
}
.col-md-6{
  width: 50%;
}
.col-md-5{
  width: 41.66666667%;
}
.col-md-4{
  width: 33.33333333%;
}
.col-md-3{
  width: 25%;
}
.col-md-2{
  width: 16.66666667%;
}
.col-md-1{
  width: .083333333%;
}

对所有的col都添加了list-style: none，兼容<li>的情况。

清除浮动

这次我们采用clearfix实现：

.row:before,
.row:after{
  content: '';
  display: block;
}
.row:after{
  clear: both;
}

完善栅格

现在你已经可以使用栅格系统完成布局了：

但是还有两点需要处理：

在栅格之间增加间隔：我们很多时候都需要栅格之间要有一定间隔，而不是两个紧挨着。
移动适配：我们的布局应该能适应不同屏幕的大小

增加间隔

并不是所有的栅格之间都需要间隔，所以没有间隔的栅格也是需要保留的。那就新增一个类来控制有间隔的栅格：

.row-divider > *{
  padding-right: 1.6%;
  padding-left: 1.6%;
}

为了避免重新计算宽度所占的百分比，这里我们使用了padding。

移动适配

可以采用两种实现方案，一种是根据屏幕大小来调整col-的宽度，另外一种是根据屏幕大小应用不同的class。两种方法其实都很简单，直接上代码：

1. 调整col-宽度

.col-6{
  width: 50%;
}

@media all and (max-width: 750px){
  width: 100%;
}

这里只是给出了最简单的演示，很多时候，我们需要设置多个阈值，并且还要考虑最后一个元素是否会溢出的问题，这些需要提前计算好。

2. 应用不同的class

/* 小屏幕（平板，大于等于 768px） */
@media (min-width: @screen-sm-min) { ... }

/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width: @screen-md-min) { ... }

/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width: @screen-lg-min) { ... }

<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop -->
<div class="row">
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

这里直接粘贴了Bootstrap的代码，很简单是吧，相比第一个解决方案，这样更好控制。

完成剩下的工作

这是我们最后的效果，尝试下自己完成：

图片、文字左右布局
图片和文字垂直居中
当文字过多时，用...表示

CSS第三课 栅格系统