檢驗前端的一個基本功就是考查他的布局。很久之前聖杯布局風靡一時，這里就由聖杯布局開始，到最流行的bootstrap柵格布局。
聖杯布局
聖杯布局是一種三列布局，兩邊定寬，中間自適應：
1 * { 2 box-sizing: border-box; 3 } 4 html, body{ 5 width: 100%; 6 height: 100%; 7 margin: 0; 8 } 9 .container{ 10 width:100%; 11 } 12 .container:after{ 13 display: table; 14 content:"."; 15 clear:both; 16 } 17 18 .container .cl{ 19 float:left; 20 border: 1px solid red; 21 height: 200px; 22 } 23 24 .main{ 25 width:100%; 26 padding 0 290px 0 320px; 27 background-color: blue; 28 } 29 .sub{ 30 width: 320px; 31 margin-left:-100%; 32 background-color: white; 33 } 34 .extra{ 35 width: 290px; 36 margin-left:-290px; 37 background-color: yellow; 38 }
1 <body> 2 <div class="container"> 3 <div class="cl main"> 4 </div> 5 <div class="cl sub"></div> 6 <div class="cl extra"></div> 7 </div> 8 </body>
聖杯布局的原理就是當子元素處於浮動狀態時，設置負margin，子元素會疊蓋到兄弟元素之上。
那么能否用現在想要將其中藍色區域再次划分成三個區域，相信有很多種辦法。但能否通過嵌套的方式實現呢？我們可以試一下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> 5 <meta http-equiv="window-target" content="_top"> 6 <title>Writing to Same Doc</title> 7 <style type="text/css"> 8 * { 9 box-sizing: border-box; 10 } 11 html, body{ 12 width: 100%; 13 height: 100%; 14 margin: 0; 15 } 16 .container{ 17 width:100%; 18 } 19 .container:after{ 20 display: table; 21 content:"."; 22 clear:both; 23 } 24 25 .container .cl{ 26 float:left; 27 border: 1px solid red; 28 height: 200px; 29 } 30 31 .main{ 32 width:100%; 33 padding: 0 290px 0 320px; 34 background-color: blue; 35 } 36 .sub{ 37 width: 320px; 38 margin-left:-100%; 39 background-color: white; 40 } 41 .extra{ 42 width: 290px; 43 margin-left:-290px; 44 background-color: yellow; 45 } 46 </style> 47 </head> 48 <body> 49 <div class="container"> 50 <div class="cl main"> 51 <div class="container"> 52 <div class="cl main"></div> 53 <div class="cl sub"></div> 54 <div class="cl extra"></div> 55 </div> 56 </div> 57 <div class="cl sub"></div> 58 <div class="cl extra"></div> 59 </div> 60 61 </body> 62 </html>
可以看到藍色區域已被划分成三個區域。這個過程是不是很像bootstrap中的柵格嵌套？誠然，利用聖杯布局我們可以實現一套簡單的柵格系統，詳情請看這篇文章：
雙飛翼布局介紹-始於淘寶UED 里面介紹的雙飛翼布局實際上就是聖杯布局的變體。但柵格布局就是簡單的嵌套出來的嗎，很明顯答案是否定的。柵格設計系統（又稱網格設計系統、標准尺寸系統、程序版面設計、瑞士平面設計風格、國際主義平面設計風格），是一種平面設計的方法與風格。運用固定的格子設計版面布局，其風格工整簡潔，已成為今日出版物設計的主流風格之一。那么如何來設計柵格系統呢？我們往下看
柵格系統的原理
假設：Flowline的寬度為W，column的寬度為c，Gutter的寬度為g，Margin的寬度為m，柵格列數為N
W = c*N + g*(N-1) + 2m；g的寬度通常為m的兩倍，所以：
W = (c+g) * N；把c+g記為C，得：
W = C * N;
大部分的柵格系統都是此公式的變體。
Bootstrap的柵格系統
下面我們將一起來看一下常見的柵格布局的設計和bootstrap中的設計實現。BootStrap中合理的使用柵格布局，必須將列放入row中，而row必須放入container中。container類在布局中主要有兩個作用：
- 在不同的寬度區間內（響應式斷點）提供寬度限制。當寬度變化時，采用不同的寬度。
- 提供一個padding，阻止內部內容觸碰到瀏覽器邊界。
Bootstrap中使用padding代替上文中的margin。大小為15px，如下圖所示，粉紅色為padding大小。
Row是column的容器，每個row中的column之和必須為12，不過我們可以通過嵌套的方式擴展。Row的左右margin都為-15px，用來抵消container中的padding，如下圖藍色部分所示：
row的這種設計主要為了方便嵌套，后文中會提到。
Colomn是柵格系統的主角，每個column左右padding都為15px，上文中row的負margin抵消了container的padding，所以為每個column設置padding就是為了防止內容直接觸碰邊界，同時不同的column之間擁有30px的卡槽（Gutter）。如下圖黃色部分所示：
現在想想上文中提到的公式：W = C * N;
上文提到row的負margin設計主要為了嵌套，如果要在column中嵌套column首先要把被嵌套的column放到row中，把row放到作為容器的column中，而不需要在放置一個container。如下圖中藍色所示，是放入column中的row的負margin區域。
現在將被嵌套的column放入row中，如下圖所示，上層column便是起到了container的作用。
如此我們便看到了Bootstrap柵格系統的精妙所在。
參考文章：