CSS Grid Course

[@DaevorTheDevoted]

0:01 1. Course Introduction 4:47 2. Your first grid 8:03 3. Fraction units and repeat 11:45 4. Positioning items 18:28 5. Template areas 23:18 6. Auto-fit and minmax 27:07 7. Implicit rows 29:06 8. An awesome image grid 35:56 9. Bonus: Named Lines 41:25 10. Bonus: Justify-content and align-content 44:17 11. Bonus: Justify-items and align-items 47:44 12. Bonus: Auto-fit vs. auto-fill 49:39 13. Bonus: Creating an article layout 57:37 14. Bonus: Grid vs. Flexbox

[@freecodecamp]

Thanks so much! Just added this to the description.

[@smwasamsmwasam5734]

Thankyou

[@JensdC]

@@OG_CK2018 The justify-content property controls the alignment of grid columns. It is set on the grid container. It does not apply to or control the alignment of grid items. The justify-self property overrides justify-items on individual items. It is set on grid items and inherits the value of justify-items, by default. Hope this helps

[@OG_CK2018]

@@JensdC I am sorry bro to waste your time but i actually wanted to type "justify content and justify items"...but now i have understood that

[@God-T]

@@freecodecamp I've been stuck on this video for 3 days now! and I still haven't gotten past 15 mins 😅 I keep forgetting which one is Column and which one is Row.

[@HamidTalebiht]

I highly recommend seeing this course. He explains it as simple but so clear. After this course, you should practice and no need for any other course about GRID CSS.

[@sevedozo7335]

yeah exactly. my mouth automatically widens up by his methods.

[@GabrielOkpo]

For people having issues with images not fitting into the grid, Per somehow forgets to add that you need to apply the following properties to the img tag .container > div > img { width: 100%; height: 100%; object-fit: cover; } for it to work well with all the images. Found that through the CSS Grid article he wrote on Medium,. Hope this helps someone cos I was stuck too

[@lgiorgos1]

you could easily see it through his scrimba tutorial

[@Raspace]

thanks

[@agustinl7499]

Thanks!!

[@MohammadFahad0]

Thanx a lot i was stucked there.

[@salimdellali1814]

dude you are a hero

[@Freebird1122]

I've taken a few courses so far, trying to understand grid; but this is by far the best one so far. This guy gets it, and he teaches in such a clear and simple way. I've been on the hunt for a good boilerplate method for myself; and I just think I've found it. Thank you Per Harald.

[@dejanvasiljevic2076]

Every comment of this type on every tutorial ever.

[@fredpourlesintimes]

I'm following your courses, and I have to say that - in particular for a french guy like me -, it's very helpful to find such good quality tutorials. In France, and I guess in some other non-english speaker countries equally, we're struggling a lot for finding concise, really explicite, captivating and entertaining teachings. At least for that, I'm pretty happy having learnt english and some other languages.

[@relativelytired]

Hey, would you be interested in helping a noob french learner like myself learn french from a native? and if you need to practice your english, Je suis anglophone.

[@honkhonkv2236]

@@relativelytired I'm on year late but i can do that.

[@dawinderkumarbhatoe5319]

best Explanation and visual examples on CSS grid ever, ive been watching so many tutorials, but this one was Best from all of it. thank you so much for this tutorial, it really helped alot.

[@JottyOL]

I agree! Even as a German guy I learnt more than by any German tutorial. Very clearly structured and not as fast as many other tutorials. Thanks so much!

[@Freebird1122]

Totally agree richi.

[@agustinvis5720]

Thanks! Your comment is very useful. I'm gonna watch it for sure.

[@avtar2565]

Yeah i was thinking about to quit, but this saved me

[@oufcena5092]

