You are currently viewing CSS Grid Course

CSS Grid Course



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

source

This Post Has 28 Comments

  1. XXendo

    You are very good at this! keep it up!

  2. ia fofkhadze

    just wow. this video is extremly useful <3 thnx for great explanation

  3. Huy Pham

    just sad that the basic.css is not given, so visually its not the same but still good tutorial

  4. David Okwii

    This is the most comprehensive tutorial on css grids. Thanks

  5. David Okwii

    Is there a video on flex box by the same instructor? I love his clarity.

  6. Tyler Code

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

  7. Ruby

    6:16 It helped me.. 200px means second row

  8. Solus Quinto

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

  9. learpic

    is this complementary to flexbox or is it instead of??

  10. Kushal Kumar

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

  11. 🏁 Mᴏᴛᴏʀᴄʏᴄʟᴇ Rᴀᴄɪɴɢ Gᴀᴍᴇ Cʜᴀʟʟᴇɴɢᴇ 🏍🔥💻

    💚 ᴅᴏɴ'ᴛ ᴍɪss ᴡᴀᴛᴄʜ ᴛʜᴇ ᴠɪᴅᴇᴏ , sᴜʙsᴄʀɪʙᴇ & sʜᴀʀᴇ👍

    ᴍᴏᴛᴏʀᴄʏᴄʟᴇ ʀᴀᴄɪɴɢ ɢᴀᴍᴇ📲❤️💻| ᴄᴏᴅᴇsʜᴏᴡ ʟᴀᴘᴢ | 2022 |
    https://youtu.be/Z1AOxKXydT0

  12. Dtawan Tawng

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

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

Leave a Reply