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

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

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、成都做網(wǎng)站、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、東川ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的東川網(wǎng)站制作公司

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

像這樣，通過固定的格子結(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)式

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

可以看到，一個頁面可以拆分成多個區(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中的柵格

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

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

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

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必須保持特定的層級關(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：

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>  

斷點類型

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

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的寫法，而且斷點像素值越大的，對應(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)該是這樣的效果：
CSS中的柵格系統(tǒ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中的柵格

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

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

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表示，而列由至少兩個類名組成，一是.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柵格。
Block Grid

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

下面是一個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)簽組合是必須的。在這個示例中，屏幕寬度從小到大的變化過程中，列元素將依次是一行兩列、一行三列、一行四列的排版方式。

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

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

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

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這樣更為直觀的類名。事實上，這里用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)行完成的策略要給個贊。
非Mobile First

在前面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是這樣做：

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寬度。
對柵格系統(tǒng)的補(bǔ)充

前面介紹的這些柵格樣式庫，源碼都使用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)。

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

網(wǎng)頁題目：CSS中的柵格系統(tǒng)是怎樣的
網(wǎng)站地址：http://muchs.cn/article38/isjspp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、定制網(wǎng)站、網(wǎng)站排名、網(wǎng)頁設(shè)計公司、移動網(wǎng)站建設(shè)、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

網(wǎng)站建設(shè)網(wǎng)站維護(hù)公司