html - 我在哪里可以找到一个响应式网格系统

Question

<分区>

Answer 1

也许您可以使用 display:flex ，为 child 设置 min-height min-width 以在内容很少的情况下保持安全的最小尺寸。:

http://codepen.io/gc-nomade/pen/wFHfq

为了看到 IE 10/11 也能正常工作，您需要向主容器添加宽度或高度。大多数情况下 width:100% 都可以，这里我在 body 上设置了 height:100%。

这不适用于旧版浏览器，您可以使用供应商前缀和旧语法来提高兼容性。这里有一些关于 read 的内容在这里 too .

body  div {
  display:flex;/* flex it */
  flex-wrap:wrap;
  min-width:320px;
  min-height:160px;
  box-shadow:inset 0 0 5px white, 2px 2px 3px;
flex:1;
}
html,body {
  height:100%;/*IE*/
  margin:0;
}
body>div {
  min-height:100%; 
}
div div {
background:pink;
}
div div:nth-child(even) {
  background:lightgray
} 

基本 HTML 测试:

<div>
  <div>
  </div>
  <div>
  </div>
  <div>
  </div>
  <!-- and so on -->
</div>