是否有一個CSS網格框架可容納嵌套的可視框？

Question

我一直在使用項目上的BluePrint.css框架。它運作良好。

但是，就像我看到的大多數CSS框架一樣，它似乎更多地適用於文本沉重的報紙式樣佈局。當使用它構建使用SharePoint或iGoogle等「小部件」隱喻的Web應用程序時，它會變得更加難以使用。關鍵問題是在Web應用程序中，創建信息的可視容器通常是標準的。這引入了一個需要填充的盒子，最終打破了網格。

另一種解釋方法是，如果您的容器盒跨越8個網格列，則您將無法在其中放置8個網格列，因爲容器盒具有填充。

我已經找到了解決方法，但它們都需要添加另一層會變得有點麻煩的CSS。在繼續下一個項目之前，我想我會看看是否有其他人遇到過這個問題，並且a）發現了一個滿足這個視覺要求的網格系統，或者b）找到了一些巧妙的方法來適應這個問題現有的CSS框架。

Answer 1

@roberkules問我是否想出了一個解決方案，我們做了。有點。至少，它在當時是有用的。我一直想寫一篇博客文章很長一段時間，但從來沒有涉及到它，所以我會嘗試在這裏總結答案。

總的來說，我們做了兩件事。 1，我們添加了通過在不打斷網格的情況下給出'.span-x'邊框來創建'盒子'的功能。在圖2中，我們將標準的24列結構細分爲更細的細節，將「半」和「四分之一」測量的概念添加到網格系統。

要創建接壤容器盒，我們增加了一類名爲span-border（我們一直與藍圖跨度-X的語法儘可能我們可以用我們自己添加）：

注意：所有的例子都是基於我們網格寬25px，寬度爲15px（每個跨度爲40px）。

div.span-border { 
margin-left: -1px; 
margin-right: 14px; 
border-width: 1px; 
border-style: solid; 
} 

所以，無論何時我們想創建一個帶邊框的容器，我們都可以添加該類。例如：

<div class="span-8 span-border">our box</div> 

這給了我們一個8列的有邊框。目標是讓開發人員在那裏創建仍然使用藍圖網格CSS的元素，這樣我們就不會爲頁面上的每個小框創建新的CSS。

比方說，我們想要在該框內的兩列。一個比另一個窄。我們可以放入一個跨度爲3和跨度爲5的，他們會適合，但他們會碰到盒子邊緣，那會很醜。

所以，我們所做的是增加了一些-half和-quarter風格舒展使用網格的分數事情。

實施例的CSS：

.pad-1 { 
padding: 20px; 
} 

此添加填充到div的20像素周圍的一切，其中，水平= '1' 格柵40像素的單元。因此，讓我們重新寫我們的信箱HTML這樣：

<div class="span-7 pad-1 span-border">our box</div> 

我們的盒子仍然佔據了8藍圖網格單元爲7 + 1 = 8，所不同的是8個單位的內容空間，而不是，我們現在有7作爲一個完整的單位，即用於填充。

我們現在可以中添加我們的欄目：

<div class="span-7 pad-1 span-border"> 
    <div class="span-3">left column</div> 
    <div class="span-4 last">right column</div> 
</div> 

瞧！現在我們啓用Blueprint來處理嵌套元素的概念。

有了這個系統，你可以無限地嵌套，如果需要的話。

隨着時間的推移，我們只是調整了一些東西來適應新的情況。例如，我們最終需要將具有奇數個網格列的元素分成兩個相等的列。爲此，我們添加的stretch-x概念：

.span-1.stretch-half {width:45px;} 

.span-1通常是25像素寬（40像素 - 15px的右邊緣）。現在我們已經將它拉伸了整個網格單位的1/2（20px）。

我們會做到這一點對所有的現有跨度-X設置：

.span-2.stretch-half {width:85px;} 
.span-3.stretch-half {width:125px;} 
.span-4.stretch-half {width:165px;} 
... 
.span-23.stretch-half {width:925px;} 

現在回到我們最初的例子中，我們可以創建兩個相等的嵌套列，例如：

<div class="span-7 pad-1 span-border"> 
    <div class="span-3 stretch-half">left column</div> 
    <div class="span-3 stretch-half last">right column</div> 
</div> 

3 + 3 + half + half = 7.

所以，這就是我們想到的。它隨着時間的推移對我們運作良好。初步弄清楚和調整你的需求是一件很痛苦的事情，但是一旦建立起來，它使得快速原型設計變得非常簡單，並且可以避免大量的CSS膨脹，如果你能讓所有人都能夠使用網格概念。

我應該補充一點，如果網站是由大量人員構建和維護的，我肯定會推薦這種方法。如果網站是由一個人構建的，並且隨着時間的推移，源HTML不一定需要大量更新，那麼這可能有點矯枉過正，因此根據需要編寫自己的自定義CSS可能更容易特定的網站。

哦！還有一件事：免責聲明：以上都不適用於IE6，因爲IE6無法處理一次引用兩個類的CSS。當時，我們不得不支持IE6。我們所做的只是爲IE6創建了一個jQuery腳本，它將尋找例如class="span-8 stretch-half"的div，並動態地將其替換爲僅用於span-8-stretch-half的IE6的醜陋類。

IE6然後得到了一個不同的樣式表，稍微更像這樣的單個類的臃腫。這是醜陋的，但工作，我們真的只支持IE6支持抗議;）

Answer 2

你打算如何處理這個問題的方法是使用具有網格分配的容器/包裝器，然後在該容器中添加具有仲裁填充/邊距的div。

<style type="text/css">.widgetType {padding: 10px;}</style> 
<div class="span-8 column clearfix"> 
    <div id="myWidget" class="widgetType widgetType-skin-myskin"> 
    <!-- content --> 
    </div> 
</div> 

實際上在藍圖，甚至有做僅此緊閉gwith電網類是.box的，如果我還記得它增加了1.5em填充的基類。當然，這種填充可能會深入你的喜好，所以你不能使用這個類，並使用任意的東西，如果你喜歡