Responsive Masonry Grid using CSS columns Property
Learn to make a responsive gallery using CSS Grid and without media queries
Creating a responsive image gallery is easier than ever before. You can have a flex or even better a grid to create a responsive gallery with less code and in no time.
Let’s go with the grid option in this post.
Step 1: HTML
I am going to keep the html content same as this Masonry Grid post.
Step 2: CSS grid
Let’s create a grid with some grid properties.
Step 3: Image style
Let’s add style for images to look a bit better.
Step 4: nth-child
Let’s make use of CSS nth-child pseudo selector to make our gallery a bit fancy.
Step 5: The missing images
You see there are bunch of holes in the gallery grid and looks like missing items. They are not missing. Because of nth-child rule, they are just pushing themselves to the next available spot. Let’s fill those holes with the images after those. We can use grid-auto-flow property to do.