CSS中的柵格系統(tǒng)是怎樣的

這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)CSS中的柵格系統(tǒng)是怎樣的，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

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

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

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

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

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

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

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

Bootstrap把它的柵格放在CSS這個(gè)分類下，并稱它為Gird system。默認(rèn)分為12列。
容器、行與列

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. <div class="container">  

2.     <div class="row">  

3.         <div class="col-md-6"></div>  

4.         <div class="col-md-6"></div>  

5.     </div>  

6. </div>  

Bootstrap柵格的容器有兩種，.container（固定像素值的寬度）和.container-fluid（100%的寬度），在這里，把它們都稱為container。需要注意的是，row（.row）必須位于container的內(nèi)部，column（如.col-md-6）必須位于row的內(nèi)部。也就是說，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：

CSS Code復(fù)制內(nèi)容到剪貼板

1. <div class="container">   

2.     <div class="row">   

3.         <div class="col-md-8">   

4.             <div class="row">   

5.                 <div class="col-md-6"></div>   

6.                 <div class="col-md-6"></div>   

7.             </div>   

8.         </div>   

9.         <div class="col-md-4"></div>   

10.     </div>   

11. </div>  

斷點(diǎn)類型

第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源碼是如何定義柵格的：

CSS Code復(fù)制內(nèi)容到剪貼板

1. @include make-grid-columns;   

2. @include make-grid(xs);   

3. @media (min-width: $screen-sm-min) {   

4.   @include make-grid(sm);   

5. }   

6. @media (min-width: $screen-md-min) {   

7.   @include make-grid(md);   

8. }   

9. @media (min-width: $screen-lg-min) {   

10.   @include make-grid(lg);   

11. }  

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. <div class="container">   

2.     <div class="row">   

3.         <div class="col-sm-6 col-lg-3">1</div>   

4.         <div class="col-sm-6 col-lg-3">2</div>   

5.         <div class="col-sm-6 col-lg-3">3</div>   

6.         <div class="col-sm-6 col-lg-3">4</div>   

7.     </div>   

8. </div>  

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

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

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

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. <div class="row">   

2.     <div class="medium-6 columns"></div>   

3.     <div class="medium-6 columns"></div>   

4. </div>  

Foundation柵格的行用.row表示，而列由至少兩個(gè)類名組成，一是.columns或.column（2種寫法完全相同，單純?yōu)榱酥С终Z法偏好）表明這是列元素，二是.medium-6這種用于表示斷點(diǎn)類型和對(duì)應(yīng)寬度。在默認(rèn)情況下，F(xiàn)oundation柵格的斷點(diǎn)類型從小到大依次是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。

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

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

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-4">   

2.   <li></li>   

3.   <li></li>   

4.   <li></li>   

5.   <li></li>   

6.   <li></li>   

7.   <li></li>   

8. </ul>  

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

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

前面介紹的兩個(gè)柵格樣式庫都來源于流行前端框架，并不是獨(dú)立的。本文接下來要介紹的Toast，則是一個(gè)獨(dú)立的、很有想法的柵格樣式庫。
特別的實(shí)現(xiàn)方式

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

CSS Code復(fù)制內(nèi)容到剪貼板

1. <div class="grid">   

2.     <div class="grid__col grid__col--1-of-2"></div>   

3.     <div class="grid__col grid__col--1-of-2"></div>   

4. </div>  

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

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

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

在前面Toast柵格的示例中，并沒有類似md、medium這樣體現(xiàn)斷點(diǎn)類型的詞。這是因?yàn)?，Toast采用了“存在默認(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是這樣做：

CSS Code復(fù)制內(nèi)容到剪貼板

1. <div class="grid">   

2.     <div class="grid__col grid__col--1-of-4 grid__col--m-1-of-2">   

3.     </div>   

4. </div>  

上面這段代碼的效果是，該柵格列在480px以下為block，占據(jù)滿寬，481px~700px之間為inline-block，占據(jù)1/2寬度，701px以上為inline-block，占據(jù)1/4寬度。
對(duì)柵格系統(tǒng)的補(bǔ)充

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

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

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

上述就是小編為大家分享的CSS中的柵格系統(tǒng)是怎樣的了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。