摘要：下面，本文將介紹幾個比較有代表性的柵格樣式庫，講述它們的簡要原理和用法正確的打開方式。雖然柵格樣式庫很棒，但它們并不是響應(yīng)式設(shè)計的全部。但在這個過程中，理解各類柵格樣式庫的工作原理，正確使用它們，才能做出穩(wěn)定可靠的頁面結(jié)構(gòu)。

說到柵格系統(tǒng)（grid system），你也許見過這樣的概念：

像這樣，通過固定的格子結(jié)構(gòu)，來進(jìn)行布局設(shè)計。這是一種設(shè)計風(fēng)格，而且一直以來很廣泛地應(yīng)用于網(wǎng)頁設(shè)計領(lǐng)域。這樣的風(fēng)格清晰、工整，可以讓網(wǎng)頁具有更友好的瀏覽體驗。

而隨著響應(yīng)式設(shè)計（responsive design）的流行，柵格系統(tǒng)開始被賦予新的意義，那就是，一種響應(yīng)式設(shè)計的實現(xiàn)方式。

響應(yīng)式的要點是為同一個頁面設(shè)計多種布局形態(tài)，分別適配不同屏幕尺寸的設(shè)備。一般來說，是這樣的感覺：

可以看到，一個頁面可以拆分成多個區(qū)塊來理解，而正是這些區(qū)塊共同構(gòu)成了這個頁面的布局。根據(jù)不同的屏幕尺寸情況，調(diào)整這些區(qū)塊的排版，就可以實現(xiàn)響應(yīng)式設(shè)計。另外，屏幕寬度較大的時候，區(qū)塊傾向于水平分布，而屏幕寬度較小的時候，區(qū)塊傾向于豎直堆疊。

這些方方正正的區(qū)塊是不是和柵格系統(tǒng)的格子挺相似？對的，為了讓響應(yīng)式設(shè)計更簡單易用，于是有了很多稱為“柵格”（grid）的樣式庫。

柵格樣式庫一般是這樣做的：將頁面劃分為若干等寬的列（column），然后推薦你通過等寬列來創(chuàng)建響應(yīng)式的頁面區(qū)塊。

雖然看起來都是這樣的思路，但不同的柵格樣式庫，在做法上卻是各有各的點子。下面，本文將介紹幾個比較有代表性的柵格樣式庫，講述它們的簡要原理和用法（正確的打開方式）。

Bootstrap[]。默認(rèn)分為12列。

要理解Bootstrap中的柵格，最好從掌握正確的使用方法開始。這其中有2個要點。

第1個要點是容器（container），行（row）和列（column）之間的層級關(guān)系。一個正確的寫法示例如下：

Bootstrap柵格的容器有兩種，.container（固定像素值的寬度）和.container-fluid（100%的寬度），在這里，把它們都稱為container。需要注意的是，row（.row）必須位于container的內(nèi)部，column（如.col-md-6）必須位于row的內(nèi)部。也就是說，container、row、column必須保持特定的層級關(guān)系，柵格系統(tǒng)才可以正常工作。

為什么需要這樣？查看這些元素的樣式，會發(fā)現(xiàn)container有15px的水平內(nèi)邊距，row有-15px的水平負(fù)外邊距，column則有15px的水平內(nèi)邊距。這些邊距是故意的、相互關(guān)聯(lián)的，也因此就像齒輪嚙合那樣，限定了層級結(jié)構(gòu)。這些邊距其實也是Bootstrap柵格的精巧之處，如果你想進(jìn)一步了解，推薦閱讀[The Subtle Magic Behind Why the Bootstrap 3 Grid Works][]。

如果要嵌套使用柵格，正確的做法是在column內(nèi)直接續(xù)接row，然后再繼續(xù)接column，而不再需要container：

第2個要點，是不同的斷點類型的意義及其搭配。

Bootstrap柵格的column對應(yīng)的類名形如.col-xx-y。y是數(shù)字，表示該元素的寬度占據(jù)12列中的多少列。而xx只有特定的幾個值可供選擇，分別是xs、sm、md、lg，它們就是斷點類型。

