是否有支持全宽的CSS Grid系统？

Question

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

我想要一个响应式布局，即使用户使用FULL HD分辨率（1920像素×1080像素）也能正常显示。

如果有更好/更简单的方法，请让我知道。

- Jannis M

---

这篇文章可能会有所帮助（类似的问题）http://stackoverflow.com/questions/159025/jquery-grid-recommendations - Muhammad Sannan Khalid

可能也不是......我正在寻找一个基于CSS的解决方案。无论如何，谢谢！ - Jannis M

Answer 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宽度的百分比，媒体查询和JS回退（因为媒体查询并不完全支持）。

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

为了帮助您的决策，您应该考虑：

• 您需要的浏览器支持以及网格系统提供的支持。
• 大小（对于大多数人来说它们都很轻量级，但有些不仅仅是网格 系统，例如Twitter bootstrap）。
• 命名约定，您将使用奇怪的CSS类（例如span4），选择您喜欢的那个，它们中的一些比其他人更语义化，由您决定。
• 最后，开源因素：社区、支持、更新频率...

此外，这个网站是响应式灵感的必备资源：http://mediaqueri.es/

- Adrien Schuler

---

我个人非常喜欢Twitter Bootstrap，它处理了许多UI事物，非常干净、文档详细、轻量化，并且不断改进... 在其他项目中，当我不需要太多UI时，我也使用Skeleton。 我认为你可以选择其中任何一个，都不会错，它们都完成相同的任务，只需注意上述四点即可。 - Adrien Schuler

Answer 2

我一直在研究一个叫做Fluidable的流体网格系统。您可以将max-width设置为任何值。对于您的情况，您可以将其简单地设置为100％，网格将使用所有空间。您还可以配置任意数量的列来使用。 https://github.com/andri/Fluidable

- Andri

---

看起来不错！之前没有用过less，但似乎很容易实现。 - Jannis M

Answer 3

你可以尝试使用我编写的简单网格系统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>

更多例子和演示此处

- Lore

Answer 4

对于小型项目，我建议使用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>

- p2or