响应式网格（栅格化）布局

时间 2019-11-17

标签响应网格栅格布局繁體版

原文原文链接

响应式网格系统

响应式网格系统的概念

把网页划分红列、行、外边距、隔离带（各列与各行之间的空白）等由一系列相交的水平轴和垂直轴组成的网格。
网格布局的做用在于更有效地控制元素在网页中所占比例的大小。好比，博客中有一个留言板模块，在比较大的屏幕上，咱们但愿它占了右边 25% 的宽度，在手机等比较小的屏幕上，咱们但愿它占 100% 的宽度，出如今博客文章下方。网格布局是一种实现这一需求的办法，它的好处是，把全部的宽度分为固定栏数（经常使用 12 栏），从而更高效的控制元素宽度。

响应式系统的基本构成

经过BootStrap 官网能够更加详细地了解响应式网格是如何实现的，一般主体部分由如下构成：
css

container
rows
columns
gutter(列与列之间的空白)
breakpoint(经过media query实现响应式)

建立网格系统以前须要知道的事情

1.应该使用等宽的列吗？

按理来讲，咱们可使用等宽的列或不等宽列来划分网格，这要决定于咱们的网页复杂程度，通常都是使用等宽列，更加灵活和实用，像Bootstrap框架，经过元素所占的列数很方便计算出元素的宽度。html

2.应该使用多少列？

如上图，咱们可使用8栏、10栏、12栏均可以，一般取决于设计图的布局类型和内容，如一列、两列、三列布局等，若是不清楚布局类型和内容的话，通常使用灵活的12栏布局。

bootstrap

3.应该设置多大的列宽和间距？

解法一：由上而下，例如容器宽度为1140px,gutter为20px，则列宽为)1140px / 12 -20px。（一般使用这种方法）
解法二：由下往上，一般列宽设为间距的倍数，如gutter为20px，则列宽为60px。

4.如何让网格适应不一样视窗的大小？

随着用户代理的大小变化，列宽和间距须要在断点处breakpoint作出相应的改变以获得更好的视觉体验。
列宽使用百分数，而间距gutter固定的大小px或rem。如Bootstrap框架

/* Bootstrap */
.col-md-4 {
  width: 33.33333%;
  padding-left: 15px;
  padding-right: 15px;
  float: left;
}

5.是否使用预置类？

使用预约类col-*（HTML grid systems），直接在html结构里添加ide
```
<div class="row">
      <div class="col-md-8 col-lg-6"></div>
      <div class="col-md-4 col-lg-6"></div>
  </div>
```
- 优势：直观、直接知道多少元素所占的列数
- 缺点：HTML结构膨胀，须要预先知道布局
不使用预约义类（CSS grid systems)布局
```
<div class="content"></div>
  <div class="sidebar"></div>
```
- 优势：可维护性强、不用更改HTML、直接在CSS指定样式
- 缺点：不够直观

使用第二种维护性好，应用性更强，当需求更改的时候，不用直接更改HTML的类名。详细点击这里响应式的话，应该使用相对单位rem或em替代px。flex

.l-guest-article {
    @include clearfix;
    .l-main {
      margin-top: 20px;
      @media (min-width: 700px) {
        width: percentage(8/12);
        margin-top: 0;
        float: left;
      }
    }
    .l-sidebar {
      margin-top: 20px;
      @media (min-width: 700px) {
        width: percentage(8/12);
        float: right;
      }
    }
  }

开始建立你本身的响应式网格系统

下面开始构建响应式网格系统，理解Boostrap网格系统是如何实现的。
在开始构建容器以前，须要对全部容器设置box-sizing属性,以避免后期设置边框或间距的时候影响了元素的大小。ui

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

1.Grid container

.grid-container {
    width: 100%;
    max-width: 1200px; /*这里根据实际状况是否设置*/
    margin-right: auto;
    margin-left: auto;
}

2.Rows

由于对每一列设置了浮动，因此容器row须要清理浮动。flexbox

/*-- our cleafix hack -- */ 
.row:before, 
.row:after {
    content:"";
    display: table ;
     clear:both;
}

3.Columns

这里的列宽度，取决于你设定的网格栏数，如6栏，则每一栏大约为1/6。此处没有减去gutter的大小。设计

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

现象：浮动列为空的时候水平方向上发生折叠现象。
缘由：height: 0，width不为0的时候）float带来的影响。
解决：列自己设有border或padding，不然须要设置min-height: 1px。

若是要预约义多个类的话，相似Bootstrap这样

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

4.gutter的处理

one-sided gutter
- margin-right(须要额外处理最后一个边距的问题)
```
/* For a 3-column grid */
  .grid-item:nth-child(3n+3) {
      margin-right: 0;
      float: right;
  }
```
- padding-right（形成最后一个元素的宽度比前面的小，由于设置了box-sizing: border;）
Split gutters(使用这种方法就能避免以上的问题)
- marging-left 和 margin-right（须要使用calc减去gutter的大小）
```
.grid-item {
    width: calc((100% - 20px * 3) / 3);
    margin-right: 10px;
    margin-left: 10px;
    float: left;
  }
```
  - 优势：HTML结构简洁，不须要额外的子元素。
  - 缺点：IE9+，比较麻烦，要设置col-1~col-12每列都要这样设置，CSS代码冗余，并且改动边距的话须要全改。
- padding-left 和 padding-right，须要在HTML结构列加入额外子元素。
```
<div class="row">
      <div class="col-md-4 col-sm-6"><div class="inner"></div></div>
      <div class="col-md-4 col-sm-6"><div class="inner"></div></div>
      <div class="col-md-4 col-sm-12"><div class="inner"></div></div>
  </div>

  [class*="col-"] {
      padding-left: 10px;
      padding-right: 10px;
  }
```
  - 优势：CSS代码：直接是分数，简洁，无需减去gutter。由于这是在容器col里面设置内边距。
  - 缺点：须要额外的子元素

5.make your layouts responsive

经过设置利用media设置断点

这里没有使用预约义类。

.l-guest-article {
    @include clearfix;
    .l-guest {
      @media (min-width: 700px) {
        width: percentage(4/12);
        float: left;
      }

      @media (min-width: 1200px) {
        width: percentage(2/12);
      }
    }
    .l-main {
      margin-top: 20px;
      @media (min-width: 700px) {
        width: percentage(8/12);
        margin-top: 0;
        float: left;
      }
      @media (min-width: 1200px) {
        width: percentage(7/12);
      }
    }
    .l-sidebar {
      margin-top: 20px;
      @media (min-width: 700px) {
        width: percentage(8/12);
        float: right;
      }
      @media (min-width: 1200px) {
        width: percentage(3/12);
        margin-top: 0;
      }
    }
  }

使用预约义类，同样的道理经过媒体查询,而后把须要的类添加到HTML结构便可。

@media all and (max-width: 768px) {
      .col-sm-1 {
          width: 8.33%;
      }

      .col-sm-2 {
          width: 16.66%;
      }

      .col-sm-3 {
          width: 25%;
      }

      .col-sm-4 {
          width: 33.33%;
      }

      .col-sm-5 {
          width: 41.66%;
      }

      .col-sm-6 {
          width: 50%;
      }

      .col-sm-7 {
          width: 58.33%;
      }

      .col-sm-8 {
          width: 66.66%;
      }

      .col-sm-9 {
          width: 75%;
      }

      .col-sm-10 {
          width: 83.33%;
      }

      .col-sm-11 {
          width: 91.66%;
      }

      .col-sm-12 {
          width: 100%;
      }
  }

实例应用

Demo