 Thank you all for coming to my talk. Dig in on Grid, modern layouts in CSS. Contact information I can be found on the interwebs. Very exciting. So who am I? Why should you listen to me? My name is Michelle, sometimes Jordan. I am a front-end developer. I currently am the lead instructor at Alchemy for the Labs here in Portland, Oregon, where I teach the first two programs as part of the full-stack dog script intensive curriculum. I was previously a prototyper contracting at Nike, and maybe before that was a graphic designer for a long time. More internet places. So layouts are basically a mess. Working with CSS is not so fun, and building layouts has been a mess for a really long time. How many of you have had to deal with using tables for a layout? That is fun. The slightly better, but still not so fun, using display table or display table cell to get the things positioned right. Floating things and the horror of clear fixing and where are all my pieces and how do I get them to line up? Positioning and how that works responsibly. All of that, kind of, like, there's so many different devices that you have to deal with now. It's not just print. There's all the different computers, laptops, tablets, phones, TVs, gaming systems, handheld systems, watches, the Alexa that talks to me in my kitchen all the time. My car has an internet browser in it. And dealing with all of those different devices and the number of them growing every day is insane. How do we actually handle this? How do we handle all of these devices, like dip soup? If you're not familiar with dip soup, it's display flex. So the first tool that I love for this is display flex, which is the Flexbox. So flexible box model, most commonly called Flexbox. And because of how CSS3 works, where instead of the entire spec being released at once, individual modules were pushed forward, Flexbox came out before grid. But that doesn't make grid a replacement for it. It is its own tool. And it's designed for one-dimensional layouts. So just creating the column or just creating that row, it's really good at what it's supposed to do. Whenever you're looking at new CSS, the first thing that my boss always asks me is, well, yeah, but what's the support? Can I actually use this? Yes, Flexbox is totally supported. Pretty much universally at this point, back support's pretty decent. Internet Explorer, as always, has their little astros by them. Special treatment, you need to use a prefix for it. But if you use that prefix, you're going to hit 97% of your audience. So that's pretty good coverage. How does Flexbox actually work? You can have that blue box, which is the container parent element that holds your flex items. And you just turn on your display flex. You can really easily change the direction of your elements inside of it. So by default, it kind of just goes out in a row like that. But you can switch it to column really quickly with just that one line of CSS. And now you have your elements rotating on top of each other. You can set it to wrap or not wrap, depending on how you want it to behave. And use justify content and align items to place them within the parent container as you wish. Then you get some extra properties that you can use to control the items inside the orange boxes more independently. I really like using order. For accessibility, you might want to have your HTML code in a specific order that has the most important things at the top of the document and works your way down. But when you're actually building your page, maybe your sidebar is going to be first, or you're going to have some ads or things that kind of get moved around. So you can keep your HTML code in the correct order and just use this order property to move it around visually. That helps for screen readers and things like that so that your non-sided users can view your content in the way that makes the most sense. You also get flex, grow, shrink and basis, which are kind of a little weird to work with. And they kind of condense into the shorthand for flex, which by default is of a 0.1 auto. So it defaults to flex, grow of 0, meaning that the item won't take up any extra space. It's just going to be whatever size it is dictated already by the content. Shrink is 1, so it'll shrink at the same rate as everything else. And again, auto on the basis means it's just going to be whatever size it needs to be. You can change the flex, grow property to be any number you want. And what it does is it'll divide all the extra space after the elements that are there, take up what they need, and give that extra space to those elements so that the elements themselves will grow at whatever rate you give it. This allows you to make items grow and shrink at whatever kind of however you want. But it doesn't necessarily mean that if two elements have a flex, grow of 1, that they're going to be the same size because it really has to do with the extra space. That's how it's divided up. So I use Flexbox most frequently on nav bars. It's kind of one of my favorite things. Really good, quick example. So if you start with some basic HTML, basically just a nav container with a menu toggle button and a div that holds some links in it. You kind of get that, no styling, nothing fancy. Start styling it. I'll just kind of turn the button and make it really big for mobile because we're all very good developers and I always remember that you have all the first development. So then start to flex some things. You turn on your display flex, change it to columns, and put the things in the center. And you're starting to get a little more of a drop-down menu like you would see on mobile. Some pretty things for hovers. So you kind of get the hovers on the drop-downs. But on mobile you don't want the whole menu to show all the time because I'm not a JavaScript person. Turn off display flex, turn on none so that it hides the menu. And you do the turn on a hover just on the menu button. So now when they hover over the menu it drops down and when you go off it would disappear. This works really well if you do JavaScript with quick events because you can't hover on a phone. But a quick example in CSS. And then you just in a media query change it to the flex direction, change it to row, and you end up with this really responsive nav bar with almost no CSS. It changes the direction for you really easily just by changing that one property and makes it pretty easy to do kind of the standard nav bar pattern. Some of my favorite sites for dealing with Flexbox. You get your CSS tricks which is pretty much my go-to guide. I don't think I've ever written any Flexbox code when I don't have this website up. Flexbox Froggy which is kind of this fun game where... So you have to figure out right Flexbox code to get the frog onto the lily pad. And you know the first level is pretty easy. You're just going to do like a justify content. Do flex and it's going to jump to the lily pad. And there's 24 levels of it so once you get up to 24 things get a little fun. But you can just write Flexbox code to move the frogs to the correct lily pads. So kind of a fun way to play with Flexbox and kind of really see what it can do. So this last one which is a flex floor which is kind of fun. You can kind of hit the buttons and add extra pieces. Kind of change the different things to see how it changes what the code looks like. It gives you the code with the prefixes that you need. So one way to play with it and see what your prefixes are. Can you go back just to the... I will definitely tweet out a link to all of these because I have a whole bunch of links at the end. So the other tool and probably my favorite thing right now is the CSS grid. I got in trouble when I was working at Nike for a while because every time there was any problem in the code and anything was broken I'm like hey let's fix it with CSS grid. And they're like okay but we're not connected to the database. The CSS grid is the answer. Sometimes it is. So CSS grid again it's not a replacement for Flexbox. It's its own tool. And what it really does well is two dimensional layouts. So when you need rows and columns. Can you start today? Most likely. I'm not quite as good in support as we have in Flexbox but it's still pretty decent. And if you look at the percentage of global users you're at almost 88%. And there's also fallbacks for older browsers. You can use feature queries which are kind of like media queries except for you can target specific CSS features. Which allows you to target browsers that support CSS grid. And have a fallback layout for those that don't. So there's some new grid units that were introduced that kind of do some fun things. So we have this idea of min content. Which, a little weird. If you take a paragraph and you set the width to be min content. It will basically find the longest word in your paragraph. And that will be the width of your container now. So you end up with like this tiny thing that just like all the way down one word on the line pretty much. But it has its uses. You get the opposite. You get max content. It will take the entire paragraph and say I need to put this paragraph on one line. And then you get something that goes way off the page. But again, it has its uses. There's this idea of an FR unit which is a fractional unit. So you can have one fraction of the page or two fractions of the page. And it kind of allows you to do percentage without really dealing with percent. And then you get this fun little CSS function-ish thing called min max. Which when you're working with grid, you can't set a min width and a max width. Those properties don't work on a lot of the grid cells, I guess. Because it is kind of tables. So you use this min max and you would put like what you want the minimum and the maximum to be inside of the parentheses there. So actually taking a look at it. When you do display grid, I like to write my CSS like one line at a time and then see what happens. But when you actually type in display grid, nothing happens. It looks exactly as it did before. So you have to start doing adding in your columns and adding in your ribs. So you do that with grid template columns. I'm pretty obsessed with this repeat thing because then I don't have to type out all the different pieces. Here I'm only doing four, which is not bad. But if you wanted to do kind of your standard 12 column layout instead of having to type that out 12 times. You just use the repeat. You can also do it kind of more standard way by pixels or any of the units that you're used to. Like I did here with the rows. By default there is no gap between the columns or the rows that shows here. I only have it in my pictures that you can see and I'm not just creating lots of boxes on top of each other. When I was working with kind of creating these grids by myself before CSS grid, you know you do your percentages, whatever, you get your columns. And then you start adding margins and padding and everything goes and breaks and goes up to the next line. You have to figure out how to make that work. But grid gives you grid gap column and grid gap row, which sets that for you automatically just on the inside. And you don't have to recalculate and figure out what size do my things need to be. It just kind of figures it out. Working with grid, there's this idea of explicit versus implicit grid. So you have the part of the grid you've defined. So kind of in this case that gray area where maybe you've said, okay I have my three columns in my two rows. But then someone's gone and placed this item container way out here where it's not actually part of the grid. What CSS grid does for you is it implicitly creates the rest of the grid. So it'll figure it out. So maybe I had three columns of equal width. So now all of a sudden I'm going to have five because I placed that item there. And it'll recalculate it all for you and just do kind of what you needed to do in that way. Sometimes it makes it a little weird to work with. Because you don't actually have to define all the things. You just start placing them and it builds the grid for you. Don't usually recommend it. Because then you just kind of don't know what's going on a lot of times, but it does work. When you're placing items, you kind of use the lines of the grid. And because computer science, and we always start with zero index, grid follows suit by starting with one. So we name our lines one, two, three, and four. But to be also more confusing, we also give them negative numbers. So that far line on the end is line four or line negative one. And we'll refer to it either way. But let's say you have a header that you want to stretch across your whole page. If you tell it that you want it to start at line one and end at line four, but you later change the size of your grid either through the implicit or explicit grid, now all of a sudden your header is not going across your whole page. If you set it to start on line one and end on line negative one, it doesn't matter how many columns get added in. It's always going to be across the whole thing. Or if you have a sidebar, you always want it to be on the far right of your page. And you don't really care how many other rows, their columns, there are. Do the same thing. Set it to start at or to be on line negative one and just work backwards. If it needs to be two columns, you can say start on line negative three and go to line negative one. And so it allows you to kind of set your pieces from either direction. It works the same with the lines going the other way. I just don't think I put the numbers in here. So for me, at least, all of that stuff is kind of cool, but nothing special. I could have done that with tables if I really wanted to. Where grid really started to click as this awesome tool was when I started working with grid areas. So you get this kind of weird rule, grid template areas. And you can name these pieces anything you want. In this case, for fitting it into the space, I used the super handy and useful variable names of A, B, C, and D. I just told you exactly what everything is. But that's okay. So you would do this, and basically you can take another div and give it a grid area of A, and that grid or that div would automatically cover all of that space. You do the same thing. That's on B space, our C, and our D. And you get kind of that standard layout. You have your header, you have your footer, you have a main content area and a sidebar. Your content area and your sidebar will always be the same height. Your footer will stay at the bottom, and it's just done. That's all you need to do. I keep looking for the trade. Where's my gotcha? But I haven't found it yet. So it kind of brings you to grid or flexbox. I'm getting really tired of arguing with people. Grid is not a replacement for flexbox. They're separate tools. They have their own place. And you should use both and use them together. Unfortunately, that also means there's still a place for floats. But that's mostly to float your images so that the text goes around it. What the tool is actually built for. So this is a really cool example. It has a typo in it, but that's okay. It still works. So there's this site from Jen Simmons, and this one, there we go. So as you make the page smaller and larger, it automatically resizes all of these kind of spices for you. And it has a whole lot of breakpoints if you're zoomed out a lot more. But if you actually look at the code for it, basically everything that it's doing that does all of that is that one line. There's no media queries that you have to use to create all these different breakpoints anymore. So all she's doing is on her grid template columns. She's setting it to repeat. But instead of telling it how many rows or columns that she needs, she's just saying auto fit. So put as many columns in as you actually need is what she's telling the browser. And the size they should be is at least 200 pixels. And at most one fraction. So it ends up breaking it so that the pictures never get smaller than 200 pixels. And if they ever would, it just creates another row for you, breaks it onto another line. There should totally be a comma between auto fit and mid max. But otherwise it works really well. I've used a lot of Bootstrap in creating all the different breakpoints. Now you don't have to. You just kind of throw that one little line of code and no more media. Definitely recommend checking out Jen Simmons' website, labs.jen Simmons.com. She has so many great examples of using grid and responsiveness on this. And she has all these different examples of using grid and flexbox, which are really great to look at. She has a series on YouTube called Layoutland, where she goes into detail explaining how all of these different pieces were created. Kind of spacing the content at all kinds of weird places. It's all just using grid and makes it a lot cleaner than dealing with tables. There's also this one that's kind of fun to play with, where she's kind of taken that modern art piece that we all know and made it responsive. So that's a fun thing. And just a lot of different things there to play with and look at and kind of really see like what can grid do. It does look a lot like tables, but it can do a hell of a lot more. There's this website, see it's this grid.design, where once you start using grid on your site, you create a PR on GitHub and add your site to it, so other people can see how you are using grid and cool creative ways. And these two humans, just know them. If you're interested in grid, if you're interested in flexbox or anything new in CSS, look at all the things they do. They pretty much are the experts on this topic. They have a whole bunch of different resources for you, definitely worth checking them all out. When I first wrote this talk, like two days later, Rachel Andrews released a new class on CSS Grid, and it has a free code to try it for two months. So definitely worth checking out if you're getting started and want to know how to do it. And a whole bunch of links, which again I will tweet out after the talk. There's now questions, I guess. That's most of what I got. That kind of went a little faster than I thought. Yeah, like, yes, you still just need queries as much as I say you don't. Add a media query that changes the grid template areas. So maybe CC goes below, it becomes like a to call and thing. And you just have like AA, VV, VVCC, DB, whatever, just kind of like that way. But it moves the stuff forward, you don't have to kind of deal with it that way. But it doesn't make it a lot easier to move the different pieces around and just lay out an entire page. I usually use much more descriptive names, but we're fitting it into a small space and still being able to see it all. Fun letters. Basically it's just saying that they should all be the same size, one fraction of the space. So I can get larger than 200 pixels, but they all have to be the same. And if they get so big that it doesn't fit, then it just kind of breaks to the next line. Too small, it breaks it off to the next line. And then we put the last column in there. And then once it like, like, all of the power. All of the things I can do with this, all the hours. More about the positive lines, the positive rows. Sure, do you have a specific question? So basically each row has a column. If our rhyme is po, row one, column one, first column. So the first column is from line one to line two. And if you had a dip that you wanted to take up that first kind of cell, you could tell it. You know, grid, template row, column, you know, grid to column start. You start it on line one and then you can either do like a span for how many cells you wanted to span. Or you can give it an end line. So you can tell it, there's another rule that you give it for where you want it to end. So if you don't know, you know, if you don't know that it's going to be four columns, sometimes it's going to be five, sometimes it's going to be six, and it's going to be three, you can say I wanted to end it minus one. No, it's not. But like when you first look at it, why? It doesn't make a lot of sense. But when you start dealing with, I don't know, but I never code the right thing first time. You know, maybe I think I need four columns, but as I'm building it out, I change it. I end up with like six or 12 or, you know, 30. And not having to go back and change it everywhere is really nice, because I know my header needs to go across the entire page all the time. So it doesn't really matter how many it spans. If I'm trying to do the vertical centering, I'm always using Flexbox. But you can, there's lots of nesting, you know, build your main page layout using grid, and then individual little containers you can turn on just display Flex4 and center it how you need to that way. But when you're using kind of the grid areas like this, automatically it's going to make your sidebar and your main content area the same height, because I've said that in my very visual piece down here. So it just kind of does that for you. And what I found really fun is when you can kind of set your header, your sidebar, and your footer, and everything else, and keep them kind of fixed in place and just have that content area scroll, everything on the screen all the time. So I'll do like, I'll use the viewport height units to define my rows. Set like the header view 20 viewport height, the footer 20, and then I'll set it at like 60. Turn on like overflow scroll on my content, and just let the content itself scroll, and then everything else kind of stays fixed for you. So you mentioned setting order in Flexbox to aid in accessibility. Would you say the standards for accessibility between the two technologies are similar or the same right now? I mean they're both newer pieces, so they definitely have a lot more accessibility built in. And I definitely think they give you more power to keep your kind of content in a good order for the screen readers, but also have a visual layout that you find appealing for your seeing users as well. But I have not done a whole lot of accessibility work on grid. Most of it I've done with Flexbox in the past. They don't let me use grid as much as I want it to work. Explicit versus implicit grid. So, all the things, there we go. In this case my code would probably look like, you know, display grid on my parent container, and then I have grid template columns set to three. So I have, you know, repeat three comma one FR, three equal columns. And I have two rows. But then I've gone and I've specifically said, hey dot item, this little item class, I want you to live at, you know, start at line column five and end at column six. And that doesn't exist in my three column grid, or my three column grid. So it kind of implicitly creates the rest of it for me. So now instead of having three columns, I end up with five, so that I can place this item on that fifth column. Which means that all of my ones that were one FR at the beginning are still one FR. So for now I have five of them, even though I never specifically wrote that out in my code. The grid has been more two-dimensional, and Flexbox is more three-dimensional. Usually with Flexbox it's just one. Like if you're just dealing with the column or just dealing with a row, you can turn on wrap so that it goes onto multiple lines. And I tried using that on a lot of like galleries, photo galleries, and things like that. But if I set my flex row to one so that they all kind of fill the space they need, and I have a weird number, so maybe I'm like four across most of the time, but then on the last line there's just one oddball, all of a sudden my last item is huge, because it's going to spread to be the whole page. What I don't always know is it going to be one item, it's going to be two, it's going to be three. So it's hard to like write the code to say, no, no, these last couple of items don't grow, but all the rest of them need to grow. Whereas grid will kind of allow you to do that, and they won't grow into funny sizes. Again, helps when you accidentally move things that are past your grid that you defined. Of course, using these tools together you can get some really responsive layouts without a whole lot of extra code being thrown in, you don't have to kind of redo all the things. You're just changing one little part, like just changing the order or the direction on the flex box, or within grid, just redefining your template area. But you don't have to change the content or pieces like that, you just change it in one tiny little place. So much less code. These work really well for kind of items that repeat a lot. So when you have like photo galleries and things like that, there are really good ways to lay out all those kind of cards or tiles that we always have to build, which makes it nice when you don't necessarily know what the layout is. A lot of working within WordPress, you don't know what the end user is going to create if you're building a theme or things like that. It kind of gives you the power to handle those, I don't know what's going to happen in the situations. So the item automatically creating, expanding the grid, is there any way to tell it to do, never expand past what I defined? But I get reaction with saying no, that you can break things badly by doing that, because it wouldn't know where to place the item anymore. So I think it's just automatically going to create that implicit grid for you. Most of the grids I've written, I've never defined my rows. I just kind of let it implicitly decide what number of rows I need and how tall they need to be. I generally will just do like a single column kind of basic, just shows the content as my fallback, because I think it supports enough users most of the time. Kind of depends on the company you're working for and what their specific market shares are on the different browsers. But I will do a really basic kind of fallback for the ones that don't support this, because the whole beauty of this is I don't have to write floats anymore. So I don't want to write, spend all that effort to write a fallback layout that no one's really going to see except for a few people here and there. But using, well, one thing I love with CSS is that when it fails and it doesn't work or the browser doesn't understand it, it just kind of fails silently. It's not going to throw an error. It's not going to make the whole page disappear. All my JavaScript code, when I write it badly, which is most of the time, it fails spectacularly. My entire site disappears and I don't know what's happening. But when a browser doesn't understand the CSS, it's just going to be like, okay, well, I don't understand what you're telling me, so I'm just going to ignore you and move on. So the browsers that don't understand what's happening in Grid, we'll just kind of ignore it and kind of default layout whatever it would be without the style that you give them. At this point, I'm using, like, Post-CSS or one of those tools that will auto-prefix for me. Do you have some Sassimus? It's a little bit of a pain because you're passing it. It's very difficult. Yeah. I'll end up piloting each other. Yeah, I have a site for that. I would bet it on those ideas. It's all piloted. Yeah. I'm making better. Yeah. I'm going to try that. I haven't done a whole lot with checking my name older browsers, but with what I've done, it worked well enough that I ignored it. When I was at Nike, I had the benefit of none of the code I wrote was ever going to production because I was on a prototyping team, so my code had a 48-hour shelf life. So I didn't have to worry about those kinds of things because all the people that were using it were going to be using the latest version of Chrome. And then now a lot of it is, like, I'm using it on personal projects and things like that. So I'm like, well, if you don't have a good enough browser, I don't want you to look at my website anyway. I do understand that not everyone can be that mean. There's definitely a lot of ballbacks. In Jensen's layout land, she has a whole series of videos that are just on doing these modern layouts and dealing with how you have to manage them for the older browsers. Running this morning has been carbon. I don't know if I'm taking it over here. I mean, I got here like two minutes before the talk started. Sounds like talking really, really fast. Oh, that's who I thought. I have five minutes. Do we have more questions? Yes. There's also a new spec for some grids that is in the process. It hasn't been released as a recommendation. That will have kind of nifty ways of dealing with nested grids. That makes it easier. But for now, yes, you can definitely nest. Yes, you can nest all the things. I've had a couple of fun layouts where I've started with grid, nested a flexbox inside of it, an inside of a flexbox item, nested another grid. But you can totally do that. Like, if you have a grid for the whole page, then you're using a flexbox maybe for some tiles. But inside of those tiles, you're going to use grid to define the tile layout. You can do all the nesting. Just no more div soup, please. No more div soup. Each month, I have just so many more semantic elements. No more divs. It's still a little better. Usually, there's not a whole lot of nesting. I think three levels deep is the most nesting I've done with like grid and stuff. And while I said that a lot of my tiles are using react and components, so you see the nesting a lot less at your working in your code. And the semantic elements for accessible... Yes. Just react now. Partly. Okay. I can't read. I should be able to. I'm teaching almost four month course on it. I haven't quite started teaching that one yet. I'm still working on the first two classes right now because I'm rewriting a lot of the curriculum because I was sad because I was looking at some of the developers coming out and they didn't know a lot of the fun CSS and front-end things. It was a really challenging program. So I've been really rewriting a lot of the front-end, adding in all this cool stuff, teaching the new grid, flexbox. Is that an online course? It's an in-person camp in Portland. It's like right across the street from Powell's in downtown. Six months from here. Looks like it's all... Alchemy Code Lab. I think I've answered your own question already. I have folders and folders and folders of sites that I think are cool. I spend a lot of time just kind of browsing through the fun things on CodePen. That's a really good place for people who have kind of fun little front-end pieces and just pulling up like little things. Like I'll just search for navbars and find a whole bunch of really fun navbars that I've never thought of. And then you also have some starting codes go from and see kind of like how does someone else do it. And my code tends to racial anchors, of course. Yes. I also have that problem.