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.

Whether you've been following along in Codepen or have been using your own editor, we'd love to see your project. Also feel free to upload any code snippets or thoughts on ways your excited to begin using CSS Grid.

Resources

For more of Rachel Andrew's resources on CSS Grid: Grid by Example
For a free Codepen account: skl.sh/codepen
Exercise Links

Starting Point: skl.sh/cssgrid_1
Defining Track Sizing: skl.sh/cssgrid_2
Nesting Grids and Placing items: skl.sh/cssgrid_3
Combining Manual and Auto Placement: skl.sh/cssgrid_4