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:
Polaroid CSS Image grid with Captions