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

Continue reading