Responsive Image Gallery Layout using CSS Grid | HTML and CSS Tutorial

In this video we will learn how to create a responsive image gallery layout using css grid template areas. This would be perfect for a website that wants to showcase some sort of work, whether it's a portfolio or gallery.

Don't forget to leave a thumbs up if you found the video useful. Also, click on the bell icon to turn on notifications. This way you'll be notified the moment new videos are uploaded.

[ SOCIAL MEDIA ]

[PROJECT IMAGES]

[ HOSTGATOR ]

Get affordable domain and web hosting with HostGator. Save up to 60% off of your entire purchase with the coupon code below.

Coupon code ► JULIOCODES60

[ MY GEAR ]

Programming/Video editing laptop Specs & extras

Laptop: Dell XPS 15 7590
Processor: 9th Generation Intel Core i7-9750h
RAM: 32GB (Upgraded)
Graphics Card: Nvidia GeForce GTX 1650 4GB GDDR5
Storage: 500GB M. 2 PCIe NVMe SSD (Upgraded)
--- Extras ---
Monitor: Dell Ultrasharp 27"
Keyboard: Logitech MX Keys
Mouse: Logitech MX Master 3
Microphone: Blue Yeti

[ DISCLAIMER No. 1 ]

In order to speed up the development process CSS prefix are not used. In order to ensure cross browser compatibility please use prefixes where necessary.

[ DISCLAIMER No. 2 ]

This video description contain affiliate links, which means that if you click on one of the product links, I’ll receive a small commission. This helps support the channel and allows me to continue to make videos like this. Thank you for the support!

[TuTran-se]

Great video. A quick trick: set the <a> tag with 'min-height: 25 rem'. Instead of calculating the height manually. It totally works as expected. You can try it.

[icemann]

THANK YOU! I've been stumbling through tutorials trying to figure this out and your video helped me finally piece it all together. Now the trick is to see if I can do it on my own! Thanks again!!

[scorpion]

UPDATE:
For anyone following along now, ion icons have changed the names of icons
it's now <ion-icon Not what the video says to get the expand icon
When it comes to targeting the icon dont do: .image-gallary a ion-icon{font-size: 3rem;} . if you do that your icons go off the page
Instead do this when targeting : .image-gallary a i{ font-size: 3rem;}

[EdwinMactalMusic]

Ive been searching this for months, i couldnt find a video on it so for the meantime i watched your other videos,

now you randomly upload this video, yay! i can piece what i've learned altogether :")

[rafaelbrasil]

Dude you tutorial is freaking awesome thank you, super helpful.

[karinaarias]

thanks for the video! you saved my life

[crystaldesarrollo]

Hi, excelent video! I only have one question. How do I make the image goes small again once I have clicked over it and have it full screen?

[ruthrojasp]

Muy bueno el tutorial. Muchas Gracias.

[kayleighflaherty]

This is the exact vid I wanted to search and it magically popped up on my phone at the perfect time gooood shit Thank u for what u do

[malumbopolela]

This was really interesting to practice with Julio Codes. I just had one challenge after completing the course. in the folder I used for the Images I linked to the site, I couldn't replace the images. even after deleting the images in the folder. The images that where linked before still appeared in the changed folder. My question is, do the images we link in the site store in any placeholder?

[freestyle]

Great content, i really enjoy your videos

[DJalem]

This is by far the best Image gallery tutorial done with css grid. Imagine doing this with flexbox or older technique omg this would be pain in ass :). I learned so much from this tutorial, thank you julio.

[nigelpallatt]

Wow, thank you so much, love it! Well done and a great tut!!

[udaykulkarni]

You my friend have some extraordinary skills.. Please never stop making such videos.. We learned so much from your videos.. Great content :) love from India

[ziinx]

Huh, the installation seems to have changed now

[joze.rios]

Excellent sir...let me tell you than i'm Argentinian, i writte English a little...sorry for the too...let me tell than i'm a begginer web developer...thanks for this video...i hope will work of my designs...

[davidalejandro]

Amigo; toma tu merecido like 👏🏼👏🏼👏🏼me has ayudado un monton

[bernoGarcia]

Hello Julio. Thank you for the video. But I can't display the icons. Seems like it works different know. No link for the head, but script. Even though I follow the instructions on the official page it seems like I am still doing something wrong. The icons dont display

[afrahhassan]

amazing tutorial. thanks for sharing your work

[vibewithalexa]

How to do this dynamically ? Like in the case of instagram explore section?