【原文鏈接】 http://j4n.co/blog/Creating-your-own-css-grid-system
Creating Your Own CSS Grid System
第一部分-網格系統基礎
CSS網格已經存在了很長一段時間。他們往往是捆綁在前端框架中如Bootstrap。我不討厭使用Bootstrap，但有時如果只是需要的是一個網格系統，使用框架會大材小用。這里是如何從零開始制作自己的CSS網格系統。
網格系統元素：
正如我們所見，一個基本的網格只包含幾個少量的元素
--container 一個容器
--rows 行元素
--columns 列元素
--gutters 元素間的間隔
一 container
container 的作用是設置整個網格的寬度，容器的寬度一般是100%，但你也可能希望設定一個最大寬度。
1 .grid-container { 2 width : 100%; 3 max-width : 1200px; 4 }
二、Rows
行元素的目的是保持列（column）元素不會溢出到其他行，為達到這個目的，我們將使用清除浮動的方法來確保行元素中的每個元素保持在行元素中。
/*-- our cleafix hack -- */ .row:before, .row:after { content:""; display: table ; clear:both; }
三、Columns
列元素是網格系統中最復雜的部分。首先有許多不同的針對列元素的CSS定位方式，列元素的寬度以及響應式設計需要考慮。在這篇教程中我們將介紹定位元素並給予他們寬度，響應式設計的要點將在以后介紹。
1、列元素定位
Floats, inline-blocks, display-table, display-flex. 有非常多的CSS方法給列元素定位。從我個人的經驗來看，最廣泛使用並最容易出錯的是“float”方法。
如果我們的列元素是空的，我們的浮動列元素將會堆在其他元素的頂部，為了預防這個問題，我們要給我們的列元素一個最小高度1px 並浮動她們
[class*='col-'] { float: left; min-height: 1px; }
2、列元素寬度
計算列寬度的常規方法是用：容器寬度/列數 得到列寬度。在這個實例中，我們的容器寬度為100%，要分為六列，100/6=16.66，因此我們初始的列寬為16.66%
[class*='col-'] { float: left; min-height: 1px; width: 16.66%; }
這當然是剛剛開始，如果我們想創建一個兩個列元素寬度的section，我們就需要創建一個兩倍寬的列元素，這個計算很簡單
.col-1{ width: 16.66%; } .col-2{ width: 33.33%; } .col-3{ width: 50%; } .col-4{ width: 66.664%; } .col-5{ width: 83.33%; } .col-6{ width: 100%; }
我們唯一需要考慮的問題是使用這些列元素組合的時候，任何一行中列元素增加到6個時的情況。
三、列間距（Columns gutter）
在“border-box” box-sizing模型之前，給百分寬度元素一個靜態的padding真的很痛苦。幸運的是使用“border-box”模型，我們可以輕松創建列寬
/*-- setting border box on all elements inside the grid --*/ .grid-container *{ box-sizing: border-box; } [class*='col-'] { float: left; min-height: 1px; width: 16.66%; /*-- our gutter --*/ padding: 12px; }
（就我個人而言，我在CSS中使用 * {box-sizing: border-box;} 來申明頁面中的每個元素border-box屬性。
四、我們基本的網格系統已經完成
<div class="grid-container outline"> <div class="row"> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> </div> <div class="row"> <div class="col-2"><p>col-2</p></div> <div class="col-2"><p>col-2</p></div> <div class="col-2"><p>col-2</p></div> </div> <div class="row"> <div class="col-3"><p>col-3</p></div> <div class="col-3"><p>col-3</p></div> </div> </div>
其需要的CSS代碼為：
.grid-container{ width: 100%; max-width: 1200px; } /*-- our cleafix hack -- */ .row:before, .row:after { content:""; display: table ; clear:both; } [class*='col-'] { float: left; min-height: 1px; width: 16.66%; /*-- our gutter -- */ padding: 12px; background-color: #FFDCDC; } .col-1{ width: 16.66%; } .col-2{ width: 33.33%; } .col-3{ width: 50%; } .col-4{ width: 66.66%; } .col-5{ width: 83.33%; } .col-6{ width: 100%; } .outline, .outline *{ outline: 1px solid #F6A1A1; } /*-- some extra column content styling --*/ [class*='col-'] > p { background-color: #FFC2C2; padding: 0; margin: 0; text-align: center; color: white; }
HTML
<div class="grid-container outline"> <div class="row"> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> </div> <div class="row"> <div class="col-2"><p>col-2</p></div> <div class="col-2"><p>col-2</p></div> <div class="col-2"><p>col-2</p></div> </div> <div class="row"> <div class="col-3"><p>col-3</p></div> <div class="col-3"><p>col-3</p></div> </div> </div> <hr/>
第二部分 實現響應式
調整我們的網頁布局來適應移動端顯示非常的簡單，我們需要做的只是調整列元素的寬度。
一個簡單的目的，我要在屏幕寬度小於800px的時候，使列元素的寬度變為原來的兩倍。
唯一要注意的問題是一行中的最后一個列元素特殊的情況，比如.col-2的元素或者.col-5元素旁的.col-1元素
為解決這個問題，在特殊去情況下我們把.col-1元素及.col-2元素設置為100%寬度
@media all and (max-width:800px){ .col-1{ width: 33.33%;} .col-2{ width: 50%;} .col-3{ width: 83.33%;} .col-4{ width: 100%;} .col-5{ width: 100%;} .col-6{ width: 100%;} .row .col-2:last-of-type{ width: 100%; } .row .col-5 ~ .col-1{ width: 100%; } }
當元素顯著小於800px（比如480px）我們可以讓除了.col-1其余都顯示為width=100%
@media all and (max-width:650px){ .col-1{ width: 50%; } .col-2{ width: 100%; } .col-3{ width: 100%; } .col-4{ width: 100%; } .col-5{ width: 100%; } .col-6{ width: 100%; } }
這就已經足夠，現在我們已經創建了自己的響應式網格系統，而沒有使用框架
<div class="grid-container outline"> <div class="row"> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> <div class="col-1"><p>col-1</p></div> </div> <div class="row"> <div class="col-2"><p>col-2</p></div> <div class="col-2"><p>col-2</p></div> <div class="col-2"><p>col-2</p></div> </div> <div class="row"> <div class="col-3"><p>col-3</p></div> <div class="col-3"><p>col-3</p></div> </div> <div class="row"> <div class="col-4"><p>col-4</p></div> <div class="col-2"><p>col-2</p></div> </div> <div class="row"> <div class="col-5"><p>col-5</p></div> <div class="col-1"><p>col-1</p></div> </div> <div class="row"> <div class="col-6"><p>col-6</p></div> </div> </div>
但是這個指南只是創建你自己系統的起點，他不是一個框架甚至不是一個完整的解決方案,但我希望它使創建CSS網格系統不再神秘。