網格如此簡單

注：本文爲翻譯文章，原文章名稱《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

若是你以爲我翻譯的不錯，能夠在這裏關注個人微博。