How web sites like Instagram arrange list of pictures like a grid layout

HTML & CSS
1

Hi guys,

I would like your suggestion on how would I list images like a grid layout on Instagram? The are also responsive to device screens. Do you have example CSS code or any tutorial.

Thanks in advance,

2

Hi,

The best answer is called : CSS Grid layout.

If you are not afraid against using libraries they are many useful ones.
These provide complete solution to solve your issue.
Pills is pretty cool for that. But they are many an many more libraries.

If you want to develop it by your self, you can also take care about css flexbox to do that stuff…

Further reading :

3

It’s a bit early to be using grid just yet, there is not enough browser support for it.
But flex box is well supported now and a very good solution for this.
Or there are simpler, older methods, like inline-blocks, floats or dispaly table.

Have you looked at Instagram’s code to see how they do it?

4

Hi,

Thanks for suggestions and sorry for late reply. I’m a bit busy. Much appreciated.

Have you looked at Instagram’s code to see how they do it?

Just now, they don’t have link to a css file.

I’ll be looking at flex box.

5

It can be a bit confusing at first, but worth the effort now that it’s well supported.
I have a couple of examples here for image galleries.

Edit
<aside class="off-topic">
Does anyone who uses lorempixel.com notice they have changed their domain to non-www. ?
I could not work out why the images would not show in these pens, until I visited the site and saw the sample URLs. Seems they did not make a redirect, so I had to edit out the www.s from all the images in these pens.
</aside>

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.