在Bootstrap柵格的設(shè)計中，斷點的意義是，當(dāng)視口（viewport）寬度小于斷點時，column將豎直堆疊（display: block的默認(rèn)表現(xiàn)），而當(dāng)視口寬度大于或等于斷點時，column將水平排列（float的效果）。按照xs、sm、md、lg的順序，斷點像素值依次增大，其中xs表示極小，即認(rèn)為視口寬度永遠(yuǎn)不小于xs斷點，column將始終水平浮動。

有時候，會需要將多種斷點類型組合使用，以實現(xiàn)更細(xì)致的響應(yīng)式設(shè)計。此時不同的斷點類型之間會有怎樣的相互作用呢？

先看看Bootstrap的sass源碼是如何定義柵格的：

@include make-grid-columns;
@include make-grid(xs);
@media (min-width: $screen-sm-min) {
  @include make-grid(sm);
}
@media (min-width: $screen-md-min) {
  @include make-grid(md);
}
@media (min-width: $screen-lg-min) {
  @include make-grid(lg);
}

可以看到，用了min-width的寫法，而且斷點像素值越大的，對應(yīng)代碼越靠后。所以，如果有這樣的一些元素：

    

        
1
        
2
        
3
        
4
    

那么它們應(yīng)該是這樣的效果：

結(jié)合前面的源碼，可以想到，在上面這樣視口寬度由小變大的過程中，首先是保持默認(rèn)的豎直堆疊，然后超過了sm的斷點，sm的樣式生效，變?yōu)橐恍袃闪械呐虐?，再繼續(xù)超過lg的斷點后，lg的樣式也生效，由于lg的樣式代碼定義在sm之后，所以會覆蓋掉sm的樣式，從而得到一行四列的排版。

所以，結(jié)合使用多個斷點類型，就可以引入多個斷點變化，把響應(yīng)式做得更加細(xì)致。

Bootstrap柵格雖然很強(qiáng)大，但也不應(yīng)過度使用。例如，當(dāng)你需要一個占據(jù)一整行寬度的元素時，請不要也想著讓Bootstrap柵格參和進(jìn)來，加入類似.col-xs-12這樣的元素。實際上，你不需要任何柵格類，你需要的只是一個塊元素。

Foundation[]，它和Bootstrap柵格的設(shè)計十分近似，只是在類名和結(jié)構(gòu)上有所差異。Foundation柵格同樣默認(rèn)12列。

類比之前Bootstrap柵格的例子，F(xiàn)oundation柵格的一個正確的寫法示例如下：

Foundation柵格的行用.row表示，而列由至少兩個類名組成，一是.columns或.column（2種寫法完全相同，單純?yōu)榱酥С终Z法偏好）表明這是列元素，二是.medium-6這種用于表示斷點類型和對應(yīng)寬度。在默認(rèn)情況下，F(xiàn)oundation柵格的斷點類型從小到大依次是small、medium、large，其中small類似Bootstrap柵格的xs，也是指任意屏幕尺寸下都水平排列。

Foundation柵格沒有container，只需要row和column，因此顯得比Bootstrap柵格更簡單一些。其中row定義了最大寬度（可以認(rèn)為承擔(dān)了container的部分功能），column定義了0.9375rem的水平內(nèi)邊距。如果要嵌套，仍然是column內(nèi)續(xù)接row，再繼續(xù)接column。

組合使用多個斷點類型，其方法也和Bootstrap柵格相同。需要注意的是，F(xiàn)oundation柵格的斷點值是用的em而不是px，對應(yīng)的，它們轉(zhuǎn)換后的像素值也有別于Bootstrap柵格。

作為柵格系統(tǒng)的補(bǔ)充，F(xiàn)oundation還提供了另外一個叫做[Block Grid][]的柵格。不過，它并不是一個超出傳統(tǒng)柵格的新東西，而只是一個針對特定柵格應(yīng)用場景的方法糖。

下面是一個Block Grid的示例：

