Don’t Overthink It Grids（不要把Grid想得太难）

现存的许多网站都会使用Gird布局，可能我们并没有明确的看到它的存在，但是当你看到他们有一块“主要内容区”位于页面左边，又有一个侧边栏在页面右边，这就是一个简单的Grid(网格)布局。

当我们需要展现一个复杂的布局的时候，人们总是希望使用现有的Grid框架来实现这个目标。他们认为Grid是超级困难的，应该留给那些超级CSS书呆子才对。这种想法将会持续下去，因为现存的许多Grid框架都比较复杂。

Context 上下文

一个区域里的元素的宽度是和包含它的父元素的宽度一样的(width: auto;)，我们可以认为它是Width 100%。Grid的封装可能不需要处理太多的语法问题，它仅仅是个普通封装，所以一个div就可以了。

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

Columns 列

现在让我们从一个实际的且普通的需求开始吧：一个主要的内容区拥有2/3的宽度和一个侧边栏拥有1/3的宽度。我们仅仅只给着两列div适当的css class名称。

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

为了让它们彼此靠近，我们需要设置他们的float和宽度，可以使用以下方法同时设置两列的样式

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

然后像这样分别赋予不同的宽度

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

以上是便是不把Grid想太难的前提了。

Clearing Context 清除上下文

父元素只有浮动的子元素时，其高度将会变为0而隐藏。我们可以清楚它的上下文来修复这个问题，只需如下代码

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

Gutters 边框

Grid最难的部分可能是边框了。到目前为止我们用百分比的形式来设置宽度使Grid变得灵活。我们也可以使用百分比来设置边框宽度，只是会让计算变得复杂，不过我本人不喜欢这样做，我更倾向于使用像素大小设置边框。

第一步使用box-sizing: border-box;。我喜欢对确定的事物使用这设置。

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

现在我们去设置控件的宽度，不管它是否已经应用了边距和边界的设置，它都将保持这个宽度。

第二步将一个固定不变的边距应用到右边的所有列，除了最后一列。

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

以上便是边框的基本设置了，如上图效果。

Outside Gutters 外边框

需要使用为外面设置边框？我喜欢使用一个选择性加入来设置这一特性：

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

More Column Choices 更多列选择

超简单：

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

做任何你想做的。只要确保列的分数加起来是1。是的，一点点思考，但比平常更简单了。

Scss

在这里我并没有大量使用，但是整个只用使用一点SCSS/Compass就可以变得更加简洁。

* {
  @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;
  }
}

Module

我喜欢使用Module来设置Grid。

<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>

这样把内容分成几块会给人很好的感觉。好处是每个模块都可以有自己的边距和内容，保持文本远离Grid的边缘。

Result

点击 a demo on CodePen.打开演示

原文地址：http://css-tricks.com/dont-overthink-it-grids/