柵格化系統的原理以及實現

dkzwm 發布于2019-08-30 15:43 / 3483人閱讀

摘要：實現讓我們來親自實現一個柵格化系統，假設我們要將一行劃分為等分，那等分就占有的寬度。一個柵格化系統就這樣實現了。

更多技術文章 什么是柵格化

在一個有限的、固定的平面上，用水平線和垂直線（虛擬的線，“參考線”），將平面劃分成有規律的一系列“格子”（虛擬的格子），并依托這些格子、或以格子的邊線為基準線，來進行有規律的版面布局。

通俗點來說，就是人為的把網頁中的一行，等比例劃分,比如將一行劃分為 12 等分。然后在每個格子里進行頁面開發，這就柵格化。

原理

假如在頁面里定義了一個 DIV，并設置如下 CSS 屬性：

div {
  border: 1px solid #ffffd;
  height: 200px;
  width: 100%;
}

頁面上將會展示一個帶有灰色邊框的，寬度 100% 的矩形。如果手動控制瀏覽器放大縮小，此 DIV 也會相應的放大縮小，但寬度始終是 100%。

如果在頁面定義了兩個 DIV，并設置如下 CSS 屬性：

body {
    font-size: 0; // 將inline-block布局兩個DIV之間的距離清除
}
div {
    height: 200px;
    border: 1px solid #ffffd;
    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%}

上一個完整的示例來看看吧：



    
    Title

最后呈現出來的效果是這樣的。

怎么樣？是不是很簡單。

進階

結合 @media 媒體查詢，我們可以做得更多。@media 詳情請看MDN

相信用過 bootstrap 柵格化系統的都知道，在 bootstrap 柵格化系統中，有一些 col-md col-sm 屬性，它們是干什么用的呢？
其實，它們都是柵格化系統的 CSS 類名，只是針對了不同的屏幕寬度。

假如我們有這樣的一個需求：
在 PC 上，因為屏幕比較大，我們要求一行顯示 4 列的內容。但是在手機上，因為屏幕比較小，要求一行顯示 3 列的內容。
即一個網站同時適配 PC 和手機端，根據不同的端自動調整頁面。

此時，我們可以這樣做：



    
    Title

一個 DIV，同時設置兩個類名。當屏幕 >=1200px 時，一行顯示 4 列，當屏幕 <1200px 時，一行顯示3列，而且是瀏覽器自動調整。

一個柵格化系統就這樣實現了。

練習任務

對于柵格化的介紹就到此結束了，但如果你看完文章后什么都不做，不到一周，就會把學到的知識忘得七七八八，為了幫助你鞏固知識，特地布置了一個小任務，按要求實現如下頁面：

圖一

圖二

任務要求：

當頁面大于 768px 時，頁面如圖1所示。

當頁面小于等于 768px 時，頁面如圖2所示。

這里是答案和在線DEMO，但是最好先試試能不能自己做出來，如果實在做不出來，再看答案。

GPU云服務器云服務器柵格系統原理 volatile的實現原理回調的原理、實現與應用圖形化的系統界面

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116081.html

柵格化系統的原理以及實現

摘要：實現讓我們來親自實現一個柵格化系統，假設我們要將一行劃分為等分，那等分就占有的寬度。一個柵格化系統就這樣實現了。更多技術文章什么是柵格化在一個有限的、固定的平面上，用水平線和垂直線（虛擬的線，參考線），將平面劃分成有規律的一系列格子（虛擬的格子），并依托這些格子、或以格子的邊線為基準線，來進行有規律的版面布局。通俗點來說，就是人為的把網頁中的一行，等比例劃分,比如將一行劃分為 ...

weknow619 2019-08-23 16:44 評論0 收藏0
Bootstrap網格系統

摘要：柵格系統中的列是通過指定到的值來表示其跨越的范圍。實例下圖是一個柵格系統，共有四行。然后在根目錄中，使用命令，可以自動將源代碼編譯成，放在目錄中。什么是Bootstrap Bootstrap是一個用于快速開發Web應用程序和網站的前端框架，它包括HTML,CSS,JS等。它是由Twitter開發，現在成為Github上最為流行的前端開發框架。它提供了一套響應式，移動設備優先的流式柵格...

ISherry 2019-08-30 13:07 評論0 收藏0
你不需要基于 CSS Grid 的柵格布局系統

摘要：在過去的幾個星期里，我開始看到基于的布局框架和柵格系統的出現。你可能傾向于明確給出所有元素的位置，或是盡可能依賴于自動布局。 showImg(https://segmentfault.com/img/remote/1460000010188997); 在過去的幾個星期里，我開始看到基于 CSS Grid 的布局框架和柵格系統的出現。我們驚訝它為什么出現的這么晚。但除了使用 CSS Gr...

anonymoussf 2019-08-01 17:20 評論0 收藏0