How to create this responsive grid of different sized images with CSS & HTML, example below

Question

I am trying to create a Pixel Perfect Responsive page with a grid of Differently sized photos. I was wondering what the best approach is?? Do I do this with floated list? Floated elements not in a list??

I really don't know. Below Are two pictures showing the lay out at full width (1200px), and at reduced width (768px). I understand how to change the container width and remove elements with media queries, but I don't know how to get the look I am going for other wise. Do I use columns??

Full Width http://www.letsboogey.com/stackimages/1.jpg

768 Width http://www.letsboogey.com/stackimages/2.jpg

Answer 1

For 1200px device, you can create 3 columns of li or div and put the images namely A,G and H in first column; B & C in Middle column; E,F,D,I and J in third/last column. Use required css properties and fix the images as per grid layout.

For 768px device, the best idea is to position the images relatively/absolutely with CSS properties like Top, Left, Right and Bottom. Because you don't have to change the HTML layout.

I have made a DEMO for 768px layout here :

.wrapper {
  position: relative;
  width: 1200px;
  float: left;
  list-style: none;
  padding: 0;
  margin: 0;
}
.wrapper * {
  position: absolute;
  border: 2px solid #000;
}
.aaa {
  left: 0;
  top: 0;
  width: 598px;
  height: 700px;
}
.bbb {
  left: 600px;
  top: 0;
  width: 598px;
  height: 200px;
}
.ccc {
  left: 600px;
  top: 202px;
  width: 598px;
  height: 596px;
}
.ggg {
  left: 0;
  top: 702px;
  width: 298px;
  height: 96px;
}
.eee {
  left: 300px;
  top: 702px;
  width: 298px;
  height: 96px;
}
.ddd {
  left: 0px;
  top: 800px;
  width: 598px;
  height: 200px;
}
.iii {
  left: 600px;
  top: 800px;
  width: 298px;
  height: 200px;
}
.fff {
  left: 900px;
  top: 800px;
  width: 298px;
  height: 200px;
}

<ul class="wrapper">
  <li class="aaa">A</li>
  <li class="bbb">B</li>
  <li class="ccc">C</li>
  <li class="ggg">G</li>
  <li class="eee">E</li>
  <li class="ddd">D</li>
  <li class="iii">I</li>
  <li class="fff">F</li>
</ul>

Answer 2

You can use this generator : https://www.entomic.com/responsivecss, it's a good website for responsive design

Answer 3

I recommend you look into this: http://susy.oddbird.net/

It's sort of a "grid system" where you design your own grid without adding too much additional markup to styles for your grid. No need for those classes to create rows, grids, floats, etc.

I've tried it once for a small project and to be honest I like the power you get and the different development mindset when using a CSS authoring tool like Compass.