 This is Dan Roberts. He would be here today if we didn't have coffee because he likes coffee. Dan also works at Automatic because they're three years, four years, just over three. So Dan's going to tell us all about CSS Grid. Welcome, Dan. Woo-hoo! Woo-hoo! Thank you, thank you. All right. Let's get started. CSS Grid Layout is a specification that introduces a two-directional grid system to CSS. Grids can be used to lay out major page areas or small interface elements. You can do this without the need for a CSS framework or any of the positioning tools or floating hacks that we needed to rely on. So the idea behind the grid is that you take an element on your page and you set it as the grid container. Like the white carrier right here would be the grid container. And then you slice up that element and you can take probably great items once it's sliced up. You can place them anywhere using the grid areas that you define. So much like Flexbox, the whole concept behind CSS Grid is about the relationship between the container and the items. When you set an element to display grid, all the child items automatically become grid items. So there's no actual display grid item property or anything like that. It's all displaying that definition on the container first. So I'm going to begin by walking through some key terms and concepts and then we'll get into a couple of actual examples. The first couple of terms we've already touched on but I'll just cover them over quickly just to stick with all the rest of the other terms. So a grid container is what we're very talking about. It's all of it. A grid item will be any item as a direct child of the container. The vertical and horizontal lines that divide the grid and separate the columns and rows are called the grid lines. They're numbered left to right and talked about. They also respect your language direction. So if you're coming from a right to left language, it will go right to left. Also one good key point is that grid columns and rows, they're not numbered by the actual column or row itself. You always have one more because it's actually numbered by the grid lines. So here you have four but you notice five grid lines. Later on when we start positioning items, you'll notice that we actually go by a grid lines. So the space between two grid lines are referred to as grid tracks. And they're just really another word for columns and rows. The vertical ones are grid columns and the horizontal tracks are grid rows. The space between the rows and the columns are referred to as the grid gutter or the grid gap. You create space and you're grid by grid and gutters and they're similar to margins. A grid area is a rectangular space surrounded by four grid lines. A grid area can contain any number of grid items. So here I'm giving four grid items but it could be two, maybe one. To understand how explicit grid tracks work is part of the fundamental understanding of CSS grid. If you do not explicitly define a track, it will be implicit. That means that the browser will automatically fill in the remaining items that don't fill into the defined tracks. So let's consider this markup and then our styles here, we have explicitly defined four columns by 200 grid columns. If we did not define them, we'd have one column and it would just be stacked on top of each other and we'd have the whole 100% of the width of the container. Once we define the columns, the built browser needs to put the remaining items somewhere. So here we define four columns and so you have four items. And once those items are placed, there's four more and then you use to put it somewhere else. So you explicitly loop it down and set them in as a row but it will respect the column definitions. So we have four explicitly defined columns but we have two implicitly defined rows because we haven't defined any rows up here. Similarly, if we do define a set of rows, so if we use grid template row up here and we did define some rows and there are more items that fit into the amount of rows, they would again loop down below and be explicitly defined rows. So let's quickly go over some of the properties that I'll be using since these are examples. I'm not going to cover all of the properties in the specification but I think it would be helpful to just cover some of the first. Grid template columns and grid template rows define the line names and track sizing functions of the grid columns and rows respectively. In short, these rules are used to explicitly define our rows or columns. So I'll give you an example. Grid auto columns and grid auto rows specify the size when implicitly created column and row respectively. So here we're defining all of our columns that are implicitly created to be 200 pixels wide and 200 pixels tall. So that will create each element that fills in after will take on those dimensions. Grid row gap and grid column gap specifies the size of the grid lines, setting the width of the gutters between the columns and rows. And this is just a shorthand grid gap that you saw earlier. This is a shorthand for the grid column gap and grid row gap. Grid template areas define the grid template by referencing the name of grid areas that are specified in the grid area property. I'm just kind of glossing over this one here because we're going to cover it more in an example but just mentioning it. Grid column start and grid column end specify a grid item start and end position respectively. So here we're setting the element with the class item 1. It should cover two columns in width. Because again back to the rows, there will be two columns and then three grid lines. So you use the grid lines instead of the actual columns. Grid columns is shorthand property for the two where the first value is the start position and the second value is the end position. Grid row start and grid row end specify a grid item start and end position respectively. Building off the previous example, we're now setting the element class item 1 to span over that would be three rows high. So this would be two rows wide, three rows high. Grid rows is shorthand property for the two where the first value is the start position and the second is the end position. Same as grid column. So now that we've touched down what CSS Grid is, we've covered some key concepts and terms. Let's go over a basic example to see how you do that. Here's the markup we'll be using. Nothing special, just a container with some child elements that it is. Note that the marker doesn't have to be written this way. We're just doing so for the sake of simplicity. You can use non-ordered lists, really anything that gets displayed grid that automatically sets the children's items. It's not going to be relying on your marker. So here on styles, we're setting the outer element as the grid container by using display grid. And as I mentioned previously, they're just going to stack on top of each other. Not that impressive just yet. That's because simply setting display grid doesn't really do that much in and of itself. You still need to slice up the container into columns or rows. So let's do that. There's a set of four columns of 200 pixels wide and two rows of 200 pixels wide explicitly. We've also set a grid gap of 15 pixels. The result's much better and it's not too bad if there's four lines of CSS. There's still room for improvement though. For example, what if we want the grid items to fill up all of the space? Along with CSS Grid comes some really handy units and notations. The FR unit and repeat function. The FR unit is a new unit of length which is short for fraction of a fractional unit. MDN finds it as a unit which represents a fraction of the available space in the grid container. That's important, the available space part. In this example, we've rewritten the grid to columns to use FR instead of absolute pixels. We can improve on this further with the repeat notation. Instead of repeating the same value over and over, we're now wrapping the value of V. The second argument of repeating is the value that you want to repeat it. Well, the first argument is the number of times you want to repeat it. This allows a reoccurring pattern to be written in more compact form. The result's the same as the length of the grid container. And now that we've placed the pixel values with a more flexible F-R unit, we see that the grid items now take up a full width of the container. So what's happening here is the FR units are telling the grid to fill in all of the available space with four evenly spaced columns because we're using four and repeating the same unit. So they're all going to be the same. But you don't have to stick with one unit of measurement. You can, for example, mix pixels with the FR unit like you see here. This can be handy if you want to have a part of your grid take up a set amount of space and then the rest of the grid to kind of stretch around it and fill in the rest of the space. And that's kind of where I was talking about a minute ago, where filling the available space is key when you're mixing units. So the way this is calculated is that the pixel values are calculated first. And then the rest of the space is given to the FR units. Another way to look at it is to think of FR's free space and then think of like an absolute value of what pixel is taking space. So we've covered some basics. Let's start placing some of our lines. There are items on the grid using grid lines. So by default, as you've seen, each of the grid items will be placed automatically in the default order. We want to customize the grid beyond that default layout where we can position items using grid lines. So using pretty much the same container market, I added number nine. But other than that, it's the same container market as our previous examples. We can start to target individual grid items for fine-grained control over a more complex layout. So here we're setting the specific start and end positions for grid item number one to span across two columns and two rows. So you're just going to grid column start and grid column end position. For number nine, I'm actually placing it in place of item six, where six would default right here, and it shifts everything over. So the items that we don't position will attempt to fill in and span their default angle. Here's the same code from the previous slide. It's just assuring our property, which I like to use a lot more. So each item represents the starting point and the end point. We're not limited to position items via line numbers. We can also use named grid areas with the grid template areas and grid area properties. That's what I kind of glossed over from the slides ago when we were covering terminology. Here's a basic page layout that we're kind of going for here. Here's the markup that represents that page layout with the header, sidebar, content. So this block of CSS is pretty similar to the code in our previous examples, the main exception being the grid template areas property. So repeating the same item or, sorry, instead of replacing each grid item individually, we can define the entire layout with this property and then assign the different areas to each item using the grid area property. So when we repeat the name, the area across with the grid items span across those rows or columns. The number of area names you list out as rows and columns is based on the number of rows and columns defined in that container. So you can look at this definition and visualize it as the actual grid. So for example, we have two rows or two columns that we can find here and you have two columns here and then you have three rows. The header will span across, the footer will span across, and then the sidebar and the content will split. And since I'm mixing units that have 200 pixels in one half hour, we'll have the same effect from the previous examples where we have the two columns that were 200 pixels. The sidebar will be locked in at 200 and the content will span. And you get the same result that we expected. So let's talk about DevTools. CSS Grid is hard to visualize because it's made up of columns, rows, traps and gaps, which aren't actually elements in and of themselves. DevTools are helpful to visualize what's going on. What Chrome DevTools are pretty good. They're getting better. I still think the best option right now are Firefox developer. The DevTools from Firefox developer edition. So the DevTools in Firefox developer edition has a layout panel and it lists out all the available CSS Grid containers on the page and it includes an overlay to help visualize the grid itself. You can choose what you want displayed on the overlay. That includes grid line numbers, area names, and even the color of the lines. When displaying the overlay, all of the lines represent something. For example, the solid line is the start and end of the explicit grid. The diagonal line is the grid gap. And then the dark dash line represent an explicit trap. You can find columns that have an explicit trap here. And then the smaller, the lighter diagonal lines they represent an implicit trap. There seem to be a couple of common questions that I have as I heard people talk about CSS Grid. The second question is when G is created an implicit flexbox. So I'm not going to cover this extensively, but I do want to touch on the main difference between the two specifications. And that is flexbox takes on a one directional approach and gives the container an element of the ability to alter its items to the best ability available space. With flexbox, you control the additional flow or you control the directional flow to be either rows or four columns. And then the explicit grid on the other hand takes on a two directional approach and it allows you to fill both the space in container and the container's rows and hand columns. So while there's certainly some overlap in cases where you can use one or the other, there are definitely those situations where you want to go for one over the other. Another thing I've heard, and I just heard this the other day, is that kind of reminds me of HTML tables and how is it any better at different HTML tables. And I think it's a fair question considering there's a lot of terminology kind of overlapping together too. Your common language. There are main reasons why you shouldn't use HTML tables for layouts and why CSS grid is different. HTML tables for one were designed for tapping the data. Early on people use them as a layout hack because browsers support for CSS across different browsers is really poor. Using table for layout also reduces accessibility for visually impaired users. Yeah, but from screen readers tends to be confused by the complicated markup data tables. Also because the markup is complicated in tables, it tends to be more difficult to develop and maintain. Lastly, tables are not automatically responsive, so proper layout containers, or proper layout, the containers will expand to 100% the width of the parent element by default. Tables on the other hand are sized according to their content by default. So because of this there are extra measures needed when you use a table-based layout to work across devices. Speaking of responsive, pairing CSS grid with media queries allows us to make code adjustments to our layout with a small amount of code. This shows the flexibility of using CSS grid for our layouts as opposed to something like HTML tables. In this example, we're shifting elements, spanning and positioning at each break point. It's not necessarily a real-world example. I mean it could be, but I'm really just using it to illustrate the flexibility of this specification. We've retrieved the previous layout. We've shifted the small amount of code. On the screen here, it looks like a lot of code. It's really just like small amounts of code within each media query. It really isn't that much code at all, considering everything. So lastly, the question that's probably on everyone's mind is, can I actually use this today? What's the browser support like? So with any new feature, I highly recommend that you study your analytics and determine if this will work for your user base. That said, browser support for your CSS grid is actually pretty good. So in addition, there are a couple of useful things to be aware of when considering fallbacks if you do need them. So browsers ignore CSS that they don't understand. So a browser that does support CSS grid or actually doesn't support CSS grid comes across a grid-specific property you'll just ignore and move on. With that, the new layout specification it knows about the old layout specification. This is really cool because if an item is loaded or used with a clear property and then becomes a grid item, it no longer displays any floating or clearing behavior. So that makes it easy to create a fallback in emails. So between those two things, it can be fairly simple to create a fallback for an element that uses CSS grid. You just need to determine if it's worth the overhead based on the demographic data of your application. So I'm going to show you these slides but where all these will actually be linked to the resources that I'm sharing with you. But just a couple of things. Rachel Andrew and Jen Simmons are great people to follow generally and specifically related to CSS grid and both of them are involved in the specification itself. A book of heart, a new CSS layout. Also by Rachel Andrew, it's a great book. It's really easy to read and digest and it covers not only CSS grid but also goes into Flexbox, the way we used to do things, why we shifted, and it's a really short read today. It's almost done in the last chapter and I would post it but I'm just a plain right. Les Boss's video course on CSS grid is great. It's free. Mozilla sponsored it. So you can just go and watch it for free. I highly recommend that. CSS Tricks always does. They have good guides and they have one Flexbox. They have one for grid. And then on the end it's always great for docs and they have a great playground. And here's a link to my slides. We've played it in time for questions. If anybody has any questions for Dan. Would this generally be used in the page layout or would it be something that the end user would play with too? So the question was would this usually be used when laying out a page or something that the end user would play with? What would be able to play around with? No, this is for building. So this would be for the page layout. The end user either since the code is just the CSS, they wouldn't really see this. So if you set a column width to like 200 pixels wide and four columns. I assume that sits to 11. Do you know if you can center those? Or would you have to make the container center than another container? Are you talking about centering the entire, like all of them? Yeah. Okay, so yeah. And I didn't cover the whole specifications. There are definitely things like you can justify your items individually just like you can with Flexbox. Additionally, you can, there's a property I didn't even mention but instead of saying display grid, you can also say display inline grid which makes that container like an inline block element and you can center it that way too. Does that answer your question? Yep. If you like to have an F-R pixel and an F-R that would affect the center as well. So like a 1 F-R, 150 pixels, a 1 F-R would that center it? I think that would work actually, yeah. I don't have to try it, but yeah, I think that would make sense. Yeah, because the 200 pixels would be the paid space rather than each of them would span for the rest of the container. Yeah, I think so. Yeah, that would be good. Thanks, Dan.