Grid blueprint ⌨️ 11:45 4. Positioning items ⌨️ 18:28 5. Template areas --- Responsive layout with no media queries ⌨️ 23:18 6. Auto-fit and minmax ⌨️ 27:07 7. Implicit rows --- Fill-up grid gaps in case of spanning items grid-auto-flow: dense; ⌨️ 29:06 8. An awesome image grid --- justify-content: space-evenly; ⌨️ 41:25 10. Bonus: Justify-content and align-content --- You can get rid of that space by positioning spanning items & using z-index: -1; & self-align: end; & use padding ⌨️ 49:39 13. Bonus: Creating an article layout

[@saintnity5399]

Cannot say thank you enough for this awesome CSS Grid course!!! Definitely one of the best out there.

[@DannyH77]

Hello, you posted this two years ago, I was wondering on how far along are you now on your web development skills? do you have a job doing it now?

[@sharonsmart81]

i have watched over 10 grid tutorials and it always got me confused. The way you teach is nicely paced like teaching a learner. Others are so fast and assume you know some things. keep it up. the best grid tutorial ever!!!

[@danielc4267]

The interactive version linked in the Description is awesome. Thank you!

[@tlarson91119]

I started learning how to make web pages over a year ago and layouts is where I got stuck at for a while. I was confused as to what method(s), for laying out content, that I should use and would just get overwhelmed. The html/css book, that I've been reading from, mentions grid a little bit but in the form of this css-960-grid pre-made stylesheet. This book even showed ways to make layouts (old) by using percentages to set the widths of boxes and then floating them left, but I wasn't sure if floating was the best way. I wanted to learn how to make my own grids and this video definitely helped. Thanks a lot!

[@9nikolov]

You have no idea how excited I got when I searched for Per Harald Borgen CSS Grid and got this result. I hope it's as good as his Flexbox Course! Lets gooooooooooooo! 🚀🚀🚀

[@9nikolov]

Just watched lesson 5 "template areas" and I am blown away by the power of CSS Grid, I cant wait to watch this till the end, then master all the other css concepts I have left in my list and start building complex website layouts.

[@nishantnimish7825]

@@9nikolov more people should use grids, grid areas specifically

[@pablotruffa588]

I ve been reviewing css grid and this is by far, the best free course i ever seen.

[@dan-3268]

You guys deserve a medal or something. No wonder the like/dislike ration on this video is the way it is. Thanks a lot! My plan for today was to learn how lay-out things and after watching your video and alongside trying to tweak things I feel like I obtained a lot of knowledge on the subject. So cheers! Blessed be thy children !

[@angelasantos5786]

I am not a native speaker but I could understand every single word in this video. Wow. You are awesome. Excellent class.

[@DavidOkwii]

This is the most comprehensive tutorial on css grids. Thanks

[@SimPwear84]

Best CSS Grid Tutorial ever. Clear and to the point with great examples. Thank you so much for this. I can now use my newly acquired Grid knowledge with Flexbox .

[@user5214]

How is you web development coming along?

[@SimPwear84]

@@user5214 Exceptional

[@user5214]

@@SimPwear84 fantastic my friend!

[@kushalkumar4970]

You are a hero man! Not everyone needs to be in the army. Love your way of teaching man!

[@undudeme]

Quite possibly the best CSS Grid reference on KZbin. Thank you so much. ☺

[@kasunjalitha2300]

Thank you so much! Best css-grid course. grid-auto-flow: dense, grid-auto-row, minmax, auto-fit are great tools.... Just wow. You have explained everything impressively.

[@umersaeed6032]

Absolutely 0 doubt about it. This is a great course, nicely paced and trains the viewer on a number of options that really matter in design. Tragic that the viewer can't experience the sync due to missing basic.css. Hence, setting the level of this course to be Advanced. Novice users might find a little discomfort and delay in application of the techniques shown. I want to thank the makers, for the great depths of knowledge covered. Thank you.

[@Lucifer_movies]

Hands on the best course on CSS grid ever !!!

[@alexuvarov7441]

wanted to add 10 extra likes, a very calm and detailed tutorial.

[@taariqq]

I have seen 3 Grid tutorials in the last 2 days and one tops the other, but this will be hard to beat when it comes to being beginner friendly.

[@dtawantawng5131]

Wow, just wow. Best intro to grid video on YT, hands down.

[@roeltaga]

*Course Sections:* 00:00 - Course Introduction 04:49 - Your first grid 08:04 - Fraction units and repeat 11:47 - Positioning items 18:27 - Template areas 23:19 - Auto-fit and minmax 27:06 - Implicit rows 29:06 - An awesome image grid 35:57 - Named Lines 41:25 - justify-content and align-content 44:17 - justify-items and align-items 47:35 - Auto-fit vs. auto-fill 49:40 - Creating an article layout 57:38 - Grid vs. Flexbox Hope it helped!

[@freecodecamp]

Thanks!

[@5000jaap]

not all heros wear capes

[@xtracodez]

This guy is amazing.He explains everything in detail and links theory with practical examples. :) Thumbs up.

[@DiakoSharifi]

Thank you, it is one of the best tutorials about css grid.

[@HowTo-nr7uk]

A best CSS Grid explanation that I found! Hats off!

[@xander_szn]

I don't usually type in youtube comment sections, but i have to thank you for helping me understand this.

[@isl8665]

The way you teach is wonderful. Everything is systemic . Explaination is detailed and clear., you turn the difficult and confusing stuff into a easy job. You are a great teacher.

[@litonhumayun]

This has already become my live saver. Thanks a lot for this wonderful tutorial.

[@yadneshkhode3091]

THE BESSSSSSSSSSSSSTTTTTTTTTTTTTTTTTTTTT TUTORIAL ON WHOLE KZbinEEEEEEEEEEEEEE !!!!!!!!!!!!!!!!!!!!!! THANKSSSSSSSSSSSSSSS

[@ferhatbeztout1447]

So clear, this must be the first video appearing when searching grid css. Like it

[@iamwaiyanminhtet]

I was finding resource to get solid understanding of css grid and this explained in details. Really helpful even though it was from four years ago. Thanks

[@pablitooten]

Great video. Just to the point, many videos talk and talk but dont say anything, this one is 1 hour but so dense that there are many things to learn. Thank you so much!

[@madhusudanrao1865]

This is how you teach. Have watched many. The best!!

[@eunoia4679]

Wow, your explanation and demo of how the grid-template-areas work is the best! Thank you!

[@singhyuvraj122]

best CSS grid tutorial , just finished.

[@millerdane]

Who in their right minds would give this a thumbs down! Someone took an hour of there time to make, edit and upload this fantastic tutorial which is well explained and detailed and with the click of a butting berate someone. I feel sad for such people. Anyway thanks for this video and keep up the good work.

[@millerdane]

