网格如此简单

注：本文为翻译文章，原文章名称《Don't Overthink It Grids》

绝大多数的网站都在使用一个网格。 他们可能没有明确的使用网格系统，但若是他们有一个向左浮动“主要内容区”和一个向右浮动的“侧边栏”，这就是一个简单的网格。

若是须要更复杂的布局，人们每每会借助框架。 他们猜测网格是超高难度的事情最好留给超级CSS书呆子。 这一理念致使这样的事实，不少网格系统是很是复杂的 。

下面是我如何构建网格。 它一点都不难也不复杂。 甚至使他们灵活也不是一个大的任务。

容器

块级元素的宽度和它的父元素同样（ width: auto; ）。 咱们能够把它的宽度看做是100%。 wrapper 对于网格可能语义不太好，但它只是一个普通的包装器，因此div是合适的。

<div class="grid">
  <!-- 100% wide -->
</div>

列

让咱们从一个实用的，通用的须要开始：主要内容区宽度为2/3和1/3宽的侧边栏。 咱们只用2个div元素表明两列并取的适当的类名。

<div class="grid">
  <div class="col-2-3">
     Main Content
  </div>
  <div class="col-1-3">
     Sidebar
  </div>
</div>

为了让他们水平排列，咱们只须要浮动他们并设置合适的宽度。 咱们选择他们像下面这样：

[class*='col-'] {
  float: left;
}

各个宽度的设置像下面这样：

.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}

这就是所有的前提关于简单网格。

给容器清除浮动

父元素会发生坍塌高度变为0，由于它的子元素所有浮动，浮动的元素将脱离标准流。 下面让咱们修补这种状况经过clear属性。 你只需像下面这样：

.grid:after {
  content: "";
  display: table;
  clear: both;
}

 间隙

网格最难的部分是间隙(列之间的空隙)。 到目前为止，咱们已经使用百分比制成了灵活的网格。 咱们可使全部复杂数学计算而且让咱们的间隙也使用百分比，但不管如何我我的不喜欢百分比的间隙，我喜欢固定像素尺寸的间隙。 此外，咱们正试图解决这个问题。

第一步是使用 box-sizing: border-box;。

*, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

如今，当咱们设置元素的宽度，这个宽度=width+padding+border。

第二步是给除了最后一个之外的全部列的右内边距设置一个固定值。

[class*='col-'] {
  padding-right: 20px;
}
[class*='col-']:last-of-type {
  padding-right: 0;
}

这就是基本间隙的全部设置了。

外部间隙

须要设置外部间隙(父元素的内边距)？我喜欢使用一个可选类：

<div class="grid grid-pad">
  Grid with outside gutters also
</div>

第一步是给网格父元素添加左内边距（以及可选的的顶部和底部内边距）：

.grid-pad {
  padding: 20px 0 20px 20px;
}

第二步是从新设置最后一列的右内边距

.grid-pad > [class*='col-']:last-of-type {
  padding-right: 20px;
}

更多列选择

超级简单：

.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

作你想作的效果，只要确保列分数加起来为1。 耶，须要一点点思考，但比日常更容易。

 Sass

在这里我不过度使用它，但使用它让全部事情变得更加简洁(还可用less)：

 

* {
  @include box-sizing(border-box);
}

$pad: 20px;

.grid {
  background: white;
  margin: 0 0 $pad 0;
  
  &:after {
    /* Or @extend clearfix */
    content: "";
    display: table;
    clear: both;
  }
}

[class*='col-'] {
  float: left;
  padding-right: $pad;
  .grid &:last-of-type {
    padding-right: 0;
  }
}
.col-2-3 {
  width: 66.66%;
}
.col-1-3 {
  width: 33.33%;
}
.col-1-2 {
  width: 50%;
}
.col-1-4 {
  width: 25%;
}
.col-1-8 {
  width: 12.5%;
}

/* Opt-in outside padding */
.grid-pad {
  padding: $pad 0 $pad $pad;
  [class*='col-']:last-of-type {
    padding-right: $pad;
  }
}

模块

我喜欢这些网格内工做的“模块”。

<div class="grid">
  <div class="col-2-3">
     <article class="module">
        stuff
     </article>
     <article class="module">
        stuff
     </article>
  </div>
  <div class="col-1-3">
    <aside class="module">
       Sidebar stuff. Sub modules?
    </aside>
  </div>
</div>

将内容分解成块这种方法看起不错。 额外的反作用是每一个模块能够本身的内边距，来是文本内容和网格的边缘保持距离。

成果

这是在CodePen上的一个例子

 

浏览器不支持

工做仅仅在IE 8+，和全部其余标准的东西看起来是好的。 若是你须要支持IE 7，你将不得不作一些其余的工做）。

此外，Flexbox让这变得更好更容易(有多种方法，包括重新设置盒子模型)，但我认为，咱们大约须要一年事件，直到咱们能够开始考虑使用它。

相关

查看OOCSS grids

若是你以为我翻译的不错，能够在这里关注个人微博。