Card Layout (Design) Tutorial with HTML & CSS Grid - Web Design Tutorial 

This was so extremely helpful. My god. I was worried the video was going to be too short, and out of date (3 years ago) but it worked perfectly. Thank you so much, you've helped my understanding of how to do a card layout.

Thank you! Nice and clean explanation. Just what I looking for. :)

From the depth of my heart ....... Thaaaaaaaaaaaaaaaank you. My day was terrible because of this but right now.... I'm smiling. Such a happy night cos i found this video

thank you for explaining all the concepts as well! I'm completely new to HTML and css and this was a big help!

i like card layout and I use them quite often so seeing different approach is another good example in my collection :)

Thank you for your kind help. That was a fantastic tutorial.

great job bruh, it really helps me improving my skils !

Great tutorial. Did you purposely sneak in the BEM style coding? Or are you planning to flesh it out in a later tutorial? Which would be awesome. Doing a tutorial the way you did this is really teaching multiple subjects, i.e. SCSS/SASS, BEM and gui design structure, without mentioning it. Presenting BEM after this tutorial would be like a 'light bulb' going off in ones head because the seed for such technology was previously planted. It just need time to come to fruition. That's the way we all learn. The majority of us do not get it the first time around. Mostly because we're bombarded with TMI (too much information). Great job!

it's veryyyy helpful thank you, highly appreciated

*VERY GOOD tutorial! Thanks for sharing because i learned A LOT! Ill be testing this out soon.*

Nice! Good explanation and yet simple

greetings from India, precise and very informative presentation. keep it up.

thank you for the tutorial it helps me a lot

Thank you its actually very help full👍👍

What do I have to change to make it look good with 3 cards per row instead of 4? It seems to me that this is made for 4 cards per row since 3 per row are not centred...

Great one

Awesome bro...thanks

Great video !!!

Thank you so much ✨

Thank you very much. Can you put navbar using list items (for instance, Home,Contact,Services & Product, and clicking menu items allow you to jump to content page accordingly.

Thank You!

Very useful tutorial, Thank you

Amazing!

awesome thankyou

Thanks for your valuable content

What do you do if the text in the cards has different amount of lines? So card 1 has 5 lines of text while card 2 has 7 lines of text and card 3 has 5 lines. There's a button at the bottom, which will be out of alignment with the other cards. How would I fix this?

If you give an element a width in percentages but its containing div has no width set, does it move up until it finds a div?

Sir this helped me a lot thank you

Hey Dom can you do a tutorial on range slider & Double range slider using javscript?

Exactly what I was looking for! You mistakenly said JavaScript though 😅

Amazing. Ive tried to do this kind of thing with flexbox. Ive ended up with width and gap set to some % and bunch of media queries. It was close but not as perfect as this solution. Ive also tried using width clamp but aparently it doesnt work with flex

Hello , i hope this finds you great. I have been following through the tutorial using the same technique to make cards for a recipe website but i noticed since each card can vary in content length its making the card differ in height . How can i make all the cards the same height irregardless of different content text . For the video tutorial it was the same exact thing on all cards do it looked all the same...please kindly respond and help me how i can get the problem fixed..Thank you for the great tutorial

@dcode What do I do when the elements card__content in one or more of the card(s) are longer than in the other(s) and therefore creates this white space underneath the card__info to fill out the space on the cards where the s are shorter?

Excelente!!

thank you

Thank you very much

I am trying to recreate this my own way, How do increase the width of the card? I want it a bit wide.

Respect :)

Hi Great tutorial! I tried to reproduce and everything looks great but for some reason, the light gray box at the bottom doesn't fit to the width of the "card" as if it has some padding. Any idea what that could be? Thank you!

what if the content is different lengths? really need help on that one.

Ya Da Best

Good

My first is floating towards the middle of the page and when I try to add another it places it below, rather than next to it, can anyone help? thanks

I find keyboard sound satisfying 😖🤣

Do we have to use so many div???

Can you pls pls pls make the same card with user image inside circle between top image and Lorem text centre align?

how to make the coloumns smaller? thx for the tutorial btw xd

It will be nice if you will share the source code...

now the Q is, how to turn this simple design into another simple cms post, edit, delete

Yeap💔💔

this guy never answers comments and says "I'll leave a link" but never does..

this isn't responsive.

This is excellent but why can I not expand it to 100% of the VW? It's stuck at 1000px and defies all attempts to expand it for bigger screens.