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

說(shuō)到柵格系統(tǒng)（grid system），你也許見(jiàn)過(guò)這樣的概念：

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

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

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

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

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

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

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

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

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

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

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

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

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

第2個(gè)要點(diǎn)，是不同的斷點(diǎn)類型的意義及其搭配。

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

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

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

先看看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的寫法，而且斷點(diǎn)像素值越大的，對(duì)應(yīng)代碼越靠后。所以，如果有這樣的一些元素：

    

        
1
        
2
        
3
        
4
    

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

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

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

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

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

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

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

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

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

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

下面是一個(gè)Block Grid的示例：

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

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

前面介紹的兩個(gè)柵格樣式庫(kù)都來(lái)源于流行前端框架，并不是獨(dú)立的。本文接下來(lái)要介紹的[Toast][]，則是一個(gè)獨(dú)立的、很有想法的柵格樣式庫(kù)。

為什么說(shuō)很有想法呢？請(qǐng)看它的一個(gè)正確的寫法示例：

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

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

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

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

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

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

如果要加入多個(gè)斷點(diǎn)變化，Toast是這樣做：

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

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

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

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

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