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

  Рет қаралды 70,336

Web Dev Tutorials

Web Dev Tutorials

Күн бұрын

Пікірлер: 41
@not_zara
@not_zara Жыл бұрын
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
@conquestbishop3504 Жыл бұрын
😂😂
@mohammadurgur953
@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.
@Mr.K123
@Mr.K123 Жыл бұрын
Just wondering why this video has so little views specially likes and comments though its content is way much perfect...
@wisdomudo8269
@wisdomudo8269 8 ай бұрын
Thanks for this, fastest way to learn about flex box.
@TanvirAhmed-ur3kr
@TanvirAhmed-ur3kr 4 ай бұрын
Thank you for the video. But in practical, we usually don't want images to flow from top to bottom. Rather, images or grids should flow from left to right. So, even if we need JavaScript to do that, we should go with that. No client will tell me that I should use only CSS to do his website. However, while leaning CSS, these techniques will definitely help.
@kalinkakylab7276
@kalinkakylab7276 Жыл бұрын
You should get a lot mor attention and viewers, this was very god. Thank you. thumbs up, comment, and subscribed.
@LifeONEarth-hf7dp
@LifeONEarth-hf7dp 11 ай бұрын
your voice is too sweet. thanks bro. grate work
@iSavil
@iSavil Жыл бұрын
Underrated video. Tysm
@cesarghful
@cesarghful 6 ай бұрын
Nice and organized. Thanks buddy
@snowandcoal
@snowandcoal Жыл бұрын
It starts at 4:30
@kayesong5987
@kayesong5987 Жыл бұрын
thank you so much! this is exactly what I was looking for
@kristynaosickova9905
@kristynaosickova9905 Жыл бұрын
thanks man! this was super useful for me!!
@RCV_RCV
@RCV_RCV 2 ай бұрын
Most gallery videos, which do not use a library, have columns with images occupying the same width. I need a model similar to the home page of the wallpaperflare website, with images occupying the entire width of each line, but each image occupying proportionally in relation to the other images of the same line width. As I use placeholders, they all have the same height, only the width changes. I don't know how to resolve this.
@gurbaj_khaira
@gurbaj_khaira 4 күн бұрын
What if i want 2 columns in a screen size that fall between the two
@evaavatar69
@evaavatar69 Жыл бұрын
thanks you so muchhhhhh, finally i did it T^T
@TaraBetaDev
@TaraBetaDev Ай бұрын
Hello, first tuto i watch on your channel. Great explanations, thank you, i was looking to make one gallery like this for a small project. But i think i made a mistake somewhere and not able to see with the video, i went on your github in order to check what i made and i am not able to see the good repo, what is its name please ? :-) thank you
@ЮлияРоманенко-к4ц
@ЮлияРоманенко-к4ц Ай бұрын
Дякую🙏 , корисно 🤗👍
@shivaskanthan6144
@shivaskanthan6144 Жыл бұрын
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
@codefoxx Жыл бұрын
Is the array of images coming from a server?
@shivaskanthan6144
@shivaskanthan6144 Жыл бұрын
Yeap. It come ms as an array of URL’s
@rishabhrajpal9790
@rishabhrajpal9790 10 ай бұрын
THAAANK YOOUU BROTHER
@veronica7322
@veronica7322 Жыл бұрын
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; } }
@charlo-d2
@charlo-d2 7 ай бұрын
What size are the images?
@Nsbsha
@Nsbsha 7 ай бұрын
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?:(
@ina7717
@ina7717 5 ай бұрын
thank you so much!
@benmyers4124
@benmyers4124 4 ай бұрын
this but automate the creation of a perfect masonry layout with just the pictures XD :)
@queencass_talks
@queencass_talks 5 ай бұрын
How would you add this to a premade html/website with no css. Like the page has its own html.
@aleos3404
@aleos3404 3 ай бұрын
Just add a new section to the html and then link a stylesheet in the head of the page, then go to the css and add the following items
@GROOVETECHSETS
@GROOVETECHSETS 11 ай бұрын
Where is the code? Why no repo?
@MontalvoRochaFelipe
@MontalvoRochaFelipe Жыл бұрын
Tanks a lot, how can I link the images to anoter url page?
@nellepicard498
@nellepicard498 8 ай бұрын
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 !
@Andy-lr6mz
@Andy-lr6mz Жыл бұрын
thank you!
@seiftabaja2161
@seiftabaja2161 5 ай бұрын
this will not work if all the images having the same size
@danisom9520
@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
@codefoxx Жыл бұрын
Sorry to hear, do you have a GitHub? I can look at your code
@AM-cs8yi
@AM-cs8yi Жыл бұрын
Common Dan, the amount of free help this guy provides on his channel I seriously doubt he would do that
@AllNaturale11
@AllNaturale11 Жыл бұрын
lol same here. i thought I was doing something incorrectly. But i'll try again anyway
@HamzaAli-rn1cc
@HamzaAli-rn1cc 6 ай бұрын
@@codefoxx Bro u only give flex and flex direction column in this video nothing about grid and your code respond like grid my main question is think u forget to add grid in ths video LOL
@dimensionalilusions4520
@dimensionalilusions4520 Жыл бұрын
Not efficient method though
What would you call this layout?
23:11
Kevin Powell
Рет қаралды 36 М.
Tuna 🍣 ​⁠@patrickzeinali ​⁠@ChefRush
00:48
albert_cancook
Рет қаралды 148 МЛН
Леон киллер и Оля Полякова 😹
00:42
Канал Смеха
Рет қаралды 4,7 МЛН
How Strong Is Tape?
00:24
Stokes Twins
Рет қаралды 96 МЛН
When you have a very capricious child 😂😘👍
00:16
Like Asiya
Рет қаралды 18 МЛН
How to create RESPONSIVE Layouts with CSS GRID
11:04
Coding2GO
Рет қаралды 79 М.
Masonry layout with CSS only!
16:56
Kevin Powell
Рет қаралды 69 М.
How To Load Images Like A Pro
15:48
Web Dev Simplified
Рет қаралды 390 М.
I Will Never Write CSS Animations Again Without Using This Tool
12:28
Web Dev Simplified
Рет қаралды 150 М.
5 CSS Tips & Tricks for better Responsive Web Design
9:39
Coding2GO
Рет қаралды 27 М.
Learn Flexbox CSS in 8 minutes
8:16
Slaying The Dragon
Рет қаралды 1,7 МЛН
These CSS PRO Tips & Tricks Will Blow Your Mind!
8:48
Coding2GO
Рет қаралды 525 М.
Tuna 🍣 ​⁠@patrickzeinali ​⁠@ChefRush
00:48
albert_cancook
Рет қаралды 148 МЛН