Responsive Grid

grid for Amit's magazine theme

by helgatheviking

HTML

<div id="wrap">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

CSS

.item { width: 300px; height: 100px; background: pink; margin: 0 10px 20px 10px; float: left;}
#wrap { width: 320px; margin: 0 auto; background: yellow; overflow: hidden;}

@media all and (min-width: 640px) {
  #wrap {
    background: #ccc;
    width: 640px;
  }
}
@media all and (min-width: 960px) {
  #wrap {
    background: green;
    width: 960px;
  }
}
@media all and (min-width: 1280px) {
  #wrap {
    background: blue;
    width: 1280px;
  }
}