@John Power Thanks for pointing out the typos John it is appreciated! But as you said, many people make this mistake so are you going to point this out to everyone you see on the internet? Or the plethora of times you see this mistake are you going to allow it to irk you to produce a response? This is not a grammar class, nor an academic paper nor a business report I am writing. Apart from the typo of “Button” I am sure many other persons read it and didn’t give it a second thought but understood the essence of what I was conveying. But like I said I thank you for pointing it our because when I am writing an academic paper or business report you have caused me to be more careful. Now the above is not what caused me to respond. To be honest I was not going to respond, but simply take my remembrance of the use of (their, there and they're) and my challenges with dyslexia and move on. But when you said these words, “I feel sad for such people” I had to stand up and take notice. My friend John you have me deeply concerned with this statement. There are so much things going on in the world, such as recent wars in Syria, poverty and hunger, Covid19 virus, global economy uncertainty and job loss. Yet because someone inadvertently and because of dyslexia used an incorrect word you are saying that, “I feel sad for such people”. You have me in so much shock and because I don't even thinking that tying to explain this statement to you will do anything I would just say my goodbyes here.

[@charlierock000]

Get a life

[@bidishadas832]

Best CSS Grid tutorial, ever.

[@princesaliya4394]

55:45 We can actually solve this. We need to specify grid-row: span 2; instead 2 u can specify whatever number u want to span the element for

[@beautifulllalubabu1701]

Thanks for this video. CSS Grid basic to advance level everything you covered in this video.

[@TheScarum]

I had to set html and body height to 100% so the "content box" with auto-height would actually be responsive to changes in window size!

[@oufcena5092]

Why both? I think only the body would do the trick alone.

[@asquared5786]

Ah thanks got stuck there

[@pratiksrma3728]

I just wanna say Thank you so muchhhhhhhh! Your voice is very soothing and your teaching is sublime.

[@OG_CK2018]

That image grid was unbelievably smart..Thanks for your tutorials..grids are awesome😀

[@gabrielmoraes4516]

Awesome Video! Per Harald is my fav. I wish there were more courses with Per

[@UltraDraft]

wow this is much better than bootstrap! Thank you very much.

[@OG_CK2018]

I don't know why but your profile pic looks like Mr beast having a moustache

[@UltraDraft]

@@OG_CK2018 😂😂😂 He has a mustache though, doesn't he?

[@OG_CK2018]

@@UltraDraft oh lol i forgot

[@chotenque6877]

This is extremely eloquent. Thank you.

[@Palindox]

CSS Grid is blowing my mind.

[@rishabhthakur2270]

best tutorial on css grid i could find

[@michaelbey5]

WOW! Id been looking at a few "grid crash courses" on youtube and opted to go with this slightly longer video and I'm so glad I did! This did such a great job explaining how grid works! Thank you

[@robertschuster7010]

Eine gute Einführung in die Grid-Technik. An Stelle von DIV-Klassen-Definitionen könnte man gleich auch die in HTML5 neue vordefinierten Klassen: und verwenden!

[@litonhumayun]

This tutorial is exceptionally good. Thanks for the tutorial. Hope to see a lot from you.

[@abhayshekhawat8391]

Per Harald you are G.O.A.T just loved your hard work man !!

[@YOUTUBE_IS_WOKE]

@19:26 it doesn't work like that, the footer is not following the resizing of screen, it just stays glued at the end content's edge, but using 100vh then the footer will snap at the bottom of browser, so there will be a gap(space) between the end of content area and footer. Why is that? But this is an amazing tutorial. I've learned in the first 23 mins, and for me is the best in YT, I've watched like 6 of these grid and flex videos and by far this has the clearest explanation and illustration! The second one that comes close to this is the video of codeStackr.

[@sanjayplays5010]

Brilliant, and enjoyable! Love the personality you add to this tutorial. Thank you so much, this was great!

[@suziet6535]

listened to the dude for 20 min... subscribed :))

[@daliborpetric8288]

R.I.P. Bootstrap

[@Syntaxstic]

Bootstrap 4 uses grid layout

[@oussamaghrib4558]

@@Syntaxstic he meant that people used bootstrap in the old days because it has grid

[@hrabianero]

@@oussamaghrib4558 how many years flexbox exists and ppl use css frameworks - Bootstrap is not about grid but all the things it gives.

[@oufcena5092]

@WebbyRides All planned :P

[@oufcena5092]

R.I.P HTML table element

[@sasayaki]

I'm about halfway through and wanted to thank you for this tutorial. Once I'm doing I'm going to find some old online course projects and restyle them with this and Flexbox.

[@danielahermosillo8991]

Great visual explanation! This is incredibly clarifying. Thank you!

[@Rubariton]

What an amazing video. Thats last section of the vid was just the icing on the cake; just having learned flexbox I wondered how to combine the 2. Awesome content really

[@thinkingaloud7925]

css positioning was such a pain until i saw this. Thanks a ton guys

[@neo90sr]

didn't expect that grid area trick, that was cool

[@divyanshubhatnagar4601]

Probably the best tutorial on CSS Grids. Great explanation.

[@VishwashBhusal]

❤ thank you for the video 😊

[@9nikolov]

