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??
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>