Responsive CSS Grid Tutorial

In this video I go over how I use CSS Grid to make responsive layouts. I show you how to take Sketch designs to create the layout structure. Then I show you the full front end coding tutorial, where I create the structure of the elements in HTML and then make the grid in CSS. I use grid-template-columns and grid-template-rows to define the number and size of each element and then I use grid-template-areas to define each block of the design.

Once the web design is completed I show you how to make this design responsive by adding an '@ media' and defining the columns, rows and areas for the mobile view. Finally I apply CSS styling to the font, colors and alignment to make the final polished design.

In this video I show you:
0:16 - How to get started with a Sketch layout design
1:11 - How to add grid lines
1:22 - How to define the columns
1:51 - What is FR
2:03 - How to define the rows
3:17 - The HTML code
4:24 - Display Grid
4:50 - How to create the columns with CSS
5:26 - How to create the rows with CSS
7:09 - How to use grid template area
8:05 - How to write grid template area in CSS
10:16 - How to add a column and row gap
11:02 - How to make this design responsive
13:40 - Add CSS variables
14:34 - How to add font styling
15:26 - Overview of CSS Grid

What kind of tutorial would you like to see next? Let me know with a comment below!

--

Gear

--

Let's Connect

--

DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content each week!

[youndbloodkid]

Watched a lot of vids on CSS grid but only instantly got it after this one.

[prisma]

4 years later and this is still the best CSS Grid tutorial I have ever seen. Glad I discovered this one today!

[jakeblueberry]

That really helped tie together a few lessons I was looking at. The whole grid layout, and the explanation of the project flow from initial setup, to styling, and tying it together with the mobile design was concise and easy to follow.

[alancotaes]

It’s amazing how you can take something pretty confusing and make it so easy to understand. This is the best grid video on YouTube. Thanks for sharing it!

[tenc]

Hi Angela, I can't believe that I've finally learned CSS Grid after watching your 17minutes tutorial (once) than all those many tutorials out there. Happily surprised that you made it look too easy and immensely informative to comprehend each and every step. Hands down to your teaching skill. I truly appreciate it. Thank you so much!
You've earned a loyal subscriber!

[omarjourieh]

Thank you for making such a perfect tutorial. I haven't seen anything like this before. The world needs this channel to become big!

[Happilyquirky]

You're awesome! I've watched a dozen Grid videos and none of them were as comprehensive as this one. Thank you!

[JAllen-txdi]

THE BEST VIDEO ON THIS TOPIC! straight to the point, clear instructions, I appreciate the time and effort you put into this so much!

[HenriqueSantosCosta]

I just wanted to say: thank you.
I have tried a bunch of courses on CSS Grid, but I couldn't get it to work properly. I've learned more in that quick video than in two weeks of courses and guides.
The layout I was trying to implement worked like a charm with your simple workflow.
Plus, this is hands down the best video tutorial on the subject. Fast, simple, direct and effective. Thank a lot for this!

[joelkhristalz]

U just don't know how this has changed my life😇thank you

[marsdwarf]

This is still one of the best, clearest, and pleasant CSS Grid tutorials I have ever come across. Thanks so much!

[successimamun]

This is officially the best and most simplified CSS grid on the internet. I would never have imagined CSS grid to be this simple to grasp. You did a phenomenal job. Thank you

[jasonmckay]

Fantastic video. Best one I've seen yet on responsive grids in a nutshell.

[FCTUTORS]

Your video is undoubtedly one of the best on youtube for css grid, a pity the channel is so little known, but I loved it so much thank you for bringing this incredible content

[JoanJimenez]

Angela, I've many, many videos and read many tutorials, and yours has been the most clear, direct and illuminating one. Thank you so much!

[bananatop]

This is the best video on how to use CSS Grid I've seen on YouTube. I particularly liked the step by step approach and great commentary, very clear and concise. Thank you.

[aakashjha]

I have always kept my distance from css grid but after this video, I feel confident enough to refactor some of my small projects. Thank you for making this so simple. God speed!!

[icreatestuff]

Thank you so much for explaining this, I've worked a ton with grids, but never grid template areas and needed to make my layout reponsive! This tutorial was simple to understand I appreciate it so very much!

[joemathan]

One of the best tutor I have ever watched in youtube. Explanation is up and clear and to point. More importantly, No extra talking :)

[aprilmorgan]

I'm new to web development, and your videos have been some of the best to help with projects. Your explanations, coupled with the training I've had, really helps me to further understand why we do some of the things we do! Thanks!