应用错误收集

请参阅fluid grids和example上的这篇文章。另请参阅this example。

我使用Unsemantic来自Nathan Smith，他开发了960.gs.

或者你可以customize Twitter Bootstrap，这样你只需要使用响应式网格，而忽略了项目可能不需要的所有其他功能。

Cascade Framework的网格系统可以完全按照你想要的那样做......还有很多，甚至更多。

如果您使用标记<div class='site-center'></div>，则会获得一个居中的div，其桌面宽度固定（宽度因浏览器宽度而异）和移动设备的完整可用宽度。但是，您可以删除该标记并使用桌面上的完整可用宽度。请参阅this website作为其实施的示例。

网格元素本身是基于百分比的。这意味着它们填满了可用宽度的一定百分比。开箱即用，Cascade Framework的网格系统支持60％/ 40％，25％/ 75％，33.33％/ 66.66％，20％/ 20％/ 20％/ 20％/ 20％，43.75％/ 31.25％/ 25 ％，30％/ 30％/ 40％和更多组合。事实上，您甚至可以使用42.8571429％/ {fill to 100％}，{fit content} / {fill to 100％}或{fit content} / 30％/ {fill to 100％}等组合。

为了能够使用Cascade Framework的网格系统，我建议您使用文件'build-full.min.css'（大约8kb缩小+ gzip）或文件'build-full-no-icons.min。 'asset / css / cascade / production文件夹中的css'（约10.8kb缩小+ gzip），具体取决于您是否要包含对its icon set的支持。您还可以创建自己的构建，只选择所需的模块。为了简洁起见，我正在跳过有关如何做到这一点的细节。如果有任何关于创建自己的构建的内容并不清楚，并且您想了解更多相关内容，请发送给我一个PM，以避免因偏离主题而离开此主题。

Cascade框架中的网格元素是

以下HTML元素之一：section，main，article，header，footer，aside或nav（这些元素与旧IE的HTMLshiv一起填充，以备不时之需）。
带有'col'类的div元素（可以在没有polyfill的旧IE中使用）。

要为网格元素添加宽度，请添加格式为“width-XofY”的类，其中Y可以是2,3,4,5,6,7,8,9,10,12,16或24和X可以是低于X的任何值。

更具体地说，以下是一些可以在Cascade Framework中使用的有效类的示例：'width-1of2'（宽度：50％），'width-3of4'（宽度：25％），'width-2of5'（宽度：40％），'width-2of5'（宽度：40％），'width-2of7'（宽度：28.5714286％）和'width-13of16'（宽度：81.25％）

除了这些类之外，您还可以使用分别适合内容的类'width-fit'和'width-fill'，并填充100％宽度的剩余部分。或者，您可以只定义自己的类和ID，并为这些类添加自定义宽度，以“语义”方式执行操作。

如果您的构建包含响应性模块（建议构建的情况），则所有网格元素的宽度在移动设备上自动重置为100％。您可以使用“mobile-width-3of16”，“phone-width-3of7”或“tablet-width-2of4”等类来自定义不同宽度范围的布局以及“桌面隐藏”类，“移动隐藏”类，'phone-hidden'或'tablet-hidden'隐藏具有范围的特定屏幕的内容。

另请参阅http://www.cascade-framework.com/grid.html和http://jslegers.github.io/responsiveness/。

试试Dead Simple Grid。您可以将列设置为具有固定宽度或百分比宽度。设置为百分比将动态填充可用空间。它非常简单（整个css代码是250个字节！）但是非常强大。

css网格系统，其中列宽是动态确定的？

5 个答案: