 Hi, good morning, everyone. Thanks so much for coming in today. We're going to talk a lot, actually, about CSS Grid. Talk a little bit about how we might apply it in the real world right now, and then wrap up with some final observations. So kicking things off, my name is Tiffany. My Twitter handle is here, so if you're tweeting anything that I'm saying, I can't promise there's good quotables, but you're welcome to. I live at the beach. I moved to North Carolina about a year ago with these three adorable small people. And my husband is around here somewhere. I've been a developer for 18 years. I do a ton of work in the WordPress space, a ton of work in the e-commerce space. And I'm a full-stack developer, so I do both front end and back end development. It turns out that if you've been a developer that long, when you started, there was no separation between those two things. So you had to learn how to do all of them. So before I get started, and so I can tailor some of the things that I'm going to say a little bit better, I'd like to get a sense for who all of you are. So if you could just by show of hands tell me how many in the room are developers? Cool. How many are designers? How many are both? Nice. Nice, you've got a good group. And how many people are brand new and are just kind of excited to learn more about CSS and CSS Grid? Nice. All right. So it seems like I started the talk wrong, right? Like, oh, I can't believe she's ending already. It was either a really great talk or, as it turns out, it's just that I'm a super cool presenter. And I'm doing that thing that dramatic television shows do, where they show you a snapshot of the very end of the show. And then there's a noise 15 hours ago. And so because I'm really cool, I'm going to tell you what the takeaways are of the talk before we start. And then hope that y'all stick around to actually learn why we got here. Some things we're going to take away today. We're going to work smarter so that we can work even smarter later. We want to think in patterns and build in blocks. This one is something that I'm very passionate about. If you want to talk to me about pattern libraries later, I have a whole thing to talk about. Fallbacks are easier than you expect, maybe easier than you've been led to believe. And Grid isn't super comfortable when you start. And so I want to encourage you to be uncomfortable on purpose. We're going to change our whole perspective on layout right now. It's going to be crazy. Maybe not Owen Wilson crazy, but crazy. But before we do that, I want to go and grab a little bit of history. So there may be a few of you who remember this. Does anybody remember CSS Zen Garden? Yay, many more than I expected. This is what it looked like when I started using CSS. It looks different now, but this theme is still available, if you ever want to go back and look at it. And this is where we made this transition from a world where layout was done with tables. And we moved away from laying it all out in cells. And we moved away from the unpredictability of something that was really designed for tabular data and not for layout. And we moved into a world of CSS, where we had more power than we ever had before. We got floats. Then we got Dividus. And even then, with floats, everything we did was one-dimensional. And it wasn't all that modular. Cascading, style sheets, inherit. And they're supposed to, and the inheritance is beautiful. But it isn't always, well, it's always predictable. The machine always does what I tell it to do. I'm just a human. And I sometimes tell it to do the wrong stuff. Or forget that it's inheriting things from other places. And again, like I said, one of the biggest problems is that it's one-dimensional. We can only think about things in a row. We really can't think about things in the same dimensions as they're laid out on the page. And we've come up with a lot of really cool hacks and tricks for working around this. And we've built frameworks that leverage some of the most amazing tools that we have. They leverage CSS preprocessing to build us BEM models where we can spin up a whole layout on a grid, on a clean predictable grid with a minimal amount of effort. That minimal amount of effort, once you learn it however, does lead to an unnecessary amount of HTML bloat. Enter Flexbox. And Flexbox is something that I was kind of late to the game with. I was very hesitant to start using it. And I think that's why I got so excited about CSS Grid so quickly. Because I didn't want to make this mistake again. Flexbox lets us vertical center things. How many people loved vertical centering things before Flexbox? You're lying. But it's still one-dimensional. We can only think about things in rows. Now we can kind of think about them in columns, sort of. But again, we had to learn a new layout structure and it's not two-dimensional. It's still really, really good. And a lot of people I have heard will make the distinction that Grid is the new Flexbox. Or Grid is taking the place of Flexbox. I don't really think that's true. I think that much like you can use two different tools for the same job, and one of them's just gonna be a little better at doing that job, that's what Flexbox and Grid are. And there are still a lot of use cases where Flexbox absolutely makes sense. I'm gonna show you later a layout that we did using Grid where the header is still entirely done in Flexbox because it didn't make sense to put the header on a grid. It's a completely separate element that later also becomes pinned to the top of the browser so it's not adhering to any of the rest of the page layout at all. So I talked about this second dimension a couple times. This feels way less cool than the sci-fi feeling I wanted it to have. Maybe I should tell you it's a fifth dimension or something crazier like that. But we're gonna join the second dimension. So here's some ways that Grid is different. And Grid is new-ish. It's been since, I wanna say, November or so that we had massive browser support and that's almost a year now, wow, where we're able to use it. I'll talk a little bit later about Internet Explorer and the asterisk that goes on it. It's the same asterisk that's been there since I started building websites 20 years ago. A little better now than it used to be. But Grid is two-dimensional. So we can think about things in rows and in columns and we can specify all of them. Which means that our layouts that we sketch on napkins can now be translated into actual code that respects all of the rules that we drew on the napkin. This is where we've evolved to, napkin drawings. Grid also enforces and simplifies modularity. What this means for me is that I'm free now to do something I always wanted to do but was a little bit fettered by the constraints of my own styles. And that is to think about each component of my page as though it is its own individual component to analyze an entire site for reusable patterns and code those patterns knowing that I can later rearrange them, move them around and of course still have the ability to globally control what they look like. So here's an example of a site that we built and there's, I know that this source code is very small when we get to places where there's actually source code to look at. I made it bigger for you. But to start with I just wanna showcase how this particular page has multiple different components that use completely different grids and don't adhere to the same grid system at all. So this is sort of just your basic three up card. The next section is again just sort of your basic two up card. The only thing, and in fact between those two components the gutter isn't even consistent. This space in the middle between the two columns exists here whereas it does not exist between the cards above. And then as we move further down the page we have yet another grid layout where as you can see you can draw lines all the way around it to showcase exactly what sections of the page you want to be styling and how you want to be styling them. There's also some additional cool things about this particular block that we'll talk about a little bit later. Another great thing about grid is it works with the markup you already had to write. So when you sit down to start a project everybody writes the HTML first, right? We all want to, right? So when you sit down and you write out the HTML and it's semantic and it's beautiful and it's wonderful and all the elements make sense and there's an intuitive hierarchy of information and you know it's perfectly accessible and then you have to turn it into a layout and so you add a wrapper div then you add another wrapper div then you gotta put three sections together and those sections don't really go together so we have to add two wrapper divs. Now we're gonna absolutely position this other one so it needs a wrapper and all of a sudden now we have a page layout that if I read it, if I read the source code I can't really make heads or tails of it and it's frustrating later on down the line. I tend to think that when we're building a site it's not so frustrating. I get the layout, I just built it, it makes sense but if someone else on my team happens to need to jump in and work on it or if later on down the road I need to jump back in and work on it that's when I start to run into a problem. So again, we're thinking about our markup first and I just wanna show you an example of what is probably a pretty common HTML construct that most of us would be familiar with. It's an excerpt, it's a blog post excerpt basically. We have a title, we have a featured image, we have a little bit of information that I did not put in a paragraph tag we'll talk about that in a moment and then we have a button which is missing some additional information that it needs but I'm hoping that we can get past that. So we have all these elements, this is our beautiful markup, it's all ready to go. Here's a fun fact about Grid. The browser will assume that anything that doesn't have a wrapper has a wrapper which means that technically there are four elements inside this article right now. My title, my featured image, this random block of text and then my button. Why does this matter? Why do we care if that is an element or not? Well, the reason that we care, the reason that we care is that Grid will always show you or Grid will always arrange the elements that are the direct descendants of the parent Grid elements. So in this case, if article is our Grid element, these four items inside of it are Grid items. So if you're familiar with other frameworks that are sort of a little more BEM in nature, Foundation or Bootstrap or I use CSS wizardry Grids a lot or I used to, you kind of get the concept of what happens here. These are Grid items and then whatever styles I have applied to them will apply. Normally I would have to add a bunch of extra classes to tell them how big to be. I don't have to do that with Grid because we're going to do all of the layout inside CSS itself. Another fun thing that you can do with Grid is the same thing you can do with Flexbox and you can change the order. So if when I showed this original HTML you thought to yourself, well, I would definitely put the image on top of that title. You're probably right, most people would. Image would go on top. It's not really the best semantic flow of information because really the title should be on the top and so by using the order property, we're able to switch the order of the article title and the featured image so that the featured image appears on top. This is where I have to plug another passion of mine which is accessibility. Don't move things around with order on your page in a way that would make it confusing for somebody who is not looking at the visual layout of your page. This is one that I feel is an okay compromise. As a matter of fact, it's actually probably a little bit more accessible because someone using a screen reader is gonna hear the title first and somebody who is viewing the page is going to see the image first. So in that way we've sort of targeted the capabilities of the users who are using the site and we have enhanced their experience. There are ways to do this that will break accessibility and so as with any layout that you do, it's really important that you pay attention to adjusting the visual order of the elements in the DOM using only CSS. So I wanna talk through a few definitions and things that you need to know so you can talk about grid intelligently. So the first one is a grid container. This is just the element that contains the grid. If you were laying out an entire page on a grid, this would be your page wrapper. This would be everything. I do not recommend you ever put it on the body tag, however. Grid items as we discussed a couple of minutes ago are elements that are direct descendants of the grid container and again, this is kind of implicit. You don't have to say, oh, by the way, this is a grid item. It will just know, which also means that you can target grid items using nth child selectors which again allows you to do even more without adding additional classes or otherwise identifying your elements using HTML that isn't necessary. So we'll go back to our little example here just as a reminder that each of these four items is a grid item within the parent grid article. One of the things that makes grid really a little bit hard to wrap your brain around at first is the idea of a grid line. So when you define a grid, you're not defining columns and rows. You're actually defining the lines around those columns and rows and they're referenced by numbers. Line one, line two, line three, line four. They begin with the outer borders of the grid and you can reference them with negative values. So you can count backwards. You can say I need this to be the, or I want to specify that this block starts at the negative third grid line which means that it will place it three items in from the end of the grid. When I figured out how to do this, I think I jumped up and down at my desk. I was so excited because there are so many things that, I mean I used unordered lists and nth child selectors to make these things sort of happen but now this is a tool that is totally 100% intended for layout that I can use to make these things happen. So I just want to showcase a little bit what the line numbering looks like. What you're seeing here is the element inspector or the grid element inspector inside of Firefox Nightly. I'll talk a little bit about that later as well. And you can see that the line numbers go from one through six in this particular grid and then the rows, remember grid is two dimensional, there are two rows in this example. We'll talk a little bit about how this behaves responsibly later as well. Also I totally took this picture yesterday and decided that I needed to put it inside this presentation. It's beautiful here, right? So I also, for me a click moment with grid lines was thinking about it the same way I think about calculating substrings. And this goes back, for me this goes back to like computer science 101, which is a class I actually took a long, long time ago. And this is how I was taught to calculate substrings so that I could make sure I was getting the characters I really wanted. Grid lines are the same way. You're counting from the spaces between rather than from the columns and rows themselves. I don't know if that will help you, but it helps me. So a grid cell, very much like tables, is the area that's created by the intersection of a row and a column. It's not a table. When I was first introduced to CSS Grid, I was told that it is basically just, it's new tables, we're all going back to table layouts again, except for they're better. It's not a table. It's like a table cell, but it is not a table. The ways that it's like a table cell are cool, though. You can position things much like you do with Flexbox at the beginning, in the middle, or the end, at the beginning, middle, or end in the other direction within those cells, which lets you create a kind of infinite number of layouts that will also adhere to exactly the rules that you specify and then will automatically size themselves into the space appropriately. My note about vertical centering in Grid, it's another thing that just sort of works. The way that we would expect it to work, because I never understood why I couldn't do it with regular divs in the first place. And so this is just showcasing what a grid cell looks like. We basically just have the intersection now of the second grid line to the third grid line, and the first grid line to the second grid line of my row. I mean, this could be defined in that explicit way. If I wanted to target this cell, if I wanted to define this cell, I would say that it is the cell that exists between the second and third column line and between the first and second row line. And I'll show that in text as well. A grid area is like a cell. It's a little bit like call span and row span if we're gonna go ahead and use our table analogy. And it's the rectangular area that's defined between grid lines. And this can be a collection of cells, or it could be just a single cell. It's also a shorthand notation, and it's a really clever shorthand notation, I think. It can be confusing if you're reading grid layout that you didn't write yourself what exactly this means, but it's much like the example I just showed you. We're starting in the second row and with the first column. We're going to the second row, which means we're only in the second row, and we're going to the fourth column. So this is a block that's going to span two columns wide, three columns wide, and it's going to all exist in the same row. This would be a great way to center something inside of a five column grid. And track is sort of the gender-neutral way to refer to rows and columns. It's either a vertical track or a horizontal track. If you were fond of those analogies from the SATs, a row is a track, but a track is not necessarily always a row. That's a good way to think about that one. And then again, just an example of how rows and columns would be laid out. Grid gap is a really, really powerful tool. Grid gap is what we always used to accomplish in grid systems that use floats or a flex box with pulling negative margins and all kinds of things like this. One note about the gap, you can't put things into it. So if you feel like you need something in the space between, maybe you want a border down the middle of that gap or something similar to that, you should actually have another grid element there. You should have another track rather than trying to stick something into the space. This is a mistake I made early on trying to absolutely position things inside the gutters. Just don't do that. It's a mess. So I want to sort of give a simple example now of how we would lay out a grid that would scale with the browser, that would apply a set of rules that we define for it and that would essentially just create a plain photo gallery, very similar to the examples that I had just shown. So the steps we take to do that is we're going to define the grid first and we're going to add all of the elements to the grid and these are the steps we're taking inside CSS. And then we're going to let the browser do all the math for us. As it turns out, computers are super good at math. Way better than me. I mean, I did for a while learn all of the percent calculations for turning Ms into pixels and all of that and you can really move away from a lot of that overhead and allow the browser to calculate it for you and it will also then behave responsibly and predictably. So this is what our HTML would look like for my photo gallery that I created with all the mountains. And this is it. It is literally just a list of images. We don't have to stick them inside divs, we don't have to put them inside an unordered list, although we could if Symantec's called for something like that, literally just a list of images and all of the CSS that it took to lay out that grid fits in these six lines. And then I want to talk a little bit about what these definitions mean. So the first one obviously we need to say that this is a grid. The second one is that we're setting up our columns. We're using the repeat modifier, which basically means that we're going to repeat this pattern until we hit the edge of the browser, until we hit the end of the content. We're going to autofill the space. This is why, and this is how I think grid is the most powerful for responsive design. And I'll talk about autofill in a second. And then we're going to tell the elements, the images, that they can never be smaller than 200 pixels wide. And then one FR stands for one fraction, not one French or a variety of other things that I think it stood for. And one fraction basically means that if I divide this grid into equal parts, one of those is the largest this can be. So my element will never exceed more than that. And so what this does in effect is that if I have a grid that is 600 pixels wide and it fits three items, you have 200, 200, 200. That's as small as they can be, so they're never going to be any smaller. As soon as I bump that grid down to 599, three items will no longer fit in 599 pixels. But I can't make my items any smaller than 200 pixels. So grid will automatically reflow all of that content and say, okay, the highest number that we can fit in 599 pixels is two. And those can be up to one FR, which means that they can be up to one half of the space. And this is how grid will automatically take you from a three grid to a two grid as soon as you exceed the amount of available space. We also have auto rows set, which does a similar thing. This basically says that my rows should always, they should never be any smaller than 150 pixels, and then they're going to repeat automatically. This is what lets the elements do what you would expect them to do if you floated them, except you don't need to clear anything. And then finally, we set a grid gap because it was very confusing to look at all those mountains smushed together, so we put a gap around them of 30 pixels. And then we have a layout that is responsive, that behaves predictably and intelligently, and we've written six lines of CSS. We didn't even need a media query to do that, although we certainly could have one if we wanted one. Something you'll hear a lot about if you are working with grid or if you're doing research on grid is implicit versus explicit grid. Grid is really cool because we have auto columns and auto rows and this idea that everything will just sort of calculate itself. You don't technically have to define your grid at all. Your grid is defined by the elements that are within it and by these few lines of code. And then again, you can see we're using nth child and first child selectors to specify exactly what sizes we want, not what sizes, but what spans we want these to take up. So the first child is going to be two rows. The second child is going to be at the end of the first line and then it's going to go two columns out. And so by doing that, now everything positions itself around those elements and then it automatically calculates. This is a really fun one to test just to build these and then see what happens as you move your browser window around because that's something that real users don't do but we as developers kind of all do all the time. So drag your browser up and down and see exactly how it behaves and you can add predictability by then more explicitly defining grid elements but you don't have to. This is really, really powerful in particular if you build tools for people who are self-publishing their own information. Do you know anybody who does that? So really important thing to think about. You can introduce some unpredictability if you're not careful about testing it but it gives you a lot of power. So thus far we've talked about laying out components with grid and we've really just thought about everything very modularly. But now I want to look at an example of grid in the wild in a little bit more depth and talk about how we would lay out an entire page full of components with grid. So we're going to go back to our example of the Women and Girls Foundation website here and the first thing that you'll notice is that I've highlighted, let me see if I can zoom this at all. No, I can't. I will make my slides available on Twitter and other various places for y'all to look at after the talk. But you can see that the header here we've used Flex to lay out the header. It didn't make sense to put this header on grid because I have never seen more of a call for Flexbox than the whole centered navigation of variable width and things on the side. So this is laid out with Flexbox as I mentioned earlier. It's also pinned at the top of the page so as we scroll it's going to stick around and it should not really comply with any of the other grid rules because it needs to feel like its own element. This is a step towards us building something that feels like an application like a web page which is the direction that I think we're all getting dragged in whether we like it or not. The hero which exists immediately below the header also does not use grid. For a variety of reasons, not least of which is this tricky little thing where stuff has to live on top of the wrapper but also extend all the way out to the edge of the page. This is something that we could do with grid but again because grid is so modular and this same hero construct is used on pages throughout the entire site and it's very independent of what the rest of the page looks like and it's very predictable sort of using our older tools. Older is not really the right word here. I still think this is the best fit and when I said earlier, you know, Flexbox versus grid, this is another one of those instances where deciding what makes the most sense for the layout you need to build is going to take over from struggle to fit it on the newest technology just for the sake of using the newest coolest thing. So we'll go in and we'll talk about this initiatives block again and now that I've explained what grid lines are these should make a lot more sense to you. We have set up our template columns so that we're repeating by three and that each one takes up one FR. Each one is one fraction of the page. As I scale this up and down, you're going to see that those shrink to a certain point and then at a certain point they're going to flip over and stack on top of one another. That was a design constraint of this particular project but all of that again is specified with grid. In this section and these can repeat indefinitely as well and they also do have a featured image sometimes although this example does not. These are really like the cards that I explained earlier. We've set a grid gap of 30 pixels for this. Really, really cool that we can set our gaps and gutters in pixels or in other units. We don't have to just rely on completely fluid percent based units so things become very predictable and then this would be an instance where we could roll media queries in in order to adjust the grid gap sort of site wide if that's something that we want to do as we scale down towards mobile device where we maybe only want 15 pixels of gap between each space. Usually that's for applying for on the side rather than in the middle. These are arranged into two sections and you can see from the inspector here that this particular element is using grid. I can point with this mouse. I'm going to do that. This is our content area and this is the same content area that's actually applied to the entire website so if you were to go into a single post it's also going to use this same area. We have an empty grid space on the left and an empty grid space on the right. We could have done that with a gap. We could have said that we want a humongous gap there. It really didn't make sense for what we wanted to do and there may be a time where we need to put something into that space. The biggest thing for that is so if you have ads that you have to put on your site I'm sorry but if you do and those have to have a very specific size we can now predict how the rest of the content is going to flow around those and we don't have to scale them up and down or let them take things over because we're able to specify with grid an exact pixel width for example for this column if we wanted to. You can also see in the middle of this there's this label that says post. In grid we can define the names of our elements which means that we can also write our CSS in a way that humans can understand it better. An example of that is naming that block post and then later when we're specifying the styles for that we can use post or as you see here we can specify styles within the post block based on their names. This section here, the grid template areas should start to feel like an actual grid. It feels like a table, looking at it I understand. I have a header that spans four columns I have meta information that spans four columns a featured image that spans four columns and in grid if you don't want anything to live inside of a column you just put a dot in that space. So I have written four or five lines of very human readable code that have just decided how that entire post will be displayed and then inside the grid inspector you can see how all of those names get applied to each section of the page. Now the meta is hiding behind the featured image because this post doesn't have a featured image but we're able to name and define these spaces and then lay out a grid that makes sense. So all that seems really cool. And I too immediately said, why would I use this? How many of my users aren't going to be able to even see this? And then, does that mean I have to write my styles twice? In my opinion this is the biggest misconception about grid. I was certain when we decided that we were going to use grid for that Women and Girls Foundation project I was very sure that we were going to duplicate our efforts in styles. As a matter of fact, I prepared the people who track our time and our effective hourly rates for that. So just be aware, we're not charging the client to build the styles twice but I think we're going to build them twice. We didn't have to. It was not nearly as painful as all of that. So first of all, support is good. That's good, that's a lot of green. Some caveats to that. Internet Explorer of course being one of them. Some older versions of Chrome. A very old version of Chrome that probably nobody has. But it's really easy to target browsers that will support grid using a feature query. We essentially just say, hey, do you support grid? And we put our styles inside of that. The alternative to this is to write all of your grid styles first and then reverse that. Instead, write the command so that you're checking if it doesn't support grid and if it doesn't support grid then you add additional styles on top of it. One thing that is cool about grid is that it's sort of internal to itself. So you can have styles that you would normally put on something that grid will ignore. I'm not going to get into that in too much depth because that gets a little bit out into the weeds of how the browser renders the content and I think that that would be a much longer discussion. But it's worth noting that a lot of the styles you might potentially already have in place could maybe stay if you were looking at revamping something that was a legacy layout. So we'll talk about the big blue elephant in the room. That sort of works. Internet Explorer does it differently. It does have an implicit grid, which is cool. You still have that power. It will support repeat functionality, which I think is one of the more powerful tools inside grid. It will support minmax, mincontent, and maxcontent. And the only thing with auto that you need to pay attention to is that it's different. It's different for IE. And for me, what that has always meant in practice is just test. If I'm not sure if Internet Explorer is going to treat some grid code that I've written the right way, test. And test early. So test before you build a bunch of other stuff on top of it. You should not be discouraged about Internet Explorer's slightly different implementation of the grid spec. Basically, they're using an older version is what's happening right now. Internet Explorer's version is prefixed. So if you put at sports grid in your code, Internet Explorer is going to tell you no. And then you can leverage an auto prefixer. I assume there are others, but the one that I like is called auto prefixer. You can leverage auto prefixer or other build tools that will basically transpile your CSS for you. It will turn your CSS into IE-compatible grid code. It'll add the prefixes, but it will also translate things like the grid gap, which IE famously had a little trouble with and other things of that nature. You definitely need to place things manually inside. If you're using grid inside Internet Explorer and if your layout is very complex, this may mean that you don't use grid at all in Internet Explorer and that you use a fallback. You can use grid gap, but you have to define extra things. And again, this is what the auto prefixer is going to help you with. You can't count backwards. So that cool thing where I could say like the third from the last element should do this, you can't. You have to really think about things in sort of your regular Cartesian XY coordinates. And then like I said earlier, test. Test very early and test the whole time. If you're doing automated testing even better, but if this is a smaller project and you're not doing something like that, test it. Look at it as a human being and make sure that it makes sense to you. The only thing you want to be aware of is that at some point in time, Microsoft is going to remove the prefix. Maybe they'll play by all the same rules as all the other browsers and if they do, then the code you already had in place will continue to work and you probably won't have to do anything. If the rules are slightly different or if some of your code was sort of very targeted, you might end up in a situation where the removal of the prefix will break some of your layouts and you'll have to go pay attention to those. It will never be as bad as the time that Microsoft rolled out automated browser updates to Internet Explorer 7 and I stayed awake for 36 hours fixing every website we ever built that was using a weird hack for Internet Explorer 6. Now you all know how old I am. So I think some things that are important to think about when developing for Grid, first of all, being kind is the most important thing. But be kind to your design team. Let them know that you have this new capability. And if you are the designer, cool, like you already know what you can do, but let them know that you have this capability and make them aware of what you're going to have to do for fallbacks. So maybe you are going to have to serve up something completely different for Internet Explorer and the example that I showed you does have a different layout for Internet Explorer. If you make the design team aware up front that they're going to not only be presenting slightly different layouts for different devices, but also potentially across browsers, they can prepare for that and then you won't get angry emails that say everything is broken. This is also in turn very kind to yourself because you won't get angry emails that say that everything is broken. You should also be kind to yourself because this is new. There's a ton of information out there. You can do all of this research. Everything I presented, I have a resources slide, and when I share the slides you'll get actual links to these things. Everything that I'm talking about, there are a ton of resources that you can leverage. There's a lot of help out there, but it's new. And so if you lay something out that doesn't quite work with Grid, it doesn't mean that you're a terrible developer. It means that you need to learn how to do some things differently or you need to learn some new things. And then finally, be kind to your users. I did a little bit of Internet Explorer bashing which wasn't really fair. You still have users that use it. And I'm not talking about Edge, which is shiny and new, and I actually kind of like Edge. I'm talking about, you know, Susie who works at corporate who's never, ever, ever allowed to upgrade her XP machine. She needs to use your website too. And so pay attention. It might not be the same experience that you're giving her, but make sure that she can get to all the content. So a few more tips and tricks for working with Grid. Most of the examples that I showed were from the Firefox Nightly Grid Inspector. They are rolling out enhancements to this literally all the time. It's very, very cool. I don't know that I would be able to develop anything in Grid without it. You can essentially just click on any element that's built in Grid and it will give you all of the information about what you've actually put together, which can be incredibly valuable if you do have a weird inheritance case. So if you already have modular CSS and you've already built things into components, you might end up in some weird spaces with inheritance and this will help you find those and hunt down those bugs. The logo's pretty too. Grid is gonna help you to work smarter. You'll write simpler, more semantic HTML. The HTML that you write will look like HTML again. Oh, I miss those days so much. When I can just write HTML. I mean, don't get me wrong. I like the power I have now. But it will look like HTML again. It will look like content because after all, that's what we're doing. We're delivering content. So new developers will be able to more readily understand it. There's also the case for non-developers. People who dabble, who can write a little HTML. They know enough. Usually they say to me, why know enough to break stuff? Let's help them break fewer things. I mean, really, have you ever had to teach somebody how to set up two columns with short codes? It makes me cry. I write code for a living. You don't write fewer media queries. I think a lot of the planning that goes into building a grid layout eliminates the need for you to think in media queries, which in turn also lets your layout be a little closer to what I have always wanted, which is design-driven breakpoints instead of device-driven breakpoints. So what that means is it's intentional. It's not just because, oh, this happens to be where iPad is. It's because this is where it will look the most beautiful. This is where it will take the best advantage of the space available to it. And then, of course, you're going to write a lot fewer lines of CSS. I had a slide in here that showed all of the lines of CSS it took to build some of the grid elements that I showcased. And I took it out because it was horrifying. I think the point is clear. You can write a lot less CSS if you use grid intentionally. Grid also lets us think beyond the framework. You don't have to use 12 columns. Different pieces of your page don't even have to use the same number of columns. The columns don't have to be the same sizes. You're free. Fly. You can lay out anything. You can also use layout code that's specific to your content. And the design that you or your team have come up with, you don't have to sort of give your designers this grid and say, make sure everything you build is on this grid. Now, I know as a developer, I do not love relinquishing that level of control. I like being able to predict what the designs are going to look like when I get them. But it's important to move out of your comfort zone. You cannot just be bootstrapped for eternity. It can't. It's bigger than that. We're moving to a space where what we build is an application. And it's not a website anymore. Mix it up. Try something crazy. Maybe not on a production website that someone's paying you to build, but try something different. Use CSS shapes to make elements around your grid behave differently. Pay attention to what you can do. Follow some people on Twitter who are doing cool stuff with styles all the time. You're creating reactive layouts and eliminating breakpoints, which I kind of already mentioned here. This is truly responsive design. I think a lot of responsive design that I do is really technically fluid to a breakpoint or fluid between breakpoints. And it's not truly responsive. It doesn't think about things in two dimensions. You can do that with grid. So the slide is very, very simple because I am not advocating for a framework. I don't think that you should download a boilerplate theme. I don't think that you should say this is the grid based framework we're using henceforth and for all time. But there is a very cool theme that is an underscores based theme that is grid based. And it is a super cool starting point. If you're not sure if you're quite ready to jump in and start writing your own grid definitions, it's a great place to start. Like with any framework, however, it will be constraining. You will have to either modify it greatly or you will have to sort of fit within what it gives you. I do have a link to this in the resources slide at the end that I'll be sharing about it. It was where I started and I wanted to give a shout out to it. There are also a lot of resources that come along with it. And there is a talk that was given at WordCamp Europe that goes along with it as well. All very cool resources. So I promised in the abstract that I wrote two months ago that we would talk about whether or not your project is a good fit for grid. And then I wrote this talk and finished the talk and it wasn't just an abstract anymore and so yes, it is. The answer is probably yes. I can think of very few instances when a new build in particular would not benefit from some level of grid work. There are some things that you can ask yourself to help you determine if you want and how much grid you want to use. So like can you draw a grid on it? I'm not going to sing it for you. I'm not brave enough. But if you like it can you draw a grid on it? If you can, it's a grid based layout. Are you in charge of making or influencing design decisions? And this is an important one if you work with teams because the most amazing grid layout that does everything you want to design teams speck at a certain break point or is too different from what they built is not going to get the bills paid. So at the end of the day if you don't have some level of autonomy over the designs you may or may not want to use grid but this goes back to what I said earlier talk to your design team talk to the people you work with and let them know that there are new things available to you and that if they can give you some flexibility you can make them something amazing. Are you cool with layouts that differ between browsers? Yes, you are. You have to be. It's 2018. Your sites are responsive. You're making things intentionally different already. Your job as a developer is 50% making sure that you present the same information in a different way. So there are two ways you might start using grid right now. You can add new or replace existing components in a legacy theme. As I see it you can basically do this with every component in your theme until the entire thing was replaced with great components where they make sense. Because it happens in isolation new components are really good for this. I keep using the word component because it's really important to me that we think about design modularly like this. It has implications for your build process. It has implications for the way that you develop it has implications for performance. See me tonight after I've had a couple beers and I will gladly talk to you about performance until you are so sick of hearing about it that you can't stand. The other way is you can create an entirely new theme that is grid aware. This can either be modeled on an existing design or this can be a completely new design. I advocate for starting from the design phase with grid in mind if you can. So wrapping up I really love grid. I think that's probably obvious because this is a lot of power and it also lets us think about layout separate from content even more than we've ever been able to in the past. So I'll go back to my conclusion side. I hope that during the course of this talk I have shown you how you can work smarter so that your future work can be even smarter. I have shown you that thinking in patterns and building in blocks blocks feels like a thing, right? How many Gutenberg talks are here this week? This is important. Thinking about things this way helps and those CSS Grid and Gutenberg are not inherently tied together. I think that they can be and I think that there's a lot of power in that. Think in patterns, build in blocks. The fallbacks are easier than you expect them to be and let yourself be uncomfortable on purpose. This is not the same as what you did before. But if you've chosen writing code or front-end development or design as a career, nothing you do tomorrow is the same as anything most of the things you did yesterday. You probably learned 10 new things this morning and you've only been awake for a few hours. Be uncomfortable on purpose. It will make you better. It will make the Internet better. I'm getting very grand right now but the world is a better place when you step outside your comfort zone. I'm going to go ahead and wrap up there. I will take questions for a little bit and I actually don't know how much time I have left for questions, but I'm also happy to answer questions if you see me out and around. Yes. Thank you. Go ahead. The question was if there is a favorite learning resource for Learning Grid. I have several. These are all links in the version that I'll be posting on Twitter. Grid, by example, is excellent. Layoutland is a series of YouTube videos. Very, very good. CSS Tricks as always has great content on this. And then the Coon theme and the person who developed that also has a lot of great content on Grid. I think we're good. Thanks, everyone.