絕大多數(shù)的網(wǎng)站都在使用一個(gè)網(wǎng)格。 他們可能沒(méi)有明確的使用網(wǎng)格系統(tǒng)，但如果他們有一個(gè)向左浮動(dòng)“主要內(nèi)容區(qū)”和一個(gè)向右浮動(dòng)的“側(cè)邊欄”，這就是一個(gè)簡(jiǎn)單的網(wǎng)格。

如果需要更復(fù)雜的布局，人們往往會(huì)借助框架。 他們猜想網(wǎng)格是超高難度的事情最好留給超級(jí)CSS書(shū)呆子。 這一理念導(dǎo)致這樣的事實(shí)，很多網(wǎng)格系統(tǒng)是非常復(fù)雜的 。

下面是我如何構(gòu)建網(wǎng)格。 它一點(diǎn)都不難也不復(fù)雜。 甚至使他們靈活也不是一個(gè)大的任務(wù)。

容器

塊級(jí)元素的寬度和它的父元素一樣（ width: auto; ）。 我們可以把它的寬度看作是100%。 wrapper 對(duì)于網(wǎng)格可能語(yǔ)義不太好，但它只是一個(gè)普通的包裝器，所以div是合適的。

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

列

讓我們從一個(gè)實(shí)用的，通用的需要開(kāi)始：主要內(nèi)容區(qū)寬度為2/3和1/3寬的側(cè)邊欄。 我們只用2個(gè)div元素代表兩列并取的適當(dāng)?shù)念?lèi)名。

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

為了讓他們水平排列，我們只需要浮動(dòng)他們并設(shè)置合適的寬度。 我們選擇他們像下面這樣：

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

各個(gè)寬度的設(shè)置像下面這樣：

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

這就是全部的前提關(guān)于簡(jiǎn)單網(wǎng)格。

給容器清除浮動(dòng)

父元素會(huì)發(fā)生坍塌高度變?yōu)?，因?yàn)樗淖釉厝扛?dòng)，浮動(dòng)的元素將脫離標(biāo)準(zhǔn)流。 下面讓我們修補(bǔ)這種情況通過(guò)clear屬性。 你只需像下面這樣：

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

間隙

網(wǎng)格最難的部分是間隙(列之間的空隙)。 到目前為止，我們已經(jīng)使用百分比制成了靈活的網(wǎng)格。 我們可以使所有復(fù)雜數(shù)學(xué)計(jì)算并且讓我們的間隙也使用百分比，但無(wú)論如何我個(gè)人不喜歡百分比的間隙，我喜歡固定像素尺寸的間隙。 此外，我們正試圖解決這個(gè)問(wèn)題。

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

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

現(xiàn)在，當(dāng)我們?cè)O(shè)置元素的寬度，這個(gè)寬度=width+padding+border。

第二步是給除了最后一個(gè)以外的所有列的右內(nèi)邊距設(shè)置一個(gè)固定值。

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

這就是基本間隙的所有設(shè)置了。

外部間隙

需要設(shè)置外部間隙(父元素的內(nèi)邊距)？我喜歡使用一個(gè)可選類(lèi)：

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

第一步是給網(wǎng)格父元素添加左內(nèi)邊距（以及可選的的頂部和底部?jī)?nèi)邊距）：

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

第二步是重新設(shè)置最后一列的右內(nèi)邊距

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

更多列選擇

超級(jí)簡(jiǎn)單：

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

做你想做的效果，只要確保列分?jǐn)?shù)加起來(lái)為1。 耶，需要一點(diǎn)點(diǎn)思考，但比平常更容易。

Sass

在這里我不過(guò)分使用它，但使用它讓所有事情變得更加簡(jiǎn)潔(還可用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;
  }
}

模塊

我喜歡這些網(wǎng)格內(nèi)工作的“模塊”。

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

將內(nèi)容分解成塊這種方法看起不錯(cuò)。 額外的副作用是每個(gè)模塊可以自己的內(nèi)邊距，來(lái)是文本內(nèi)容和網(wǎng)格的邊緣保持距離。

成果

這是在CodePen上的一個(gè)例子

瀏覽器不支持

工作僅僅在IE 8+，和所有其他標(biāo)準(zhǔn)的東西看起來(lái)是好的。 如果你需要支持IE 7，你將不得不做一些其他的工作）。

此外，F(xiàn)lexbox讓這變得更好更容易(有多種方法，包括從新設(shè)置盒子模型)，但我認(rèn)為，我們大約需要一年事件，直到我們可以開(kāi)始考慮使用它。

相關(guān)

查看OOCSS grids

注：本文為翻譯文章，原文章名稱(chēng)《Don’t Overthink It Grids》