Creating CSS layouts that behave as expected no matter the viewport size used to be a frustrating, time-consuming experience. But thanks to CSS Grid, these headaches are a thing of the past! Through a series of concise lectures and hands-on exercises, this comprehensive tutorial will guide you through everything you need to know about creating responsive layouts for all of your web applications.
CSS Grid Basics
Dive right into CSS Grid! You'll learn how to enable grid, define basic layouts, and use DevTools overlays to help plan and debug grid lines and areas.
Units and Utilities
Pixels are precise, but can lead to annoying calculations. Luckily CSS Grid supports alternatives like percentages and fractional units that can be combined to create more complex layouts without having to do math. Useful shorthand properties and helpful functions are also introduced.
Positioning Elements by Lines
Learn to take a more specific approach to creating layouts by specifying the lines where elements should be placed.
Grid Areas
When the layout you're implementing is too complex for specifying lines, grid areas are the way to go. In this section you'll learn to visualize your layout as you create named areas, including support for empty spaces.
The Implicit Grid
You've seen a few ways to explicitly define layouts. Now it's time to look behind the scenes at the implicit grid. Understanding this behavior allows you to change the default placement algorithm and support dynamic layouts.
Creating Responsive Grids
Up until now the layouts we've created have been meant for larger computer screens. In this section you'll practice creating grid layouts that seamlessly adjust to different viewport sizes with help from media queries and useful CSS Grid functions.
Building an Example Layout
To wrap up the CSS Grid tutorial, follow along as a common layout is built step-by-step following the "mobile first" approach.