其中，ul和li這樣的特定標(biāo)簽組合是必須的。在這個示例中，屏幕寬度從小到大的變化過程中，列元素將依次是一行兩列、一行三列、一行四列的排版方式。

可以看到，Block Grid的結(jié)構(gòu)也是行和列，但只需要在行上有一個類名。和Foundation的Grid相比，它的確有一些不同。一方面，Block Grid的行并沒有定義最大寬度。另一方面，Block Grid的列一定是等寬的（畢竟li不需要任何類名）。

前面介紹的兩個柵格樣式庫都來源于流行前端框架，并不是獨立的。本文接下來要介紹的[Toast][]，則是一個獨立的、很有想法的柵格樣式庫。

為什么說很有想法呢？請看它的一個正確的寫法示例：

類似的，這也是一行均分兩列的排版?？梢钥吹剑琓oast柵格的結(jié)構(gòu)同樣是行（.grid）與列（.grid__col）。但是，不同于始終以12列為參考的模式，它可以用1-of-2這樣更為直觀的類名。事實上，這里用3-of-6、6-of-12等也可以，它們是相同的。

當(dāng)然，這并不是Toast最特別的地方?，F(xiàn)在，請想一下，Bootstrap及Foundation的柵格系統(tǒng)的column原本都是塊元素，它們是如何實現(xiàn)水平排列的？

對的，用的是float。但Toast是如何做的呢？它想法獨特，選用了display: inline-block;。如果你有了解過這個屬性，你應(yīng)該知道inline-block的元素會彼此之間存在縫隙。Toast在選擇這個屬性的基礎(chǔ)之上，巧妙使用了負(fù)外邊距（例如margin-right: -.25em;），消除了縫隙對柵格column水平排列的影響。在我做了一些測試和應(yīng)用后，我只能說，這個強(qiáng)行完成的策略要給個贊。

在前面Toast柵格的示例中，并沒有類似md、medium這樣體現(xiàn)斷點類型的詞。這是因為，Toast采用了“存在默認(rèn)”的風(fēng)格。絕大部分情況下，只需要使用形如.grid__col--x-of-y的類名。Toast已經(jīng)為這個類設(shè)置了斷點（默認(rèn)700px），低于這個斷點為display: block;，高于這個斷點為display: inline-block;。

意外的是，不同于Bootstrap和Foundation默認(rèn)取block的mobile first原則（豎直堆疊更符合小尺寸屏幕的排版要求），Toast則是把display: inline-block;放在了@media范圍之外，當(dāng)做默認(rèn)屬性。這應(yīng)該只是風(fēng)格偏好差異，就我個人而言，我還是更贊同mobile first的設(shè)計風(fēng)格的。

有關(guān)mobile first的響應(yīng)式設(shè)計的實現(xiàn)，推薦閱讀Grid。

如果要加入多個斷點變化，Toast是這樣做：

上面這段代碼的效果是，該柵格列在480px以下為block，占據(jù)滿寬，481px~700px之間為inline-block，占據(jù)1/2寬度，701px以上為inline-block，占據(jù)1/4寬度。

前面介紹的這些柵格樣式庫，源碼都使用Less、Sass這些css預(yù)編譯工具，因此其中的12列、斷點值、列間距等都是可配置的，只不過大部分情況下默認(rèn)的就足夠使用。

雖然柵格樣式庫很棒，但它們并不是響應(yīng)式設(shè)計的全部。要使同一個應(yīng)用在不同屏幕尺寸的設(shè)備上都具有較好的瀏覽體驗，還有很多其他手段可用（比如在尺寸更大的屏幕上使用更大的字體），柵格系統(tǒng)只是方式之一。

借助css柵格系統(tǒng)，我們可以很容易地創(chuàng)建響應(yīng)式的頁面布局。但在這個過程中，理解各類柵格樣式庫的工作原理，正確使用它們，才能做出穩(wěn)定、可靠的頁面結(jié)構(gòu)。

（重新編輯自我的博客，原文地址：http://acgtofe.com/posts/2015/07/a-story-of-grid）