Get a first look at CSS Grid, an emerging CSS module that allows developers to lay out web pages in responsive rows and columns.
- View Offline
- [Voiceover] Hello, and welcome to CSS Grid: First Look. I'm senior staff author Morten Rand-Hendriksen and I'm really excited to be your guide as we take a first look at the upcoming CSS grid layout module. CSS grid is the first true two-dimensional layout tool for CSS and it'll allow us to treat the view port as a proper layout service for the first time. In this course, I'll give you an introduction to this new module and show you how to get started experimenting with it as it gets closer to full release. We'll start by exploring the CSS grid layout module, understanding what it is and when we can start using it.
Then, I'll introduce you to the new terminology and properties CSS grid gives us and show you how it all fits together. We'll take a deeper dive into advanced features like named lines and grid template areas. And finally, I'll wrap things up with two examples of advanced, responsive layouts based on CSS grid. The CSS grid layout module is just around the corner and learning how to use it today will give you a head start as grid-based layouts start coming online. Designing the web with CSS grid is a whole new way of doing web design and I'm here to show you how to do it right.
So let's get cracking with CSS Grid: First Look.
Join Morten Rand-Hendriksen in this course for a first look at this emerging CSS module. He covers setting up CSS grids, positioning content, and working with named lines and template areas. The final videos in the course introduce practical uses for CSS grids, including online magazines and three-column layouts.
- What is CSS Grid?
- Using the CSS Grid playground
- Setting up a CSS grid
- Positioning content in a CSS grid
- Using template areas in a CSS grid
- Creating a responsive grid layout