Thank you so much for this course, I just finished watching it today ❤❤❤

[@KennyFully]

Thank you for this course! Up until now, I was heavily using flex box and got a little tired of it.

[@honkhonkv2236]

Same i was only using flex cause i was too "lazy" to learn grid, and now that i've seen that course, i have to say that there is no coming back.

[@ryanunruh8993]

Very very helpful. Clear concise and visually pleasing. Thank you so much for this video!

[@ze_chooch]

Bro, thank you so much for this video. The way you explain these tools is perfect for me. It was a little frustrating when you typed something in with the browser in the way, but, other than that small critique, what a great course. Thank you.

[@soufianeelc]

Best CSS Grid tutorial

[@AitorMorgado]

Clearly explained, easy to follow and tremendously helpful. I can't thank you enough.

[@romarioreid6310]

Was struggling to learn this concept on codeacademy and you made it very easy to understand thank you very much

[@TheScribes911]

I finally understand CSS grid because of you, thanks a lot 🙂

[@iscaro78]

Really great way to learn how to use grid in the real world! Thanks!

[@SonnyBurnett2012]

The best css grid course! Even beats my native language ones. Thank you!

[@simetric6551]

This tutorial is GOLD.

[@tylercode2207]

Best tutorial out there...You are a G...Keep going!!!!

[@owlcatxx]

I love how the bonus section 13: article layout is narrated by a completely different person 😀

[@shoaibullahkhan8237]

WOW! scrimba is amazing you can edit directly in the video

[@kandysman86]

I'm so glad grid was ready when I started learning. I feel like it spead up my ability to "get it" by leaps and bounds

[@thevadict]

How far have u gone now....can we connect?

[@avinashmurmu9070]

explained it in such a simple and easy way....thank you

[@ngubanezibusiso5154]

I love the examples... I have been struggling with grid.... Thanks a lot for the tutorials

[@EricPeelMusic]

This is so good that I decided to download it for reference offline. I rarely do this. Thanks very much for your excellent tutorial!

[@erroldtumaque3430]

Clear and concise my dude Also my mind was blown several times watching this dear lord

[@solusquinto3086]

Fantastic course!!!! Thank you so much!!!! Learned a lot in a fraction of time!!!!

[@jessiexm90]

Simply fantastic introduction to CSS Grid. Thank you.

[@georgesaeid7231]

The best course ever on the topic. Thank you.

[@DavidBerglund]

This superb tutorial finally got me started with grids, thank you!

[@DavidBerglund]

One small nitpick is that the sound clipped quite a lot, the recording levels should've been just a bit lower. Doesn't take away from the awesomeness of the tutorial, though!

[@orrefis]

You might want to clarify that when using grid-template-area the shapes you map out *have* to be rectangles. Maybe it's common knowledge for grid users but I was scratching my head hard for like an hour before getting this :D

[@gersonadr2]

Very cool tutorial! I feel like I can create crazy layouts now!

[@joel9909]

I have only had a sneak peek at this course, and it promises to be amazing thank you

[@khalilechchoudani7340]

The best tutorial ever

[@bahadircolak]

Perfect tutorial! I want to click the like button ten times... Thanks for this.

[@nitinadarsh]

it wont make any difference, you have to click it odd number of times😅😅😅😅😅

[@maskman4821]

This is the best css grid tutorial ever!

[@victorveloso226]

Thank you very much!! It helped me a lot!! I appreciate your work and the knowledge you gave us!

[@markojotovic8991]

my Favorite teacher! Per Harald Borgen

[@milanm9907]

Thanks for this amazing tutorial! I got super confused at the Bonus: Named Lines, but I'll rewatch it and try to understand!

[@joedundee69]

Thank you for explaining this in such a simple and enthusiastic way. I am doing some courses on Udemy, which cost around £10 each and you teach at least as well as the instructors there, so I recommend that you should become a Udemy instructor and earn from your amazing teaching ability.

[@weblearningd2294]

Best teacher ever!!!