@@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
@@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.
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.
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.
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.
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!
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
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 !
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!
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! 🚀🚀🚀
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.
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.
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.
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
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
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.
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.
Great course. The only thing I wish that was visually included in this lesson is the ability to "set" a minimum height on a specific grid row, but still allow any items in that row to "grow" in height from that point (without impacting the height of the other rows). can this be done?
i think it would of helped to see your CSS styling for the divs 1-6 to see how the dimensions of the DIV are effected by the CSS grid markup in the "your first grid" section.
