本節書摘來異步社群《響應式web設計實踐》一書中的第2章，第2.3節，作者： 【美】tim kadlec 譯者： 侯鴻儒 責編： 趙軒，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視。
響應式web設計實踐
早在web出現前的數十年，在設計中使用網格就已經是一種異常流行的做法了，因為網格有助于實作站點的平衡、間距以及組織結構。一個實作良好的網格系統會使你的站點井井有條，同時還可以提高頁面的可讀性和可浏覽性。
注意 關于網格的更多資訊，可以參閱khoi vinh的書籍，或者找一份mark boulton的系列視訊來看。
在《“ordering disorder: grid principles for web design”（秩序之美：網頁中的網格設計）》一書中，作者khoi vinh便強調了使用網格進行設計的四大主要優勢。當你把這些優勢同時運用在設計中時，你會看到它們之間更為緊密的聯系。
網格使資訊的展示變得有序、新穎、和諧。
網格使得使用者能夠預測該從哪裡獲得資訊，這在資訊交流過程中很有幫助。
在與原始總體設想相一緻的前提下，網格使添加新的内容更為容易。
網格能在設計單一解決方案時促進合作，而不必對總體設想的解決方案妥協。
架構簡述
在網上可以找到大量基于網格的架構，這些架構模闆和css規則能幫你快速搭建出預先定義好的網格布局。在這些架構中，有些是靈活的，而有些則不是，它們中的大多數都介于12列至16列之間。雖然在每個新項目中都使用你最喜愛的架構是一件誘人的事，但其實我們可以做得比這更有創意。
雖然使用12列的網格并沒有什麼不妥，但是如果在每個站點中都使用12列的網格就會産生讓人感到厭煩、可預測的布局。為了能夠從網格布局那裡獲得最大的益處，你得針對每個項目重新考慮一下架構。
大膽地去合并那些列，并實作一個3列或者5列的網格吧！那些設計得最為漂亮的web站點，沒有一個會使用被人們用爛了的12列布局的——有時越簡單越好。
使用網格布局要做的第一件事就是确定畫布。在圖形設計中，畫布就是你的紙，它的大小決定了網格。你得先把畫布劃分為若幹你需要的列（3列、5列、9列，甚至12列），然後才能繼續後面的工作。
正如我們之前讨論過的，在web上沒有像在紙上那樣準确的尺寸，你得工作在内容之外，并讓内容來決定網格。
為了清楚起見，這裡需要說明的一點是，當我說“内容”的時候，我并不是特指文本，我說的内容有很多種形式：廣告、視訊、圖檔、文本。這些不同類型的内容都可以決定你的網格。例如，如果你的公司是一家出版公司，并且收入主要來自于廣告，那麼比較明智的做法是圍繞iab的一兩個特定的廣告大小來确定你的網格。同樣，如果你正在重新設計一個有很多遺留圖檔的大型網站，那麼你就要根據這些圖檔來确定你的網格。
讓你的内容來決定你站點的結構是一種很好的設計方法，而且這樣做也是非常實用的。相比把遺留的圖檔或者廣告硬塞進一個事先就定義好的網格中，不如從一開始就讓你的網格來配合它們，這會讓每個頁面的設計都更具粘性。
已經唠叨得夠多了，下面讓我們來動手寫一些代碼吧。
讓我們從一個虛構的體育刊物——《另一個體育網站》（原創的，這我知道）開始吧。我們将為文章頁面設計一個網格，預設的顔色和字型樣式已經寫好了（出于示例的考慮，我們要等到下一章才會引入頁面的header和footer）。讓我們先來看一下需要處理的内容：
提示
我們是水準最高的開發者，是以對于要在頁面上顯示什麼内容我們早已成竹在胸，而且還為我們的設計建立了牢固的html結構。在我們的頁面中會包括一篇文章，每篇文章又會包括一個用h1元素表示的大标題、作者名字以及一則概述，之後便是放在section元素内的文章正文部分了。
每個文章頁面還會有一個邊欄，裡面包含一個最近文章标題的無序清單。由于《另一個體育網站》如果不通過廣告來收費的話，那麼它還需要去尋找别的賺錢途徑，是以每個文章頁面還需要有一個300px × 250px的廣告空間。這是我們遇到的第一個限制，我們可以根據該限制來設計網格。
最後，邊欄中還需要有一個與文章相關的标簽清單，并引用一些他人的言論。其中标簽以無序清單的形式展示，而引用則要放在blockquote元素當中。
讓我們先來用一種古老而傳統的方法來建立我們的網格——以像素為機關。
960px，讓我們嘗試使用9列網格來取代經常使用的12列網格。9列網格的每一列都為84px寬，而且它們之間還有24px的間隔，共計948px。一個300px寬的廣告可以很容易地放到網格的最後3列當中去，剩下的6列則留給文章内容使用。
首先，我們來設定容器元素的寬度：
然後讓文章和邊欄分别向左、右浮動，并為它們指定适當的寬度：
到此為止，布局看起來已經相當可愛了。網格讓設計中的元素看起來是有聯系的，而且文章的寬度也非常利于閱讀，這會使使用者的閱讀過程非常輕松。
但是，當你縮小浏覽器視窗時，問題便會馬上暴露：當浏覽器寬度小于948px的時候，我們又看到了讨厭的水準滾動條，螢幕中又不能同時顯示所有的内容了（圖2.5）。
雖然我們已經設計出了一個不錯的網格，但它目前還隻适用于一小部分使用者使用，下面讓我們來做一些彌補吧，好嗎？
讓網格變得靈活
如果此時你想起了前面讓字型變靈活的方法，那麼其實你可以把同樣的方程式（目标/上下文=結果）應用在靈活化網格布局上來。
容器的上下文是948px，在這樣的容器裡實作流動布局是件很容易的事：
如果你看過上面這個頁面的樣式表，那麼也許你會注意到下面這3行代碼幾乎應用到了所有元素上：
css中預設的盒模型會讓人覺得有問題：你本來已經定義好了width，但你之後定義的所有padding又都會被算到這個width中去。例如，如果你建立了一個300px寬的列，之後在其左右各加了20px寬的padding，那麼此時該列的寬度就會變成340px。 這在人們建立基于網格的流動布局時，會使人感到相當痛苦。
通過使用box-sizing: border-box，你就可以讓浏覽器将padding的值算在已經定義好的元素寬度内部了。通過使用這一屬性，一個300px寬的列即使兩邊新增了20px的padding，它的寬度依然會是300px，因為padding的寬度被算在了元素内部。這使得設計流動布局變得更加容易。
在不使用box-sizing的情況下（如右圖所示），一個寬為300px且有20px padding的元素，其寬和高都會變為340px 。而在使用了box-sizing後，元素仍然是300px寬、300px高。
在包含了box-sizing的各種版本的字首之後，這一屬性就可以獲得很好的浏覽器支援了。在桌面及移動裝置的主流浏覽器中，隻有ie8之前的ie浏覽器對此缺乏支援。實際上，大多數浏覽器對此已經支援了很長一段時間了，比如chrome和firefox，從第一個版本開始就支援字首文法了。
最後，我們來讓頁面中的其他部分也流動起來。
為什麼是95%？其實沒有什麼确切的原因。我試了幾種不同的寬度，結果95%在不同的浏覽器寬度下都顯示得非常好。有時候，設計中真的就是靠看和感覺來定的。
現在，内容欄和邊欄都實作了流動布局，下面我們要将容器上現有的固定寬度也去掉。我們将頁面容器的總寬度設定為95%來取代之前的948px，留一點padding（譯者注：指剩下的那5%）能給頁面一些呼吸的空間：
在這個例子中，我們使用em作為頂部和底部padding的機關，并使用百分比作為左右兩邊padding的機關，之是以要這樣做是由上下文所決定的。因為頂部和底部的padding值是由font-size的大小決定的，是以使用em更有意義。
流動世界中的固定寬度對象
下一個要讨論的對象就是圖檔。當你縮放浏覽器視窗時，有着固定寬度的圖檔就會變得極為醒目，因為與周圍其他流動的内容相比，它們會顯得格格不入。在較寬的列中它們隻會占據一小部分；而在較窄的列中它們又太寬。不過謝天謝地，讓它們變整齊也是很容易的。
我們要做的第一件事，就是使用下面的聲明來讓圖檔填滿整個邊欄：
這裡需要注意的很重要的一點是，不能在html中設定img元素的height和width的屬性值，因為如果設定了這些值，就不能按比例縮放圖檔了。為了使流動圖檔正常工作，你隻能通過css來控制圖檔的大小。
然後我們需要聲明max-width。通過将max-width設定為100%，我們便可以告訴浏覽器不要讓圖檔的大小超過了它的容器元素（本例中是邊欄）。這樣，即使浏覽器視窗變窄，圖檔也不會溢出或被裁剪了：
至此，我們便擁有了一個流動布局——能夠自适應地調整自己，而且在大部分的裝置上都是可用的（圖2.6）。在提升有關圖檔的體驗方面我們還有很多事可以做，我們将在第4章中再對此做詳細介紹。