960流体网格中的设计缺陷还是我误用了它？

Question

我使用的是Stephen Bau's 960 fluid grid，我认为它不适用于嵌套网格，因为每个网格都是其父网格的一个%，除非我错过了使用它？

在样式表中

.grid_12 { width:98%, }

因此，如果视口是1200px，那么就是1176px，那么嵌套栅格就是1152.48px的98% -如果它是常规的960固定栅格，那么两者的宽度将相同

<div id="wrap" class="container_12">
   <header class="grid_12">
      <div id="logo" class="grid_6 alpha">
           .. logo img ...
      </div>
      <div id="uti" class="grid_5 prefix_1 omega">
        .. util menu ...
      </div>
    <nav class="grid_12">
       .. nav list ..
    </nav> 
   </header>
   <div id="content class="grid_12">

       <div id="main-content" class="grid_12 clearfix">

             <div id="col-1" class="grid-9 alpha">

              </div>
              <div id="col-2" class="grid-3 omega">

              </div>

       </div>

    </div>

    <footer class="grid_12 clearfix">

     </footer>

</div>

Answer 1

这只是这个(和大多数其他)流体网格工作方式的一个限制-因为它们必须保持，嗯，流体。

因此，实际上可以选择要么将嵌套的网格放在它们自己的容器中，要么创建一个可以重用的CSS类，将宽度重置为100% (例如，将其命名为.grid_full，可以与.alpha和.omega结合使用，也可以不结合使用，以使元素填充其父元素)。

实际上，在CSS布局和模板标准发展并获得吸引力之前，这些网格只是权宜之计。

Answer 2

我最近遇到了一个类似的问题，我只是在这里提出了我的解决方案，这样任何遇到类似问题的人都可以找到答案。通过遵循一条简单的规则来嵌套网格是非常简单的：一行的所有嵌套网格的总和应为12 (或16或24，取决于您的网格系统)。

假设你想要一个有7列的外部网格，然后在里面嵌套你想嵌套的网格，只要它们加起来是12，例如："grid_1"，"grid_5“和"grid_6”就可以了！

正如您可能怀疑的那样，这与pull_i和push_i类无关，它们只是用于重新排序一行的“砖块”或更改它们的源代码顺序。容器网格可以是任何grid_i类，在我们的示例中是一个grid_7！如果你需要一个没有损失的容器，那么创建一个：

.container_12 .full {
width:100%;
}

实际宽度(以像素为单位)：父网格的每个子网格的宽度为%*(以px表示的父宽度)/ 100 px。因此，在我们的示例中，"grid_1“= 6.25 *( px中实际的"grid_7”)/100px。

当然，所有这些都是有代价的:通过对我们的html标签进行分组，我们刚刚从语义跳到了布局定义，当-in理论的时候--我们不想这样！理想的做法是添加一个可以实现魔术的类，比如"group_1“、"group_2”，但是我们遇到了麻烦:渲染遵循源代码顺序！

请参阅我的答案here。