是否有任何全宽度支持 CSS 网格系统？ [关闭]答案

【问题标题】：Is there any full width supporting CSS Grid System? [closed]是否有任何全宽度支持 CSS 网格系统？ [关闭]
【发布时间】：2012-04-14 00:16:20
【问题描述】：

是否有任何支持全视口宽度的 CSS 网格系统？大多数网格系统似乎只打算宽度为 960 像素到 1140 像素。这是普通用户最常用的宽度（因为大多数人使用的是 1280px × 1024px）。

我的目的是为使用全高清分辨率（1920px × 1080px）的用户提供响应式布局。

如果有更好/更简单的方法，请告诉我

【问题讨论】：

这篇文章可能会有所帮助（类似问题）stackoverflow.com/questions/159025/jquery-grid-recommendations
或者可能不会...我一直在寻找基于 CSS 的解决方案。无论如何，谢谢！

标签： css responsive-design 960.gs grid-system

【解决方案1】：

Twitter bootstrap 流体网格系统使用百分比：http://twitter.github.com/bootstrap/scaffolding.html#fluidGridSystem

还有很多纯css响应式网格系统，例如：Skeleton

这篇文章涵盖了很多：http://speckyboy.com/2011/11/17/15-responsive-css-frameworks-worth-considering/

您可以自己执行此操作，使用 css 宽度百分比、media queries 和 js 后备（因为不完全支持媒体查询）。

但是这些网格系统会为您节省时间和麻烦，因为它们是经过最充分测试的。

为了帮助您做出决定，您应该考虑：

您需要的浏览器支持以及网格系统提供的支持。
尺寸（它们对大多数人来说是轻量级的，但有些不仅仅是网格系统，即 Twitter 引导程序）。
命名约定，你会的使用奇怪的 css 类（例如 span4），选择你喜欢的那个，其中一些比其他更语义化，这取决于你。
在至少，开源因素：社区、支持、更新频率...

此外，这个网站最适合响应式灵感：http://mediaqueri.es/

【讨论】：

我个人很喜欢 twitter bootstrap，它可以处理很多 UI 方面的事情，非常干净，有很好的文档记录，轻量级并且不断变得更好......我也将 Skeleton 用于其他项目当我不需要太多 UI 的东西时。我认为您可以选择其中任何一个并且不会错，他们都做同样的事情，只要注意以上四点即可。

【解决方案2】：

我一直在研究一个名为 Fluidable 的流体网格系统。您可以将最大宽度设置为您喜欢的任何内容。在您的情况下，您可以简单地将其设置为 100%，网格将用完所有空间。您还可以配置任意数量的列。

https://github.com/andri/Fluidable

【讨论】：

看起来不错！以前没有用 less，但似乎很容易实现

【解决方案3】：

对于小型项目，我会推荐Amazium。它提供 12 列、嵌套、偏移和基本媒体查询。为了获得全屏网格，您的标记应如下所示：

<div class="row-max">
    <div class="grid_12">
        ...
        <div class="row-max">
            <div class="grid_6">...</div>
            <div class="grid_6">...</div>
        </div>
    </div>
</div>

【讨论】：

【解决方案4】：

你可以试试ARC grid，我写的一个简单的网格系统，默认支持全宽。

使用语法：

<div class="grid">
    <div class="row">
        <div class="col s6 m4"></div>
        <div class="col s6 m4"></div>
        <div class="col m4"></div>
    </div>
</div>

更多示例和演示here

【讨论】：