CSS Image Grid

CSS Columns: Polaroid Style CSS Image Grid

CSS Columns for CSS Image Grid

CSS columns allow us to define columns in a container using the column-count property. The column-count property sets the number of columns in a container (such as <div></div>). Another important property is the column-gap property, which sets the gap between each of the columns. Columns are excellent to organize content on your website.

Although CSS columns can be used in multiple ways, I am going to show you how to make a Polaroid Style CSS Image Grid with Captions, (Also referred to as a Masonry Image Grid). For our CSS image grid, we will be using HTML and CSS programming languages only, so it should be fairly simple for the beginner to follow along, especially if you have done any of my previous pure-CSS tutorials.

The CSS Image grid/gallery will have 3 columns and display “old-school” style Polaroid images. Here is an example of how our finished project will look:

css image grid
Polaroid CSS Image grid with Captions

Create Polaroid Style CSS Image Grid

Before we start the HTML code, we need to gather a few images for our Polaroid-style CSS image grid. I randomly found 6 pictures on Google Image Search and resized them to 200px wide, and let the height auto-adjust to keep the aspect ratio. I used Gimp but you can use any image editing software, or just use HTML/CSS to resize the images.

It is best if you can find images that are around the same width as the CSS columns you define, as this CSS masonry grid orders your images as such:

Polaroid style css image grid with captions
CSS masonry grid layout

As you will see, varying image widths can make the masonry grid look weird due to the CSS column-gap. Anyhow, I created a project folder named cssTiles, which contains index.html, style.css and a folder named images. In the images folder, I have placed the 6 images (you can use however many you want, but you might have to make some code adjustments – such as width/height of container). The images are named one.jpg, two.jpg, three.jpg, etc. Here is how the folder structure should look:

Polaroid style css image grid with captions

HTML Part – CSS Image Grid with Captions

Open up your index.html file and copy and paste the following code:


<!DOCTYPE html>
<html>
<head>
	<link href="style.css" rel="stylesheet">
	<title>TechSide CSS-Only Masonry Tiles</title>
</head>
<body bgcolor="#888">
<header><h2 align="center">CSS Columns: Poloroid Image Grid with captions (Masonry Tiles)</h2>

<div class="wrapper">
<div class="masonry">
   	<div class="tile">
   		<img src="images/one.jpg">	
		<div class="caption">Dyed Hair</div>
	</div>
   	<div class="tile">
   		<img src="images/two.jpg">
   		<div class="caption">New outfit</div>
   	</div>
  	<div class="tile">
   		<img src="images/three.jpg">
   		<div class="caption">Long hair</div>
   	</div>
   	<div class="tile">
   		<img src="images/four.jpg">
   		<div class="caption">Jessica</div>
   	</div>
   	<div class="tile">
   		<img src="images/five.jpg">
   		<div class="caption">Dark hair</div>
   	</div>
   	<div class="tile">
   		<img src="images/six.jpg">
   		<div class="caption">In the sun</div>
   	</div>
</div>
</div>
</body>
</html>

I am assuming you can understand the above HTML code, however I will go ahead an briefly explain it anyways. The <div> class masonry contains 6 tile containers. Each of the tile containers has an image and another container class called caption. Running the above index.html file will just display your images with the caption.

Feel free to update the images and the captions to meet your needs.

CSS Part – CSS Image Grid

The CSS file will take care of all the formatting, convert the images to Polaroid style images, and align the Polaroids to represent a CSS masonry grid. Open your style.css file and insert the following code:


/*Polaroid-Style CSS Image grid with captions - style.css */

h2 { /*format heading - not necessarily needed for you */
	font-family: Arial, Tahoma, verdana;
	font-weight:bold;
}

div.wrapper { /*Center wrapper - not necessarily needed for you*/
     width:660px;
     margin:auto;
}

div.masonry { /* Masonry container - Contains all tiles */

     column-count: 3; /*Set the column count*/
     -webkit-column-count: 3;
     -moz-column-count: 3;

     column-gap: 0.1; /*Set the gap between the 3 columns */
     -webkit-column-gap:0.1;
     -moz-column-gap: 0.1;

      width:660px; /*total width of 3 columns combined*/
}

div.tile { /* Masonry bricks or child elements */
    background-color: #ffffff;
    display: inline-block; /*needed to align tiles correctly*/
    width:100%;   
    margin: 10px; /*white space around image */
    border: solid 1px #ccc;
    text-align:center;
    padding:4px 0 0 0;
    box-shadow: 2px 2px 3px #444; /*create shadow effect for each tile */
}

div.caption { /*define caption area */
	background-color:#ffffff;
	width:200px; /*same width size all images */
	height:auto; /*height will be automatically adjusted to keep aspect ratio*/
	font-family: verdana, sans;
	box-sizing:border-box;
	padding:5px;
	overflow:hidden; /*hide caption if too long*/
}

That’s it for the style.css file. The h2 and wrapper containers aren’t necessarily needed for your website. Depending on where you want to put your CSS masonry grid, you can start with masonry class container. I just have the selectors for a complete tutorial, and to keep my coding a little more organized.
Remember, all my images were previously resized to 200px wide. If your images are just slightly bigger, you should be able to add overflow:hidden; for the div.tile selector in your style.css file. Otherwise, if you want to use bigger images, just increase the width of div.masonry based on the image size.

Finally, your Polaroid-style CSS Image Grid with Captions is complete. Run the index.html file in your favorite web-browser and you should get the following result:

Polaroid style CSS Image grid with captions

Summary

In conclusion, making a Polaroid-style CSS Image Grid with captions is very simple with CSS column properties. There is no need for special modules such as jQuery, or even JavaScript. Feel free to play around with the code to make it better suit your needs (color, size, tiles, etc.). A lot can be done with CSS columns. If you are interested in learning some more simple CSS projects, see:

HTML CSS 3D Cube Slider Tutorial
Flat-Style Navigation Menu using HTML and CSS only

Leave a Reply

Your email address will not be published. Required fields are marked *