How To Create a Responsive Image Grid (Masonry Layout) with HTML and CSS - Flexbox

Подписаться 15 тыс.

Просмотров 49 тыс.

50% 1

In this tutorial, you'll learn how to to create a responsive image grid with CSS.
Image list:
source.unsplash.com/OyCl7Y4y0Bk
source.unsplash.com/Kl1gC0ve620
source.unsplash.com/55btQzyDiO8
source.unsplash.com/g0dBbrGmMe0
source.unsplash.com/v1OW17UcR-Q
source.unsplash.com/Wpg3Qm0zaGk
source.unsplash.com/W3FC_bCPw8E
source.unsplash.com/rBRZLPVLQg0
source.unsplash.com/RRksEVVoU8o
Sponsor me on GitHub!
github.com/sponsors/miguelznunez
Follow my blog:
/ miguelznunez
Email : mignunez@csumb.edu
Medium : / miguelznunez
Codepen : codepen.io/miguelznunez
GitHub : github.com/miguelznunez

Опубликовано:

1 ноя 2022

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 29

@not_zara 9 месяцев назад

dude you have no idea how much you saved me lol. i'm a high schooler who does a web dev internship who's been procrastinating all week, and i started my work almost an hour before my meeting. I was able to use this video to help me out and now i have 20 minutes to spare.

@conquestbishop3504 8 месяцев назад

😂😂

@mohammadurgur953 Год назад

I asked my self exactly the same, so few viewers ? You deserve more. For me this was what I needed. But for total beginners they will manage to copy and make it work. I think it could be s god thing to quickly explain how you build everything in boxes inside boxes (containers) Then tell about the flex column and rows on the box above. It took me quite some time before i realised that. Just for future tutorials. But anyway, this was perfect for me. Quick and not dirty 🤪 And in a very calm way. Thank you and keep going.

@kayesong5987 Год назад

thank you so much! this is exactly what I was looking for

@iSavil 7 месяцев назад

Underrated video. Tysm

@kristynaosickova9905 Год назад

thanks man! this was super useful for me!!

@wisdomudo8269 Месяц назад

Thanks for this, fastest way to learn about flex box.

@DarthBallz 10 месяцев назад

Great job! Need to do something similar at work this sprint.

@kalinkakylab7276 Год назад

You should get a lot mor attention and viewers, this was very god. Thank you. thumbs up, comment, and subscribed.

@Mr.K123 Год назад

Just wondering why this video has so little views specially likes and comments though its content is way much perfect...

@LifeONEarth-hf7dp 4 месяца назад

your voice is too sweet. thanks bro. grate work

@cristianadrianbalasa7908 15 дней назад

i followe every step but it doesn t let me to put it on 3 colums when i set display flex for the photo-gallery div. why?:(

@evaavatar69 9 месяцев назад

thanks you so muchhhhhh, finally i did it T^T

@Andy-lr6mz 7 месяцев назад

thank you!

@veronica7322 7 месяцев назад

Brilliant, thank you, this works perfectly. I've been looking for a tutorial on madonry grids that works for AGES! Any suggestions on how I would go about having the column count go from 3 to 2 then to 1? I tried adding this in the CSS, but it didn't work: /* XX-Large devices (desktops, 1400px and below) */ @media screen and (min-width: 1400px) { .photo-gallery { flex-direction: column; column-count: 2; } } /* Medium devices (tablets, 768px and below) */ @media screen and (max-width: 768px) { .photo-gallery { flex-direction: column; } }

@nellepicard498 Месяц назад

hello, I tried to make this ( five column of nine photos) but it does not work... i am a bit stuck and if anyone as an idea of what cause this i would really appreciate some help !

@rishabhrajpal9790 3 месяца назад

THAAANK YOOUU BROTHER

@MontalvoRochaFelipe Год назад

Tanks a lot, how can I link the images to anoter url page?

@shivaskanthan6144 10 месяцев назад

Nice video, but how does this work with an array of images. Will I need to write a code to split them into three columns or is there a better way.

@codefoxx 10 месяцев назад

Is the array of images coming from a server?

@shivaskanthan6144 10 месяцев назад

Yeap. It come ms as an array of URL’s

@dropkicknicos 14 дней назад

What size are the images?

@snowandcoal 6 месяцев назад

It starts at 4:30

@GROOVETECHSETS 4 месяца назад

Where is the code? Why no repo?

@dimensionalilusions4520 Год назад

Not efficient method though

@danisom9520 Год назад

I followed this to the letter 3 times.....this code does not display as yours???????????????????????????????????????????????????????????????????????????????????? did you leave out a piece so people would pay your for the missing code if so stop making tutorials for money

@codefoxx Год назад

Sorry to hear, do you have a GitHub? I can look at your code