在做專案的時候，經常要做響應式布局，對於好多初學者來說，這還是乙個比較困難的事，於是就會用一些css框架，比如說bootstrap, bootstrap雖然好多方面都做得相當完善，在快速開發的時候確實很有用，但是，畢竟是框架嗎，肯定不能完全符合自己的功能需求，而且也會有很多的坑，還有的情況就是也許你只需要它的柵格系統，但不得不引用它的整個css檔案，這其實是完全沒有必要的。
那麼，接下來我就將建立也屬於自己的柵格系統，所有的規則都根據自己的實際開發需求做調整（如果 用框架的話，可能你還得自己改寫框架原始碼，這是個人不推薦的做法，它有很多弊端，這裡就不一一舉例了。）
從上圖可以看出，乙個基本的柵格系統僅僅需要幾個元素：
容器是用於設定整個柵格的寬度， 容器的寬度通常是100%, 但是，你可能也要設定一下最大寬度，用於限制在大螢幕的展示。
行是用於確保它裡面的列元素不會溢位到其他的行元素裡面，為了達到目的，通常我們需要使用clearfix。
列是柵格系統中最重要的組成部分，我們通常需要在不同的解析度下，改變他的寬度來實現響應式布局。
注意: 這裡通常需要開啟'border-box' 模式。
最後，就是通過**查詢來實現響應式布局了：
完整的**如下：
css**：
.grid-container
.grid-container *
.row:before,
.row:after
[class*='col-']
.col-1
.col-2
.col-3
.col-4
.col-5
.col-6
.outline, .outline *
[class*='col-'] > p
@media screen and (max-width:800px)
.col-2
.col-3
.col-4
.col-5
.col-6
.row .col-2:last-of-type
.row .col-5 ~ .col-1
}@media screen and (max-width:650px)
.col-2
.col-3
.col-4
.col-5
.col-6
}html**：
col-1
col-1
col-1
col-1
col-1
col-1
col-2
col-2
col-2
col-3
col-3
col-4
col-2
col-5
col-1
col-6
Bootstrap 柵格系統
目錄 1 簡介 2 柵格選項 3 列偏移 4 巢狀列 5 列排序 1 簡介 bootstrap內建了一套響應式 移動裝置優先的流式柵格系統，隨著螢幕裝置或視口 viewport 尺寸的增加，系統會自動分為最多12列。它包含了易於使用的預定義classe，還有強大的mixin用於生成更具語義的布局。2...
柵格系統總結
柵格設計系統，是一種平面設計的方法與風格。運用固定的格仔設計版面布局，其風格工整簡潔。柵格系統的設計原理 bootstrap 網格系統 bootstrap 包含了乙個響應式的 移動裝置優先的 不固定的網格系統，可以隨著裝置或視口大小的增加而適當地擴充套件到 12 列。它包含了用於簡單的布局選項的預定...
layui柵格系統
首先，它是一種響應式的柵格系統，簡單說就是支援多種裝置，會自行改變行寬高。柵格的使用不需要js引入，單純的class樣式宣告。首先定義好頁面框架 class layui container div 其次layui定義的柵格為12等分，就是說一行被分成了12份，可以任意分割小於等於12列，但是必須滿足...