Responsive CSS Grid Tutorial
HTML-код
- Опубликовано: 31 май 2024
- New to CSS Grid? Watch the full Crash Course here: • CSS Grid Crash Course ...
Add Google Fonts to your web design here: • How to add Google Font...
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.
View the Code here: codepen.io/angeladelise/pen/Y...
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!
Want to improve designer to development handoff? View my Sketch to Zeplin workflow here: www.youtube.com/watch?v=D3ZF2...
--
Gear
Microphone - amzn.to/34bDTxH
Hard Drive - amzn.to/30m5E5M
--
Let's Connect
Dribbble: dribbble.com/angeladelise
Blog: / angeladelise
--
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!
Watched a lot of vids on CSS grid but only instantly got it after this one.
That's great! Happy it was helpful!
Me too!
This is the best Grid video I've seen.
Same here😊😊
I recommend watching the free code camp one after this. They cover it in more depth with tips and tricks, and a real use case, and the addition of flex.
U just don't know how this has changed my life😇thank you
Thanks Joel! Happy it was helpful!
Right
4 years later and this is still the best CSS Grid tutorial I have ever seen. Glad I discovered this one today!
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.
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!
agree with you 👌
I've learned more on RUclips than I have in college!
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!
It’s amazing how you can take something pretty confusing and make it so easy to understand. This is the best grid video on RUclips. Thanks for sharing it!
You're awesome! I've watched a dozen Grid videos and none of them were as comprehensive as this one. Thank you!
Thank you for making such a perfect tutorial. I haven't seen anything like this before. The world needs this channel to become big!
Thank you!
Fantastic video. Best one I've seen yet on responsive grids in a nutshell.
Thank you! Let me know if you would like to see a tutorial on a specific topic!
This is still one of the best, clearest, and pleasant CSS Grid tutorials I have ever come across. Thanks so much!
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
This is AMAZING! Simply explained with show casing right away! I love it! Thank you for explaining it so good!!
Happy it was helpful! Let me know if you would like to see a tutorial on a specific topic
@@angeladesign737 Hi.. loved your video once again. Will you teach the use of javascript in websites, like making popup forms, and other responsive stuff. Sry if i'm asking too much from you.
Thanks a lot
@@prajyotbhalerao6301 Yes I have a few JavaScript tutorials coming up!
@@angeladesign737 😍Thanks
YOU ARE A JEWEL!! I don't know how i found you, but I've already subscribed so I will never lose you! Thanks! This litereally helped me layout my next client's design the exact way I saw it in my head.
Thank you for the kind comment! :) Let me know if would you like to see a tutorial on a specific topic!
I agree... this was excellent. Too many instructors focus on the solution, and not the process to get to the solution. This was very valuable!!
@@angeladesign737 Such an amazing tutorial... Very useful. Can you make tutorial series on how to use Angular/react or any other framework which can be used to make full websites(front-end and back-end). also is bootstrap needed to to make websites?
Thanks for making such videos... clears all the doubts.
Where can I find the code for the mobile layout? I don't see that in the codepen.
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!
This is the best video on how to use CSS Grid I've seen on RUclips. I particularly liked the step by step approach and great commentary, very clear and concise. Thank you.
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!!
Best tutorial ever. Saved my life
Happy it was helpful! Let me know if you would like to see a video on a specific topic!
THE BEST VIDEO ON THIS TOPIC! straight to the point, clear instructions, I appreciate the time and effort you put into this so much!
Thank you so much, I have struggled with CSS Grid for 2 weeks now and thanks to your video I was able to finish my project. Great work!
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!
Glad it helped!
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
Thank you so much for the kind comment. I really appreciate it!
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!
One of the best tutor I have ever watched in youtube. Explanation is up and clear and to point. More importantly, No extra talking :)
This video explained to me designing CSS in 20 minutes. I've been trying for 5 months now. Thank you so much!
Happy it helped!
OMG!!! Where were you when I needed this 4 years ago? I guess my professor was right about "Less is more." I was never good at coding, especially when it comes to organizing and shortening codes. Your presentation was amazing. From beginning to end, I understood everything! Thank you for refreshing my memory and teaching new tricks to apply to my future website.
Happy to help!
AWESOME video!!!!!!! Started to learn code 6 months ago. This is the most basic and simple tutorial that I have come across for layouts!! Looking forward for more.
one thing which is best in your tutorial is the pace of your teaching and thanks to you i got to understand the grid best ever before
Amazing video! As someone just getting the grasps of the grid system, the way you explain the concepts and layout are perfect.
Happy it was helpful! Let me know if you want to see a tutorial on a specific topic.
@@angeladesign737 at the time of my comment I was studying to pass appacademy's online bootcamp's technical assessments. Ill be getting back into the grid in a couple weeks. 6 month course. Ill hit you up with some examples suggestions when im there :)
Several of my students said this was their "a-ha" moment with CSS grid. Thanks a million! One question: can you do a video about setting up SCSS?
I literally NEVER leave comments on RUclips videos, but this one was seriously the most helpful, thoughtfully-produced and easy-to-follow coding tutorial I have ever seen.... and it saved my butt while designing my company's new website, so THANK YOU!!!!
CSS grid combined with well made comprehensive videos like this changes web dev for me. As someone who did mostly js, this has made it so I can safely play with css and put what's on paper onto a page. Thank You!
FANTASTIC!! Angela, your tutorial is the BEST! In just 17 minutes, you clarified all the confusion I had, which hours of Udemy videos could not do. The clarity in how you explain things with clear visual examples is superb!
Thanks so much Michael! Happy it was helpful
So beautifully clear it really helped me figure out a few things I couldn’t figure out thanks a bunch !!!
Glad it helped!
bro you're so good at explaining this! Making this was like butter
I can't tell you THANK YOU enough, I've looked at a thousand tutorials and videos and when I watched yours, I got it! The design I wanted came together like magic all thanks to you. Thanks again!
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
I initially started learning how to code with a no-code tool called Bubble and it overcomplicated everything so much!
Thank you for making such an amazing video showing some real code in practice!
I'm in school now for full stack web developer and have to say thank you so much with how you explained everything. I was not so great with CSS, but this really gave me a better understanding how it works.
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
Have been rolling a lot with Grid. Saw lots of videos and yours just got me understand it so clearly. Thank you
Happy it was helpful!
simplemente increíble!!
A pesar de no tener un inglés suficientemente aplicado, pude entender lo que intentó explicar y gracias a esto pude esclarecer una duda que me había hecho pensar por un momento abandonar cierto proyecto.
Te agradezco mucho por este recurso y de verdad espero algún día tener tanto conocimiento cómo tú.
I'm not good at english so that i can't express my gratefulness properly to you. In a single word " you got a subscriber ". many many many many many thanks.
Thank you so much! I really appreciate it
I'm looking for that smart and clear, simple grid explanation ..thanks so much for this video.
Happy it was helpful!
Love love love this! So much easier this way than other grid lessons that i've seen.
I have seen many tutorials but nobody could explain the CSS grid like you. Thanks a lot.
I'm 21 seconds in and I'm already sure that this is gonna make my life so much easier.
So long, flexbox. In your face, Bootstrap.
CSS Grid is great but flexbox is awesome as well! Sometimes I use them together like in this example: ruclips.net/video/c7gMtiJxvgY/видео.html
@@angeladesign737 Right. Grid is great for making layout easier but anyone who thinks that they won't need Flexbox anymore because of Grid is in for a big surprise.
You are Awesome, perfect tutorial for responsive web page
Ranshine Thanks so much!
I have been using flexbox for my previous projects and haven't really gotten down to studying grid until your vid which has allowed me to understand the basics in one sitting. Excellent work.
That's great! Happy it helped
You dont have an idea how many tutorials and docs I tried before finding this video, not even chat gpt4 or grok could provide the insightful presentation of how to organize the grid/elements as you did in this tutorial, Thank you!!!
If this is not a life changing I dont know how to name it. No more hours trying to design a responsive project. 1k thanks ;)
Thank you so much Raul!
@@angeladesign737 can you please do a HTML and CSS course?😭
Amazing video! Thank you so much for this!!
Thanks! Let me know what other tutorials you would like to see
Getting to this video tutorial is the biggest gift I got at the start of the new year. Thank you so much for making it so easy for me to understand. You are a genius!
Glad it was helpful! Thank you!
WOW NO CAP IM SO THANKFUL FOR THIS VIDEO AND TO NOT HEAR ANOTHER MANS VOICE IS SUCH A RELIEF!! Thanks fam! 🐐
holy shit you saved my life. i've been so confused this whole time.
Glad it was helpful!
this is the real meaning of "css and media query made simple....."
Watched half a dozen of CSS Grid videos and this is the only tutorial I actually understood.
This was a great tutorial! I was able to follow along with you in codepen and understand enough to add my own flare to my design. I am a beginner and learning CSS grids has really caused me to struggle with creating responsive layouts. I subscribed and will be checking out more of your videos. Keep up the great work!
Thank you so much! Glad it helped!
Literally this is exactly what I need as a frontend developer. Thank you! Seriously fantastic video!
I rarely comment video on RUclips but this one deserves it. It was simple, explicit and very well explained. You’re a great teacher and just for this you won a new subscriber 😉.
Also Important to note that the media query code only works if you put it at the bottom of the CSS page. It took me half an hour to figure that out.
It took me longer to figure out. You're right, an important tip!
Why though???
Wow! amazing, finally an easy explanation for grids layouts and someone taking the time to explain it, and using basic elements, cheers.
When I was enrolled in a web course, the part about CSS grid only involved a bare bones photo gallery. I really wanted to understand how it's used to construct a complex web page. This video is just what I needed! I feel more comfortable in designing my own page to include in my portfolio.
Really really so cool and simple to follow...my understanding of this has increased to 99.999%
Happy it was helpful!
@@angeladesign737 thanks. indeed it was 👍
Really happy to finally meet the tech-tuber who is a girl! I love your voice, delightful! Thank you for making those videos! Keep going, I will subscribe to your channel.
Thank you so much! Glad you like them!
This has been truly helpful in understanding how grids work, fantastic content!
I must say that you are a true life saver. I have been looking for a well detailed video on css grids for a long time now, and with your video I can say that I have gotten exactly what I needed. May God increase you in knowledge...you just earned a subscriber Angela!!!. please keep on doing this, its a bunch of help to us.
Thank you so much for the comment! Happy it was helpful!
One word, AMAZING:)
This is what i’ve looking for.
Now I don’t need import some css library just to use grid style for.
Thank you❤️🔥
i saw many videos about grid, and it always confused me until this video, girl i love you
Thats one of the most amazing tutorials I've ever seen in my entrie life!!
Please more css grid tutorials and more css grid + flexboox videos!
Thank you so much! I have several tutorials that go over flexbox and grid, like this one: ruclips.net/video/c7gMtiJxvgY/видео.html
BEST VIDEO EVER for the topic!!
Well done Angela!!!
Love you
I wanted to take a moment to express my sincere appreciation for the wonderful videos you have been creating and sharing on RUclips. Your dedication and expertise are truly remarkable, and it is evident that you put a great deal of effort into crafting each one of your videos.
I have found your videos to be incredibly helpful and informative. The way you explain things is clear and concise, and you always seem to have a way of making complicated topics easy to understand. Thanks to your videos, I have learned so much and have been able to apply that knowledge in my daily life.
I also want to commend you on your professionalism and positivity. Your passion for your work shines through in every video, and it is truly inspiring to see someone who is so committed to making a positive impact on others.
In closing, I just wanted to say a heartfelt thank you for all the hard work you put into your videos. You are making a real difference in people's lives, and your contributions are greatly appreciated.
This is my first time to subscribe a RUclips channel just with one video viewed.
Thanks and keep up with the good work!!
This is so very to easy understand thank you, I tried reading from coding sites, and looking at other tutorials but this was very simple and straightforward thank you!
This is an AMAZING video! I had finally figured out setting up grids after a million lessons but this really cemented my understanding. Excited to update my code later to make it mobile friendly too. Thank you!
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
WOW you're so good at explaining things . I use flex box for layouts but thought I'd watch grid as well but didn't expect to learn so much from just one video. Keep up the awesome work
Thank you so much!
Most practical video on CSS grid i've come across on youtube. Just what I've been searching for. Thank you so much for this video.
Thank you so much Aaron!
Your video made me change to use CSS grid in every layout from now on. Thank you from Brazil!
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
That's so sick. I knew there was a better way than others were teaching. Thanks, this is great!
Amazing, the best Css grid tutorial I've seen, thanks so much
I was struggling for positioning the contents. Thanks a tons. Great tutorial. 🙌🏻
i'm so glad i found this. i was trying to set up grid using the other method where you set item sizes, then order, then apply the repeat autofit/fill function on the container. i couldn't for the life of me get it to view properly in smaller media views. this worked brilliantly for what i wanted to achieve. thankyou! i think i'll use this method to structure the items regardless from now on.
animated Box With CSS
ruclips.net/video/gBmx3RmThDE/видео.html
This helped me a lot. I've looked at a lot of other content but this one made it all click.
Really Thank you!!!
This video which I have been searching for a while about Responsive web design. I got lots of useful information in a easy way to understand.
I rarerly say this but this video is amazing. You actually make my website responsive in 20 min while i was struggling for one week. Good job
This video save my life! no more problems trying to figure out how to get nice responsive grid, Thank you for so much, sorry for so little
You're AWESOME! iv'e seen a lot of tutorials but none of them taught me well as you did. You should get a lot of subscribers.
Thanks so much! Happy it was helpful
Thank you so much… I stopped designing 3 years ago,, now you made me remember something and learn also, thousands thanks!!
I needed to add the property "display:grid" under my @media. I do not know how it worked for you without that. Thanks for the tutorial, was amazing!
This was really good . Thank you for making this lesson though it appeared to be simple and basic . I really learnt a lot . That solidified what I had learned prior. I look forward to learning more with you .
Only discovered now and this is the easiest explanation out there. Thank you.
I’ve been with grids for a long time. Thankfully, I found this video and discovered grid template areas.
I never comment on any videos but for this I must. Thank you so much!!! I can’t stress enough how helpful this has been. Can’t wait to see how much your channel will grows :)
Thank you so much! Happy it was helpful
First CSS grid video I have watched that didn't make it look complicated. Love it.
Glad it was helpful!
probably the best tutorial on youtube! thanks so much!
Thank you so much for this well made video ! I've learned more here today than my entire previous education. Thank you Angela !
You‘re pretty good in teaching this stuff. I really like that. It’s also nice to listen your relaxing, smooth voice. Thank you!
What an amazing way to organise the content in a page, thank you!
Wonderful tutorial; so easy. I am going to start off with this as my basis for most projects. Love having full outline of whole design already on the page, while tweaking everything else.
Glad it was helpful!
Angela! THANK YOU for the info you share on your channel! I'm a current bootcamp student just starting to explore the coding side of ux/ui, and I can't tell you how helpful your clear, simple explanations are. Just subscribed so I can reference your channel again soon!
Thank you so much! I'm happy my videos are helpful!
the first time i really understand how css grid works, great video, thanks!
Nice tutorial, thanks. Lately I've just found myself using grid template areas and the classic repeat(auto-fit, mimax()). Is just the way to go.
And this is serious teaching of workflow and css specification and positioning!
Keep up the good work!