在乙個有限的、固定的平面上，用水平線和垂直線（虛擬的線，「參考線」），將平面劃分成有規律的一系列「格仔」（虛擬的格仔），並依託這些格仔、或以格仔的邊線為基準線，來進行有規律的版面布局。
通俗點來說，就是人為的把網頁中的一行，等比例劃分,比如將一行劃分為 12 等分。然後在每個格仔裡進行頁面開發，這就柵格化。
假如在頁面裡定義了乙個 div，並設定如下 css 屬性：
div
複製**
頁面上將會展示乙個帶有灰色邊框的，寬度 100% 的矩形。如果手動控制瀏覽器放大縮小，此 div 也會相應的放大縮小，但寬度始終是 100%。
如果在頁面定義了兩個 div，並設定如下 css 屬性：
body
div
複製**
頁面上將會有兩個寬度各佔 50% 的 div，如果頁面放大或縮小，這兩個 div 都會始終保持著頁面 50% 的寬度。
相信到這裡，應該有人看出來了，這就是柵格化，只不過第乙個例子是將一行劃分為 1 等分，即只有乙個格仔。 第二個例子將一行劃分為 2 等分，即有兩個格仔。如果我將一行劃分為 12 等分，那就跟 bootstrap 中的柵格化系統一模一樣了，有 12 個格仔。
讓我們來親自實現乙個柵格化系統，假設我們要將一行劃分為 12 等分，那 1 等分就占有100% / 12 = 8.33%的寬度。
相應的 css 可以這樣設定：
.col1
.col2
.col3
.col4
.col5
.col6
.col7
.col8
.col9
.col10
.col11
.col12
複製**
lang="en">
charset="utf-8">
titletitle>
body
font-size: 0;
}div
.col1
.col2
.col3
.col4
.col5
.col6
.col7
.col8
.col9
.col10
.col11
.col12
style>
head>
class="col1">
div>
class="col2">
div>
class="col3">
div>
class="col6">
div>
div>
script>
body>
html>
複製**
怎麼樣？是不是很簡單。
結合@media**查詢，我們可以做得更多。@media 詳情請看mdn
相信用過 bootstrap 柵格化系統的都知道，在 bootstrap 柵格化系統中，有一些col-mdcol-sm屬性，它們是幹什麼用的呢？ 其實，它們都是柵格化系統的 css 類名，只是針對了不同的螢幕寬度。
假如我們有這樣的乙個需求： 在 pc 上，因為螢幕比較大，我們要求一行顯示 4 列的內容。但是在手機上，因為螢幕比較小，要求一行顯示 3 列的內容。 即乙個**同時適配 pc 和手機端，根據不同的端自動調整頁面。
此時，我們可以這樣做：
lang="en">
charset="utf-8">
titletitle>
body
font-size: 0;
}div
/* 針對螢幕解析度大於等於1200的 */
@media (min-width: 1200px)
.col-md2
.col-md3
.col-md4
.col-md5
.col-md6
.col-md7
.col-md8
.col-md9
.col-md10
.col-md11
.col-md12
} /* 針對螢幕解析度小於1200的 */
@media (max-width: 1199px)
.col-sm2
.col-sm3
.col-sm4
.col-sm5
.col-sm6
.col-sm7
.col-sm8
.col-sm9
.col-sm10
.col-sm11
.col-sm12
}
style>
head>
class="col-md3 col-sm4">
div>
class="col-md3 col-sm4">
div>
class="col-md3 col-sm4">
div>
class="col-md3 col-sm4">
div>
div>
script>
body>
html>
複製**
>=1200px時，一行顯示 4 列，當螢幕<1200px時，一行顯示3列，而且是瀏覽器自動調整。
乙個柵格化系統就這樣實現了。圖一
圖二 任務要求：
當頁面大於768px時，頁面如圖1所示。
當頁面小於等於768px時， 頁面如圖2所示。
bootstrap的柵格系統實現原理
柵格系統的實現原理非常簡單,僅僅是通過定義容器大小,平分成12份,在調整內外邊距,最後結合 查詢,就製作出強大的響應式柵格系統.柵格系統的主要實現原理 1.一行資料 row 必須包含在.container中,以便為其賦予合適的對其方式和內邊距 padding 2.使用行 row 在水平方向建立一組列...
float實現12柵格系統
12柵格系統布局，需要幾份就佔份，比如4 8分 2 10分 下面的結果圖是每個都只佔乙份 佔一行中的一列 col 1 佔一行中的兩列 col 2 佔一行中的三列 col 3 佔一行中的四列 col 4 佔一行中的五列 col 5 佔一行中的六列 col 6 佔一行中的七列 col 7 佔一行中的八列...
實現簡單的類bootstrap柵格系統
先看html結構，在最外層有乙個容器，容器下裝有行，列位於行中。class container class row class col md 4 red 4 div class col md 4 blue 4 div class col md 4 yellow 4 div div div 盒模型設定...