HomeОбразованиеRelated VideosMore From: Ray Villalobos

Creating a grid of images with CSS

241 ratings | 32733 views
There's a lot of ways of creating a grid of images for an HTML page with CSS. In this beginner tutorial, I show you how to do it without lists, using just a div, anchor tags and images.
Html code for embedding videos on your blog
Text Comments (31)
SoloArt Studio (9 months ago)
Absolutely beautiful, just totally awesome work. Thanks.
aldo reva (1 year ago)
Dude, i have a question, how do you make all the images the same size?i've tried to define the width and height of the images but the images still have different sizes. pls help
Jordy van der Lans (11 months ago)
or simply use paint.Or use google 'exact search'.
Vapor Wave (1 year ago)
photoshop
Richard Kirigaya (1 year ago)
how do you do this with php
Jaime Wright (1 year ago)
Great tutorial! thanks so much! I have a question and - sorry if I missed this detail, but this grid of thumbnail images, once clicked on, do they take the user to another page, or can you click on a thumbnail and have the image open on same page? The code I used from your tutorial has the thumbnail images opening on another page..... thanks for your help!
Moth (1 year ago)
Watched one video and im subscribed. Your videos are to the point and your voice is professional. Love it!
Nenad Scepanovic (1 year ago)
well done thank you
Marc FAUVE (2 years ago)
just a fantastic tutoriel !! if you don t mind i ll translate it in french !!
Sarah Kavanagh (2 years ago)
EXACTLY what I have been looking for. Thank you so much!!!!!
It's Zesty (2 years ago)
+Sarah Kavanagh i know right?! THAANK YOU JEEZUS
debwarr (2 years ago)
Thank you so much! One question: I have a grid of nine images, but I want to hover image to look like it's inset, like an inset shadow, without making it flip to another secondary image for each. is that possible?
Stephan Schäfer (1 year ago)
debwarr box-shadow: inset 1px 3px 20px rgba (0,0,0,.25);
Regimantas J. (2 years ago)
Thank you.
radiohaktive (2 years ago)
thank you thank you thank you
Tuckertcs (3 years ago)
what if the images are different sizes? I don't want them stretched out but the centers of each should be equal distance from each other. Like so: XXX XX X XX XXX X X XXX XX
shredaholic93 (3 years ago)
I've been trying to get similar results but I can't get any gaps between the images. Help please? EDIT: got it, damn links!
AutoPilot69 (4 years ago)
Great tutorial, simple and clear.
Dan Dos Santos (4 years ago)
This was fantastic. Thank you. Simple, and VERY well explained.
James Moore (4 years ago)
This was great !.. made something that some people make complicated simple !  thanks !! 
Donat Kapesa (4 years ago)
Does anyone know if he is using text-edit or what? When I have an html file, I can't open it with text-edit to edit the tags. Can anyone help me with a program like notepad?
Donat Kapesa (4 years ago)
Never mind I found the app :)
LastPixel (4 years ago)
I don't know why my first image appaars on the first line, but my other images appear on a break line....
Anush Gopalakrishnan (4 years ago)
me too! have you found a solution?
Stephanie Reese (5 years ago)
Great tutorial! I learned a lot!
Crearesiteweb Ionut (5 years ago)
Hello, Nice tutt. Can you putt the code? Link with code for download ? If think will be easy for someone to download.
Ray Villalobos (5 years ago)
I don't think that would work exactly for this tutorial. since Im' floating. This is meant more of a tutorial on getting to know what happens when you use widths with padding and margins.
Ray Villalobos (5 years ago)
Thanks. I really enjoy doing these. I wish I had more time for them.
78peterlein (5 years ago)
great tutorial! would you just change the width to percentages to get a fluid grid? thx
milestehmad117 (5 years ago)
This was really great thank you i love your tutorials please keep up the good work :)
Ray Villalobos (5 years ago)
This is a mac program called Espresso from MacRabbit. It has an excellent live preview.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.