制作响应式网格

Question

好的，我正在尝试制作一个响应式网格，但它有点复杂。它必须能够：

• 调整大小，做出回应
• 网格应该包含尽可能多的元素，和
• 连续必须至少有两个元素
• 最小页面尺寸为320px
• 元素应保持宽高比

以下是首发：http://codepen.io/loredonut/pen/KJDAE

仅限CSS的解决方案会很棒。谢谢你的帮助！

Answer 1

你可以使用很多网格。

因为看起来你也想要移动屏幕，所以看看

960 Grid
1140 Grid

大多数网格都会为您提供x个响应列，在较小的屏幕尺寸上会折叠为 100％宽度。

现在，如果你真的想要看看CSS-column-count和CSS-colum-gap - 请点击此处CSS tricks，（caniuse）。虽然IE6-9需要一些后备，但这应该允许您创建具有不同行高的列 - 如此fiddle。

Answer 2

有许多网格框架可以满足您的目的：

• Foundation
• Semantic Grid
• Golden Grid System

还有：

• CSS Grid（不流畅）
• 320 and Up（不流畅）
• Columnal（不流畅）
• Skeleton（不流畅）
• SimpleGrid（不流畅）
• Less Framework（不流畅）
• Bootstrap（非语义类）
• Breakpoints.js（仅限断点，与媒体查询太相似）
• Adaptive images＆GT; （仅限图片）
• FitText（仅限文字）
• HTML5 Boilerplate（旧）

See this related question.

我个人最喜欢的是顺便提一下基金会。它非常活跃，基于Compass / Sass。

Answer 3

尝试使用twitter bootstrap .. http://twitter.github.io/bootstrap/

你也可以将它与同位素http://isotope.metafizzy.co/结合起来并获得MAGIC效果：）

这也可以节省将同位素与bootstrap整合的时间：http://mpezzi.github.io/bootstrap_isotope/

Answer 4

我现在使用<img> s并让它们响应，这是一个演示：http://codepen.io/loredonut/pen/FGneA