CSS Essentials: Getting Started with CSS Grid

Rachel Andrew, Web Developer, Speaker and Author

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (60m)
    • 1. Introduction

      1:23
    • 2. Introducing CSS Grid

      8:17
    • 3. Defining Your Grid

      10:33
    • 4. Defining Track Sizing

      6:23
    • 5. Nesting Grids and Placing Items

      10:56
    • 6. Combining Manual and Auto Placement

      7:35
    • 7. Incorporating Responsiveness

      9:23
    • 8. Combining Layouts

      3:30
    • 9. Final Thoughts

      0:59
    • 10. Explore More Classes on Skillshare

      0:35
53 students are watching this class

About This Class

Want to build fast and flexible two-dimensional layouts in CSS? Learn how with CSS Grid!

Join web guru, speaker, and author Rachel Andrew for this class all about CSS Grid: the most powerful layout system available in CSS. With CSS Grid, you can now define both rows and columns, making it a two-dimensional system that opens up a whole new world of layout possibilities. Throughout the class, Rachel breaks down CSS Grid and shows you the powerfully responsive and flexible structures it allows you to implement into your designs.  

Key lessons include:

  • Adding gaps and borders with a single line of code  
  • Nesting grids to create easy overlays
  • Creating hero images by combining manual and auto placement
  • Incorporating responsiveness for viewing at any screen size

Whether you’re a relatively new to CSS or have been using it since day one, this class will show you how to create large-scale, unique, and asymmetrical layouts with ease and efficiency. Every developer should know about CSS Grid, and after this you’ll be ready to implement it into your next project.