4.1 The Grid Layout

Hello, and welcome back to the CSS of the future. In this lesson, we're going to talk about a very exciting feature within the current draft of the CSS level four specification. And that's the grid layout. Now the grid layout isn't supported in most browsers. It does have some partial support in the latest versions of Internet Explorer, if you use the MX prefix. But you can also test it out in Chrome, if you turn the support for it. But before we get to that, let me talk very briefly about what the grid layout is. So the grid layout makes it very easy as you might guess by the name to lay out your content in a very, very customizable and easy to use grid. Now, it looks a little confusing when you see the CSS at first, but you can actually pick it up pretty quickly. And again, it's really easy to use. So, as you can see here we have several different pieces within our grid system. Some of those pieces span multiple rows. You can also make them span multiple columns if you want to. You can even see down here on the bottom right that we have two columns within one of these grid sections. So you can have nested grids. And one of the great things about this grid layout is it doesn't matter what order your content is in your HTML. If you want it to, you can put this bottom right div up at the very top of your HTML. And you could put the logo or the top left section here down the bottom of your HTML. It doesn't matter what order it is in. It is very easy to reorder your content, using the grid layout. I thought now would also be a really good time to show you another website. That website is called canIuse.com, you might be familiar with it, but if you are not it's a great way to tell what browsers support the feature you want to use. So for our example, we want to try the CSS grid layout. So let's try just typing in CSS grid, and sure enough, it shows up down here. So we can scroll down and see the browsers that support it. So anywhere where you see green, or at least this shade of green, we can see if we hover over it, it says that this is IE 11 and it has partial support with the MS prefix. All of the other browsers simply say not supported except for Chrome. If you hover over Chrome, you can see that it is not supported, but it can be enabled. So it's not supported by default, but there's a feature you can turn on to enable it. And there's even a note down here that tells you where to find it. It's enabled in Chrome through the experimental web platform Features Flag in Chrome Flags. The way you get to that is you simply open up a new browser tab here in Chrome. You type Chrome:// and then flags, and there's a lot of content on this page, so we can do a search on the page. I'll hit Cmd+F or Ctrl + F if you're using a PC. And I'm going to search for experimental web, and here it is right here, Enable experimental Web Platform features. So as you can see I've already got it enabled because the link here says disable. By default it's not going to be enabled, so when you get to this particular part of the page you can click on Enable. It'll give you a pop-up that says you need to restart Chrome in order for it to work and then you can experiment with it. And as you can see here on this test page, it actually does work in Chrome. And again, I really like the way that this layout works. It allows you to very easily add some CSS to rearrange your content or layout your content in a very flexible easy to use way. So in the next video, I'll give you an overview of how we would code this in CSS, according to the current draft of the level four specification. So thank you for watching and I'll see you then.