CSS Grids and Flexbox for Responsive Web Design Introducing CSS Grid
This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Introducing CSS Grid" Lesson
>> Jen: The first thing I wanna point out to you is that when I started talking about grid, I started talking about it as CSS 4. CSS 4 grid totally awesome, right, because we've had CSS 1, that was the initial specification, and then we had CSS 2, 2.1, we had CSS 3, so now we must be on CSS 4, right?
[00:00:19] Awesome. Turns out though there actually is no CSS4, and I didn't know that, so now I'm telling everybody that this is in fact true. What the CSS people have done at the W3C is they've decided to version various modules of CSS going forward. So animation will have its own number, grid will have its own number flex box, will have its own number positioning, will have its own number and so on and so forth.
[00:00:44] So each of these modules in CSS will have their own number. So there is no such thing as CSS for a grid. It's just CSS grid. Please bear that in mind. And if you wanna read up on that, I've given a link here. Okay. So, why CSS grid?
[00:01:02] You have heard so much about it, it seems like it's really cool. So here's some reasons. First of all, it is in fact a CSS specification. So it's gone through the whole process. It was released as a real, life thing in March of 2017. March this year. And it's incorporated in all of the latest browsers.
[00:01:23] It's been incorporated through a lot of browser updates at this point. Edge is coming out with grid this month. If it's not out already it will be out in a few days. So it's adoption rates have taken off spectacularly. Relative to the old days where we'd have something new in CSS, and we'd go, wow, that's awesome, I can't wait for five years to go by before I can use that.
[00:01:52] You can start to use it now. So one of the most Interesting parts of grid is that there is no row markup we're now starting to think in two dimensions. So rather than putting in these artificial rows on our page and having cells inside of it, Grid is a whole two dimensional thing, okay?
[00:02:11] So we can specify where things are in two dimensions any where on our page, no row markup at all Makes our HTML nice and clean. And as I said grid is designed to work in these two dimensions. So the overall rule is gonna be using Flexbox for those UI elements like image galleries or cards.
[00:02:31] Or there's all kinds of different UI elements that are like this, little units of content. Your Flexbox are great for those, but you're gonna use grid for your major layout of you webpage. Okay? You're gonna get lots of examples of this today.