更多技術文章
什么是柵格化
在一個有限的、固定的平面上，用水平線和垂直線（虛擬的線，“參考線”），將平面划分成有規律的一系列“格子”（虛擬的格子），並依托這些格子、或以格子的邊線為基准線，來進行有規律的版面布局。
通俗點來說，就是人為的把網頁中的一行，等比例划分,比如將一行划分為 12 等分。然后在每個格子里進行頁面開發，這就柵格化。
原理
假如在頁面里定義了一個 DIV，並設置如下 CSS 屬性：
div {
border: 1px solid #ddd;
height: 200px;
width: 100%;
}
頁面上將會展示一個帶有灰色邊框的，寬度 100% 的矩形。如果手動控制瀏覽器放大縮小，此 DIV 也會相應的放大縮小，但寬度始終是 100%。
如果在頁面定義了兩個 DIV，並設置如下 CSS 屬性：
body {
font-size: 0; // 將inline-block布局兩個DIV之間的距離清除
}
div {
height: 200px;
border: 1px solid #ddd;
width: 50%;
display: inline-block;
box-sizing: border-box;
vertical-align: top; // 頂部對齊
}
頁面上將會有兩個寬度各占 50% 的 DIV，如果頁面放大或縮小，這兩個 DIV 都會始終保持着頁面 50% 的寬度。
相信到這里，應該有人看出來了，這就是柵格化，只不過第一個例子是將一行划分為 1 等分，即只有一個格子。
第二個例子將一行划分為 2 等分，即有兩個格子。如果我將一行划分為 12 等分，那就跟 bootstrap 中的柵格化系統一模一樣了，有 12 個格子。
實現
讓我們來親自實現一個柵格化系統，假設我們要將一行划分為 12 等分，那 1 等分就占有 100% / 12 = 8.33% 的寬度。
相應的 CSS 可以這樣設置：
.col1 {width: 8.33%}
.col2 {width: 16.66%}
.col3 {width: 25%}
.col4 {width: 33.33%}
.col5 {width: 41.66%}
.col6 {width: 50%}
.col7 {width: 58.33%}
.col8 {width: 66.66%}
.col9 {width: 75%}
.col10 {width: 83.33%}
.col11 {width: 91.66%}
.col12 {width: 100%}
上一個完整的示例來看看吧：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.app {
font-size: 0;
}
.app div {
box-sizing: border-box;
border: 1px solid red;
height: 200px;
display: inline-block;
vertical-align: top;
}
.col1 {width: 8.33%}
.col2 {width: 16.66%}
.col3 {width: 25%}
.col4 {width: 33.33%}
.col5 {width: 41.66%}
.col6 {width: 50%}
.col7 {width: 58.33%}
.col8 {width: 66.66%}
.col9 {width: 75%}
.col10 {width: 83.33%}
.col11 {width: 91.66%}
.col12 {width: 100%}
</style>
</head>
<body>
<div class="app">
<!-- 4個div 占滿一行 -->
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="col6"></div>
</div>
</script>
</body>
</html>
最后呈現出來的效果是這樣的。
怎么樣？是不是很簡單。
進階
結合 @media 媒體查詢，我們可以做得更多。@media 詳情請看MDN
相信用過 bootstrap 柵格化系統的都知道，在 bootstrap 柵格化系統中，有一些 col-md col-sm 屬性，它們是干什么用的呢？
其實，它們都是柵格化系統的 CSS 類名，只是針對了不同的屏幕寬度。
假如我們有這樣的一個需求：
在 PC 上，因為屏幕比較大，我們要求一行顯示 4 列的內容。但是在手機上，因為屏幕比較小，要求一行顯示 3 列的內容。
即一個網站同時適配 PC 和手機端，根據不同的端自動調整頁面。
此時，我們可以這樣做：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.app {
font-size: 0;
}
.app div {
box-sizing: border-box;
border: 1px solid red;
height: 200px;
display: inline-block;
vertical-align: top;
}
/* 針對屏幕分辨率大於等於1200的 */
@media (min-width: 1200px) {
.col-md1 {width: 8.33%}
.col-md2 {width: 16.66%}
.col-md3 {width: 25%}
.col-md4 {width: 33.33%}
.col-md5 {width: 41.66%}
.col-md6 {width: 50%}
.col-md7 {width: 58.33%}
.col-md8 {width: 66.66%}
.col-md9 {width: 75%}
.col-md10 {width: 83.33%}
.col-md11 {width: 91.66%}
.col-md12 {width: 100%}
}
/* 針對屏幕分辨率小於1200的 */
@media (max-width: 1199px) {
.col-sm1 {width: 8.33%}
.col-sm2 {width: 16.66%}
.col-sm3 {width: 25%}
.col-sm4 {width: 33.33%}
.col-sm5 {width: 41.66%}
.col-sm6 {width: 50%}
.col-sm7 {width: 58.33%}
.col-sm8 {width: 66.66%}
.col-sm9 {width: 75%}
.col-sm10 {width: 83.33%}
.col-sm11 {width: 91.66%}
.col-sm12 {width: 100%}
}
</style>
</head>
<body>
<div class="app">
<div class="col-md3 col-sm4"></div>
<div class="col-md3 col-sm4"></div>
<div class="col-md3 col-sm4"></div>
<div class="col-md3 col-sm4"></div>
</div>
</script>
</body>
</html>
一個 DIV，同時設置兩個類名。當屏幕 >=1200px 時，一行顯示 4 列，當屏幕 <1200px 時，一行顯示3列，而且是瀏覽器自動調整。
一個柵格化系統就這樣實現了。
練習任務
對於柵格化的介紹就到此結束了，但如果你看完了文章后什么都不做，不到一周，就會把學到的知識忘得七七八八，為了幫助你鞏固知識，特地布置了一個小任務，按要求實現如下頁面：
圖一
圖二
任務要求：
- 當頁面大於
768px時，頁面如圖1所示。 - 當頁面小於等於
768px時， 頁面如圖2所示。