柵格布局想必大家都很了解,我們做頁面開發(fā)的時候,往往對頁面板式的要求很高,如何對各個區(qū)域的內(nèi)容排版,并使之對齊是我們的一大難題。而柵格系統(tǒng)就是我們排版的利器,他支持自動對齊、自動計算邊距、流式布局等優(yōu)點(diǎn),簡單好用的特性使得柵格布局成為所有主流框架的必備的功能。

我們簡單分析一下柵格布局的原理:

容器/行/列/柵間距

一個柵格布局需要3部分組成——容器(container),行(row)列(column,也可稱為柵)。容器是用于確定寬度的,行需要放到容器中;行是將列分組,并把一組列合并為一個行;列是正真的顯示內(nèi)容的元素,我們的內(nèi)容就寫在列里面。具體可參考下圖

如果僅是行與列來布局,自適應(yīng)布局也能滿足需求,柵格布局的高明之處在于它還提供了列與列之間存的間距,我們稱之為柵間距(gutter),柵間距僅存在列與列之間,列和容器之間是不應(yīng)該存在柵間距的。柵間距的存在使得我們不用自己去計算padding,設(shè)置布局更加簡單,對齊也更加容易。

列寬

完善的柵格布局框架,都會提供一個類似自適應(yīng)布局一樣的聲明列寬的class類。首先系統(tǒng)把容器分為若干份,這個總份數(shù)一般都是3、4的倍數(shù),這樣利于排版。然后再提供若干代表份數(shù)的類,讓列去繼承,這樣列就會占據(jù)容器總寬度的指定份數(shù)(span)了。如上面我們的例圖,容器的總份數(shù)是9,各個列繼承不同的份值,并保證了一行里面的所有列的份值相加也是9。

柵格嵌套

同時柵格系統(tǒng)是可以嵌套的,即列里面也可以作為容器,里面可以再聲明一行,然后繼續(xù)聲明子列,這種行為我們稱之為柵格嵌套,如下圖:

 

列的換行行為

早期的柵格系統(tǒng)框架,列與列之間是不能換行的,即一行中的所有列都必須確保在同一行中。但是隨著響應(yīng)式布局的興起,一行中的列也需要出現(xiàn)換行行為,而且換行后也沒不能出現(xiàn)顯示錯誤,這種行為我們稱為列的換行行為,如下圖。因?yàn)樯婕皷砰g距的計算,所以不是每一個柵格系統(tǒng)都可以支持“列的換行行為”的。列的換行行為對于完成響應(yīng)式布局非常