CSS利用Multi-Column實現網格布局的方法

下圖展示了小視窗中我的網站底部（菜單和著作權公告）一個非常簡約的設計。

實現它的html結構非常簡單：

代碼如下	複製代碼
<ul>     <li><a href="/">Home</a></li>     <li><a href="/about/">About</a></li>     <li><a href="/services/">Services</a></li>     <li><a href="/portfolio/">Portfolio</a></li>     <li><a href="/blog/">Blog</a></li>     <li><a href="/contact/">Contact</a></li> </ul> <p><small>Copyright &copy; David Bushell</small></p>

我將帶著一種“手機優先”的心理來建立這個網站——假如你知道怎樣進行螢幕解析度查詢（media queries work）——當我的螢幕寬度增加時，我想讓底部菜單變為三列：

 如果是基於架構或者網格系統來建立網站，依附於網格系統的約定 ，或許我需要反覆考慮這裡的CSS，也可能不得不增加一些額外的元素標記來顯示多列，甚至會逼著我將一個菜單列表分成多列，太噁心了！讓我們看看簡單的方法。

在這種情況下，CSS多欄版面配置是最完美的解決方案。

代碼如下	複製代碼
.footer-menu {     column-count: 3;     column-gap: 1.75em; }

上面兩條聲明就是所有我需要為菜單定義的。無論將來會出現多少，清單項目都會自然地流動顯示為三列。

下面的圖為進一步設計效果，在這裡你可以看到大螢幕（或者“案頭”）下我期望的布局。我疊加了線條在網格系統中，因此你可以看到對齊情況。

 

其實我已經使用了兩個網格對這個網站進行了設計，一個有六列，另一個有九列。希望你可以在上面看到他們是如何重疊和協同工作的。

在最後的布局中，著作權資訊跨越了6列中的2列（1/3），而菜單佔據了剩下的4列（2/3）.菜單本身——仍然多列顯示——被安排在9列網格中（每個功能表項目整齊地排列在9列中地2列裡）。

聽起來比較複雜，但CSS看起來並非如此。這裡有一種實現途徑：

代碼如下	複製代碼
.footer {     overflow: hidden; } .footer-copyright {     float: left; } .footer-menu {     float: right;     width: 66.666%;     padding-left: 0.875em;     box-sizing: border-box;     column-count: 3;     column-gap: 1.75em; }

好古老的浮動！

這些代碼不怎麼的，但它的確足夠有效。然而，在這個階段，根據一個網站範圍的編碼慣例實現網格當然也不失為一個好的主意。這裡是我撰寫的一個基本介紹：響應式布局和網格設計 ——一個“網格系統”不需要很複雜。

無論你是利用一個預先做好的網格系統定義你自己的，還是像我上面做的僅僅編寫表現布局的代碼，可維護和可擴充都是需要謹記的重要的問題。每次為各種情況編寫全部的樣式並不是一個好的主意，但使用一個獨立的網格系統將一切東西強制規劃在內也是不推薦的。

CSS給我們提供了很多。混和搭配各種編碼技術來找到最簡單的方法、抽象通用模式，都能使你的CSS整潔可複用。