當我們確定好內容區寬度、水槽寬度及數量后，計算出列寬（上述有提到不一定整除）并將整體進行居中顯示，兩側即自動形成邊距 。
文章插圖
四、柵格與響應式的結合1. 自適應與響應式1）自適應
自適應布局是為了讓網頁內容根據不同終端來自行適配布局，設計師需要制定好同一設計稿的變化規則，程序員在開發時創建多個布局，對不同的終端分別提供一套獨立的前端代碼，系統就能自行判斷當前訪問的是PC端、平板還是手機 。
我們可以做一個測試，對自適應網頁窗口的寬度進行調整，就會發現每經過一個斷點時，頁面的元素位置就會發生改變，呈現出不同的布局效果 。需要明確的是，當窗口寬度未達到下一個斷點之前，元素不會隨著窗口的調整而變化 。
文章插圖
自適應效果因需要前端為每個終端提供獨立的代碼，固開發成本較高，在設計時，元素的大小、位置變化不必太過復雜，只需保留必要的功能入口即可 。
2）響應式
響應式沒有自適應那么多的控制，前端只需通過一套代碼即可無縫銜接電腦端、平板和手機，可多端同步生效，其開發成本及設計成本都相對較低，適應性更強 。
響應式布局最典型的就是當頁面窗口寬度發生變化時，元素的大小隨時都在發生變化，特別是圖片的伸縮、整行文字的長短變化尤為明顯 。
文章插圖
2. 柵格行為變化1）固定柵格
將自適應關聯到柵格上，簡單來說，就是頁面寬度在變化過程中未達到下一個斷點時，柵格的列與水槽寬度不變，頁面布局不會產生變化 。當達到預設斷點，柵格的列數與水槽會相應增加或減少，頁面右側的內容也會隨之增減，但元素之間的尺寸與間距依然是固定的 。
固定柵格的適配規則簡單，實現成本也相對較低，但是因為在拉伸過程中邊距的不固定性，局限了其適用范圍，一般只適合用在內容居中、上下結構布局類型的產品中 。需要注意的是，在過大或過小尺寸的屏幕上，比例可能會顯得不夠協調 。
文章插圖
2）流動柵格
流動柵格的邊距、水槽寬度是固定不變的，在達到下一個斷點前，列的數量也不會增加，列寬會跟隨頁面寬度左右伸縮，變化規則不一定是最小單位（8px）倍數，內容元素也會隨著頁面寬度的變化而變化，以保持頁面內容始終充滿屏幕的可用空間 。
我們可以將流動柵格的視覺呈現方式稱之為響應式彈性布局，這種布局的兼容性很高，能很好的適應多端設備及不同的屏幕分辨率 。對于不同尺寸的卡片混排也能平滑過渡，不會顯得突兀，例如：圖像、視頻、內容編輯器、數據可視化等，除斷點變化外，內容元素的縮放不會改變頁面的排版布局 。
文章插圖
3）混合柵格
絕大多數的網站使用的都是流動柵格，但一些后臺管理系統及工具型界面設計為了使布局既有固定的寬度、也有流動的寬度，就會采用混合柵格的形式 。
混合柵格的靈活性很高，特別是內容較為復雜的產品會顯得更加友好，在不同分辨率的屏幕上都能達到理想的視覺效果 。不過對于開發來說，規則相對復雜，實現成本較高 。
文章插圖
五、部分問題及處理方式1. 水槽中不要留下元素這里所說的并非水槽中不能存在內容，而是不要將單個元素或元素的邊緣置于水槽內，否則就會參差不齊，違背了柵格的目的 。如果你的元素過大，就讓他跨越柵格，到達下一個列的右側邊緣 。
文章插圖
2. 柵格不一定整除雖說設計師對于每一個像素的的追求都很執著，但大部分情況下柵格都是無法整除的，而相差的像素也無法被用戶以肉眼覺察 。我們需要理解的是，柵格的目的是為了保持視覺的協調與統一，而非像素級的精確 。
舉個例子，以1920px的寬度、12柵格為例，內容區寬度可以是1000px、1200px、1400px、1600px…，每一次內容區寬度的變化都要將柵格的列寬重新調整，永遠無法將柵格每次整除，即便偶爾也是例外 。
推薦閱讀
- 形容家鄉的美好朋友圈句子 形容三月美好的朋友圈句子文案
- 感恩家鄉贊美家鄉的經典語錄
- 家鄉的風俗元宵節作文 家鄉的元宵節作文5篇
- 部落沖突9本部落戰戰術有哪些 部落沖突9本部落戰怎么打
- 清朝狀元林紹棠的家鄉在哪里 清朝狀元林紹棠介紹
- 2021八本最強防御陣圖 部落沖突8本最強布陣
- 如果工作和學習相沖突該怎么選擇 學業和工作沖突怎么回答
- 招聘14薪相當于年終獎嗎 14薪和年終獎沖突嗎
- 部落沖突六本最強陣是什么 部落沖突六本最強陣形
- CMS 偽靜態順序沖突解決方案