CSS Grid makes it easier to create website layouts. It simplifies both your HTML and CSS, while giving you more control over your layout. You can take the interactive version of this CSS grid tutorial here: https://scrimba.com/g/gR8PTE
The course contains three sections. The first two will teach you the core concepts you need to know to get started. Together, we’ll build both a website layout and a super cool image grid. In the bonus section, you’ll learn how to create article layouts with CSS Grid plus some more advanced concepts.
⭐️Full content overview⭐️
⌨️ 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
You can connect with the course creator Per Harald Borgen via Twitter: https://twitter.com/perborgen
Learn to code for free and get a developer job: https://www.freecodecamp.com
Read hundreds of articles on programming: https://medium.freecodecamp.com
And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp
This Post Has 28 Comments
You are very good at this! keep it up!
that was great, thanks
Thanks for all that you do.
just wow. this video is extremly useful <3 thnx for great explanation
just sad that the basic.css is not given, so visually its not the same but still good tutorial
This is the most comprehensive tutorial on css grids. Thanks
Is there a video on flex box by the same instructor? I love his clarity.
Where can I find the full code?
Best tutorial out there…You are a G…Keep going!!!!
Per Borgen!!!… ( 🙂 )
very useful ,than you freeCodeCamp
Great sir thank you
6:16 It helped me.. 200px means second row
Fantastic course!!!! Thank you so much!!!! Learned a lot in a fraction of time!!!!
is this complementary to flexbox or is it instead of??
At 46:22 was the layout I was planning for a project to grab attention haha. Made me laugh.
You are a hero man! Not everyone needs to be in the army. Love your way of teaching man!
Why are you not showing the basic css?
Thank you for your sincere efforts.
🏁 Mᴏᴛᴏʀᴄʏᴄʟᴇ Rᴀᴄɪɴɢ Gᴀᴍᴇ Cʜᴀʟʟᴇɴɢᴇ 🏍🔥💻
💚 ᴅᴏɴ'ᴛ ᴍɪss ᴡᴀᴛᴄʜ ᴛʜᴇ ᴠɪᴅᴇᴏ , sᴜʙsᴄʀɪʙᴇ & sʜᴀʀᴇ👍
ᴍᴏᴛᴏʀᴄʏᴄʟᴇ ʀᴀᴄɪɴɢ ɢᴀᴍᴇ📲❤️💻| ᴄᴏᴅᴇsʜᴏᴡ ʟᴀᴘᴢ | 2022 |
Wow, just wow. Best intro to grid video on YT, hands down.
Thanks for this video.
CSS Grid basic to advance level everything you covered in this video.