CSS3 Grid Images - Fluid Scale, Responsive

The images in this demo fluidly scale down in size as the browser width decreases. They do not break out of their grid.

If your images are all different sizes, you will need to change 'background-size:cover' to 'background-size:contain' - this is what makes background images more versatile than standard <img> tags in situations that require a non-breakable grid.


* "background-size:cover;" isn't supported in IE7/8 so a fixed-size fallback is provided for those browsers.

Grid Image Calculator

This form calculates the required width CSS value of each image in a row, for this demo's fluid grid scaling.

Enter the desired number of images per row, the margin around images, then transfer the results to your CSS.

  images per row margin (%)
width: % (per image)

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.