栅格系统英文为“grid systems”，也有人翻译为“网格系统”，其实意思都一样。

而我们Web前端经常说的栅格系统就是利用@media媒体查询设置断点，来实现网页在不同尺寸下流式布局。

对于我们而言栅格系统的使用，不仅可以让网页的信息呈现更加美观易读，更具可用性。而且，对于前端开发来说，网页将更加的灵活与规范。

例如Bootstrap内置了一套响应式、移动设备优先的流式栅格系统。

不过我们在开发的时候，并不一定需要整个的Bootstrap框架，所以我们可以仿Bootstrap单独写一个简单的栅格系统。

媒体查询

在栅格系统前，我们首先需要明白什么是媒体查询（media query），通过设置断点来调用不同的代码。

/* 超小屏幕（手机，小于 768px） */
/* 没有任何媒体查询相关的代码，因为这在 Bootstrap 中是默认的（还记得 Bootstrap 是移动设备优先的吗？） */

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

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

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

列定宽：col-sm-*

一行一列

一行两列：3：9

一行两列：6：6

一行三列：3：6：3

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，有些列可能会出现比别的列高的情况。

为了解决这一问题，建议使用.flex-start类名

<div class="row flex-start">
      <div class="col-sx-6 col-sm-3">.col-sx-6 .col-sm-3<br>
        Resize your viewport or check it out on your phone for an example.</div>
      <div class="col-sx-6 col-sm-3 sss">.col-sx-6 .col-sm-3</div>
      <div class="col-sx-6 col-sm-3">.col-sx-6 .col-sm-3</div>
      <div class="col-sx-6 col-sm-3">.col-sx-6 .col-sm-3</div>
</div>

偏移：col-offset-*

<div class="row">
      <div class="col-sm-4">.col-sm-4</div>
      <div class="col-sm-4 col-sm-offset-4">.col-sm-4 .col-offset-4</div>
</div>
<div class="row">
      <div class="col-sm-3 col-sm-offset-3">.col-sm-3 .col-offset-3</div>
      <div class="col-sm-3 col-sm-offset-3">.col-sm-3 .col-offset-3</div>
</div>
<div class="row">
      <div class="col-sm-8 col-sm-offset-4">.col-sm-8 .col-offset-4</div>
</div>

嵌套

<div class="row">
      <div class="col-sm-12">.col-sm-12
        <div class="row show-grid">
          <div class="col-sx-8 col-sm-6">.col-sx-8 .col-sm-6</div>
          <div class="col-sx-4 col-sm-6">.col-sx-4 .col-sm-6</div>
        </div>
      </div>
</div>

默认标题字体大小

默认文本段落样式

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.