栅格布局学习

什么是栅格系统

栅格系统（CSS Grids）是一种运用固定的格子设计版面布局，在报刊杂志上尤为常见。
如今响应式设计大行其道，对于前端开发，栅格系统可以：
- 提高生产力，通过用网格的划分，元素更容易堆放而且在跨浏览器上面具有一致性，使我们可以专心的注意布局而不是兼容上。
- 具有灵活性，无论是什么样的布局，都可以拆分到粒度为一个网格的大小。
- 支持响应式设计，栅格系统本身能很好的和响应式设计结合在一起，或者说，我们的栅格系统是基于响应式设计的。

栅格的组成

container: 包裹整个栅格系统的容器
rows: 行
columns: 列
gutters: 各列的间的空隙

容器（the container） 为了给整个栅格系统设置宽度，我们需要一个容器。容器的宽度通常为100%，但你可能希望为更大的显示器设置最大宽度max-width。

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

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

  /* 清除浮动 */
  .row:before,
  .row:after {
    content:"";
    display: table;
    clear:both;
  }

列（the column） 列元素是栅格系统的核心，也是最复杂的一部分。因为列的定位可以有很多实现方式，同时还需要考虑它的宽度以及响应式设计等因素。

列的位置： float, inline-blocks, display:table, display:flex. 他们都可以实现栅格布局中，列的定位。我个人推荐使用“float”，如果我们的列都是空的，我们浮动的列都会贴在彼此的顶部。为了避免这种情况：
```
  [class*='col-'] {
    float: left;
    min-height: 1px;
  }
```

列的宽度由于容器总宽度是100%，我们想要6列，所以每列宽度为：100 / 6 = 16.66

  [class*='col-'] {
    float: left;
    min-height: 1px;
    width: 16.66%;
  }

这里我们把一行分成六列，通过简单的计算，还可以定义列的多种宽度。

  .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%;
  }

列的间隙the gutters 由于列的宽度单位是响应式的%，我们给列元素的间距是固定单位的padding（px），为了避免复杂的计算，我们规定所有的盒子模型为border-box类型。

  /*-- 将栅格系统里的所有元素设为 border box --*/
  .grid-container *{
      box-sizing: border-box;
  }

  [class*='col-'] {
      float: left;
      min-height: 1px;
      width: 16.66%;
      /*-- 设置间隙 --*/
      padding: 12px;
  }

全局设置border-box很好，它可以省去一次又一次的加减，它还可以让有边框的盒子正常使用百分比宽度。但是使用了border-box可能会与一些依赖默认box-sizing的库冲突，不过这种问题大多数时候可以通过把交由这些库处理的块的box-sizing设置回content-box来解决。

解释：

[class*="col-"] 选择所有类名中含有"col-"的元素与此类似的还有： [class^="col-"] 选择所有类名中以"col-"开头的元素 [class$="-col"] 选择所有类名中以"-col"结尾的元素

个人实战

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>grid栅格布局练习</title>
  <style>
    .grid-container{
      width: 100%;
      max-width: 1400px;
    }

    /*-- 使用 cleafix 清除浮动 -- */
    .row:before,
    .row:after {
      content:"";
      display: table;
      clear:both;
    }

    [class*='col-'] {
      float: left;
      min-height: 1px;
      width: 16.66%;
      box-sizing: border-box;
      /*-- 设置列的左右间隙 -- */
      padding: 12px;
      background-color: #FFDCDC;
    }

    .col-1{ width: 16.66%; }
    .col-2{ width: 33.33%; }
    .col-3{ width: 50%;    }
    .col-4{ width: 66.66%; }
    .col-5{ width: 83.33%; }
    .col-6{ width: 100%;   }

    .outline, .outline *{
      outline: 1px solid #F6A1A1;
    }

    /*-- 列的额外内容样式 --*/
    [class*='col-'] > p {
      background-color: #FFC2C2;
      padding: 0;
      margin: 0;
      text-align: center;
      color: white;
    }
  </style>
</head>
<body>
  <div class="grid-container outline">
    <div class="row">
      <div class="col-1"><p>col-1</p></div>
      <div class="col-1"><p>col-1</p></div>
      <div class="col-1"><p>col-1</p></div>
      <div class="col-1"><p>col-1</p></div>
      <div class="col-1"><p>col-1</p></div>
      <div class="col-1"><p>col-1</p></div>
    </div>
    <div class="row">
      <div class="col-2"><p>col-2</p></div>
      <div class="col-2"><p>col-2</p></div>
      <div class="col-2"><p>col-2</p></div>
    </div>
    <div class="row">
      <div class="col-3"><p>col-3</p></div>
      <div class="col-3"><p>col-3</p></div>
    </div>
  </div>
</body>
</html>