How to Create an Image Grid Gallery - HTML, CSS Web Design Tutorial

View the Code & CodePen:

In this video we'll be using CSS3 Grid to build an Image/Photo Grid Gallery, which you can easily add to your existing websites or apps. This is a responsive, mobile friendly solution that doesn't require too many lines of CSS.

If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

#dcode #html #css

[dcode-software]

*AN INTRODUCTION TO CSS GRID:*

🏷 *THE ULTIMATE JAVASCRIPT DOM CRASH COURSE* 👇

[upcomng]

dcode is probably one of the most under rate channel ever. He explained it thoroughly. Nothing like do this and do that without explaining. Explanation is short and spot on.

[lucifer-ybtn]

you know he is a god of frontend when you realise that his name is Dom (document object model) 😂❤️

[Mobynet]

Hello,
The best grid video I've seen here. The setup is great. Many thanks, best regards

[july]

This video just got me out of my rut I've been for two weeks. Sub!

[benabrahambiju]

The cleanest video on grid I've ever seen, thanks :)

[maicon]

a very easy explanation to understand and with that I gained the knowledge I was looking for, thank you

[paulleitner]

I really liked your tutorial, thanks for sharing your knowledge. But how can I use a big image on the right hand side?

[sherrekaburton]

Why is it that when I try to make the images hyperlinked it no longer recognizes the grid?

[SkepticleOrc]

I followed this tutorial, it's great by the way, but I have one slight issue. When I try to add a href to one of the src images. It destroys the layout.

[YaNykyta]

Very nice Sir. Very nice! But, if you put images into <a href...> tag, nothing works. Why?

[andrewnicholls]

So I am having a hard time modifying this for my own needs - I am using image buttons but the .image-grid>img part of my CSS isn't connecting. I have tried changing img with image, button, input... any suggestions?

[maitrishah]

thanks for sharing your great knowledge with us! and again thanks for sharing the code on codepen :)

[omokaroelliot]

please how do i add h1 text to the images

[fabiogallo]

dude you saved my life, thanks a lot!

[luisselber]

How can I wrap the images in a <a> tag without affecting the image grid shape?
Awesome tutorial btw!

[supermegaultradelicious]

how to do prevent the background images from changing their size. i want them to resize but not moving around liek that

[garymaclaren]

copies the code exactly the same, and turns out nothing like yours. i give up

[codedynamics]

short helpful videos, i like .. i've sub'd 👊 and sound is awesome

[a]

Can show use how make 3 image lay out like new paper 1 big image on left and other 2 on the right side scale on hover