I am trying to build a page with a grid of images (all 300px by 300px). When resizing: the image size does not change, but the extra image on each row gets dropped down to the row below.
What I have now on JSFiddle: http://ift.tt/1Tidan1
It is working mostly fine, but I would really like to make the grid centered at all times, instead of left aligned. Like the pin grid on Pinterest.com
Thanks in advance for your help!
<body>
<div class="grid">
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
<div class="grid_item"><img src="http://ift.tt/1WEpbpH"></div>
</div>
</body>
Aucun commentaire:
Enregistrer un commentaire