This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Grid Fallbacks" Lesson
[00:00:00]
>> Jen Kramer: The next thing I wanna talk about is Grid Fallbacks. And in that folder for chapter 16, there's basically just a URL. Because when I looked at this, I realized, I mean. Grid of course is a moving target, I've already mentioned that to you. It continues to change just like constantly.
[00:00:23] And Rachael Andrews is doing an amazing job of staying up with all the changes that are happening with Grid and she's documenting them really nicely on her site. So rather than create a resource for you, that is gonna instantly go out of date, let’s rely on what she was already doing here.
[00:00:38] So, this is her website. She has two that are relevant to grid. This is just her blog website. RachelAndrew.co.uk. She also has a website called gridbyexample.com, which you can take a look at. It’s all just straight CSS grid information. So here, and I'm gonna make the text a little bit bigger for you.
[00:01:04] So this is basically a cheat sheet that you can use that's going to show you how you can lay things out, let's say with floats, in addition to laying things out with grid. And without having to write two different style sheets and like then doing some kind of browser test, if your browser supports grid, then load this file sheet, otherwise load these floats.
[00:01:27] Nobody wants to write two different versions of code and try to maintain them. Grids not giving you that much of an advantage. But what she does tell you here is that you don't have to completely fork your code to build two versions. Where you do need to overwrite CSS for your older browsers, you can do inside of a CSS feature query which enables safe cap encapsulation of any CSS you wanna supply.
[00:01:53] So here's an example of this. So here is some example of floats which we did right at the very beginning of the two day process. If you float an item in your CSS for non grid browsers, when that item becomes a grid item, the float ceases to have any effect, okay?
[00:02:10] So if it's originally declared a float, and then later it's declared a grid item, that float declaration goes away, the great item takes effect, right? So what she's saying here is, here's a little bit of code, we have a real simple little snip of HTML here. So we could say that any divs inside of the grid are gonna float left.
[00:02:31] That's typical what you would do here. In that kind of situation. But then you could also take this grid element immediately after and just display that as grid, right. So if your browser doesn't support grid, what it's gonna do is it's gonna float all those elements left, correct?
[00:02:52] And it will just skip over this, no one will know what it is. It just flies right on by it, right? Modern browsers are going to, okay, we'll float it left. Now you want it grid. And so, we'll display it as grid. Make sense? Okay. You all look very tired.
[00:03:10] So this is one I wanna focus on because I think this is probably where a lot of you are coming from, is this floated example. So this is a great starting point for having that discussion about how you might work with grid and the floats that you may already have.
[00:03:27] She also has some solutions here for inline-block, okay. So, it's the same type of formula. If this is an ad bar, that's a very common place where we use in-line block. We take our nav bar, we make it horizontal, we use in-line block to lay out our nav elements.
[00:03:44] You can display it as in-line block and then if you wanted to display it as grid, you can. Personally I think a nav bar displayed in in-line block makes a ton of sense. I probably wouldn't rewrite it as in-line block. But if you're using in-line block in other places on your website for your display, this is a same idea, same exact idea for in-line block.
[00:04:09] Some people are using table properties for similar kinds of layout. Where the display is table cell, okay. You can do that same trick here with grid. All right, pretty cool. So basically this is the same riff, it's a riff on exactly the same concepts over and over again here.
[00:04:33] Vertical alignment issues. I'm gonna scroll on down here for a little while. Down here on flex box, she says, if you happen to be working with something that already has flexbox for layout and you also wanna work with grid, you can in fact work with fallbacks for this as well.
[00:04:53] My sense is this, if you've already got something coded up in flexbox, chances are you're really not. Unless you have a really compelling reason, you're probably not gonna be moving to grid at this point in time. But it is possible to do and here's her example of that.
[00:05:10] So once again, the same little HTML snip at the top and then we have grid displayed as a flex box. Parent here and then re-displayed again later as grid. And all these are examples that are up here on CodePen.
>> Jen Kramer: Okay, and this last sort of example here where it says watch your item width.
[00:05:42] This is something that I alluded to earlier. This supports display grid, okay. So this is that @support construct that I mentioned earlier that you can use as a test. So if the browser is supporting display grid, then we can go ahead and put stuff in here that pertains to browsers that support grid.
[00:06:01] If they doesn't support grid, it's gonna skip on and continue on down the page. The problem with at supports is that most browsers that you typically wanna test for like, does your browser support something that perhaps is not compatible with IE 6, 7 or 8. Those browsers aren't compatible with at supports either.
[00:06:27] So you wind up putting your old code outside of the at supports statement. You put your new code, the code that is the most forward thinking, the most modern inside of the at support statement. Because those are the browsers that are most likely to support at supports, make sense, all right.
[00:06:46] So she gives you some additional resources down here as well. So I am gonna point you guys to this as a starting point, where you can go as you're thinking about grid, you're thinking about trying to make things that are cross browser compatible. She has a number of fabulous formulas here that you can use as starting points for thinking about your code that already exist.
[00:07:09] You can make your floats also work like grid. Or you can make your inline blocks or your flex box, whatever it is, also work with grid. Makes sense? Okay, and I think she did a really clear job of representing that there. All these have code pins associated with them.
[00:07:26] You're welcome to go in and noodle around with her codepens, okay? Now that's pretty much all I wanted to say about these grid fall backs at this point in time. I'm gonna point to you this document. Everybody supports different kinds of browsers. Everybody has different demands on those particular browsers.
[00:07:46] So I think this is a resource to get you started is probably the best place to go.