 Okay, hello, hello and welcome to this CSS layout workshop. I've pasted a link a few times into the chat, which hopefully you can see. In fact, I'll just paste that again in case anyone new has come in, which is the starting points that we're going to be working from so you can get that up. So I'm Rachel Andrew. I'm a technical writer here at Google. I'm also a CSS working group member and I've been sort of working with and on CSS for a very long time. My own career as a web developer started before CSS was a thing. So I was building sites when it was just HTML was what you had to use. So I've been doing CSS for a very long time and I'm generally very interested in layout as a subject and all the kind of cool new stuff that we've got in layout. So that's what I'm going to go through today. We've only got 90 minutes. So it's a bit of a fly through of a flexbox and grid and with code examples, which if you're using code pen, you can fork the examples and code along with me, which I think is probably the best way to learn CSS is actually to write some CSS. And I'll leave the page up afterwards so you can always refer back to the examples I was using. You can ask questions here in the messages. We don't have a huge amount of time for questions. So if you want to ask questions in the discord, I've put the link on the page there. It means that I can go back later today and actually answer the questions that we maybe don't get time to do. So it's up to you, but if you've got something that you'd like an answer to and we might not get to it, then if you pop it in the discord, I shall try and get in there later and answer some of those questions that you have. So we'll get going and we'll get going with the first example here because we're going to start talking about grid. So for grid layout, we define a grid using a value of display. So grid layout is essentially a value of the display property and we need to do that on a containing element. So here I've got in my HTML, I've got a container with some items. It's just a bunch of divs. So on my container, which is my parent, I can say display grid. And that's going to give me a grid layout, although nothing is going to apparently happen straight away because we basically get a one column grid, which looks very much like block layout. So we'll need to start creating some columns to be able to see anything. So we do that with the grid template columns property. And for now, let's just create some columns using some pixels. Nice and straightforward. So grid template columns and I've created three column tracks and you can see that immediately, we end up getting something that looks like a grid and the child items all move themselves into the place on the grid using auto placement. If you wanted some rows, you can do the same thing. So we can use grid template rows. And for now, let's just again give them a sort of fixed height. As you can see there that we've also created some rows. Grids are made up of grid lines. They start from one and at the start of the grid and that relates to the writing mode of the document. So I'm in English. So line one is on the left. If I was working in Arabic, which is a script that's written right to left, then line one would be on the right. So it follows the writing mode of the document. Now the space between two lines is referred to as a track. So you've got column tracks and you've got row tracks. We can also have gaps if we use the gap property and that will space out your tracks essentially. You can also use row gap and column gap if you want to do those individually. And the smallest section of the grid is referred to as a grid cell and that's conceptually like a table cell really. It's the smallest area that you've got on your grid. Another bit of terminology is we have something called the explicit grid, which is the grid that you've defined with grid template columns and grid template rows. But you'll find that if you remove the row tracks and we saw that an issue when we just did columns, you're still going to get rows and that's because we have something called the implicit grid. Rather than just kind of like stacking your content up in the corner if you say display grid and don't define rows or columns, grid is going to create you implicit tracks. And actually in reality a lot of the time what you want to do is control the columns but all you want is the rows to be as big as the content is which is what you get by default because tracks are sized as auto by default and auto it's a bit more complex than that but generally you can think of it as being big enough to fit the content. So if you don't define your rows they're just going to be big enough to fit the content that you've put in. So that's the sort of basics of just creating your initial grid. I've used pixels there to set out my grid but you can use all sorts of different sizing methods. So you can use any valid length unit which means that you could for instance use ends there and size your track that way. You could use CH which is roughly 15 characters. So any of the length units that you've got in CSS you can use those. You can also use percentages. If you use a percentage for example 20% that is going to be a percentage of the grid container. That's your percentage sizing. Percentages are also valid for the gap property you can use percentages there. As I mentioned you can also use auto for your track sizing and that will be roughly big enough to fit the content. The thing about auto size tracks is they will stretch by default. So if we set our final track there to auto and there's some extra space in the grid container you can see how it gets big and it stretches actually past the size of the content because it's just taking up all of the space. Only auto tracks will do that of the sort of standard sort of track sizing. The others if you say 150 pixels you'll get 150 pixels it won't stretch out to fill up any spare space. If you say auto it will use as much space that needs to lay out the content but if there's some spare space left over it will stretch and fill it. And auto is essentially a kind of intrinsic sizing and what we mean by intrinsic sizing is sizing that looks at the content and works out how big it needs to be. Whereas all the other kinds of sizing the length units and so on we refer to as extrinsic sizing as in you've defined the size and you're going to fit your content into it. Intrinsic sizing actually says well I want this to be big enough to fit my content. So as well as auto you'll find there are some keywords that we can use in grid layout which actually sort of use this intrinsic sizing and also kind of expose a bit how it works. So the first of those is min content. If I create three tracks of min content size you can see how min content behaves. The track that's got the seller that's got a lot of content in it it's compressed down and what it's done it's got as small as it possibly can do without causing any overflow which means that it's taking all of the soft dropping opportunities it's got and getting as small as it can but nothing's poking out of the box. And so that's that tracks min content size that's as small as it can possibly be. So we have the sort of reverse of that which is max content. So if we make our tracks max content size you can see what happens there. So our cell here that's got a lot of content in it's stretched out and it's gone as long as it can but no bigger. It's not like when I used auto and it's stretched bigger than the size of the content it's just gone to the size of the content. Now that would happen even if there wasn't enough space for it to do that so it could cause an overflow for example if you had you know a long paragraph in there it would just keep on unraveling and would eventually cause a scroll bar or break out of your box or what have you. But that's the max content size and that's kind of important to understand because although we can use these keywords as sizing you know within grid they're also how grid and also flexbox kind of work out how big things are they look at what's the smallest size it can be and what's the biggest size it can be and then make decisions about how to lay out your content based on those two things. So it's kind of they're kind of useful useful sort of keywords to understand because they expose something about about CSS and how sizing is calculated but a very useful keyword which uses this intrinsic sizing is fit content and what fit content does is we pass in a value so a length unit so if we create three tracks using fit content 10M you can see that the first two tracks have just gone to their max content size they've not gone to 10M because they don't need 10M to display what they've got in there the last track has started to go to max content size but once it's hit 10M it's then started to wrap so that's quite a useful little function to use on track sizing because you can kind of get some of the benefits of letting things be sized by content but you're putting limits on it so you don't say get an overflow or what have you it's worth noting these keywords aren't just defined for grid layout it's just that they have best supporting grid layout at the moment they are defined and some of them work better than others they have different browsers just for things like width or what have you so actually used instead of a length unit so they are defined to be used all over CSS it's just at the moment their best support is in grid and they're supported wherever grid is supported so that's pretty much everywhere but these functions should be available for all types of layout so those are those keywords remember particularly min content and max content kind of just hold that in your mind because it'll come in useful later when we look at Flexbox we also have the FR unit now this is specific to grid layout because what it does is it defines a fraction of the available space in the container it's not purely all of the space in the container so it's not oh you know every one of our columns will not give you essentially a third because if there's something big in one of those grid cells say an image that didn't size down that would still take up more space and then what was distributed would be what's left over so it's not quite a fraction of the whole space it's of the available space but most of the time as you can see here we do get that sort of equal looking layout and you can play around with these values so you can say I'd like my first one to have two FR and the others to have one FR each unlike using percentages the gap is taken away before the space is distributed so you don't have to kind of work out like we do when we use percentages for layout how much has to go for the gap you can also mix FR units and other length units again what happens is the fixed size is taken away first and then whatever left is going to be distributed to those tracks as I mentioned one FR isn't quite sort of equal sized tracks and there's a way of making it so if we just scrunch up this content here you can kind of see what happens so we're making this one so it's not going to break you can see that it's what it starts to do is it starts to make that track larger so they're now not nice and equal looking because the FR unit is distributing the available space if you want to force that you absolutely want that track to be a fraction of the available space and we can use the min-max function for our track sizing and you can see now that that string is overflowing and it's overflowing because we've said we want our tracks to be a minimum size of zero and a maximum of one FR and what that's basically doing is saying these tracks have got no intrinsic size so that min-content, max-content, intrinsic sizing we're basically saying ignore that act as if the track has nothing in it no content and then distribute everything so one FR is actually min-max auto one FR it's saying look at the auto size of the track and then distribute whatever's left if you definitely want your tracks to be absolutely you know sort of in this case a third of the available space in the container you can use min-max zero one FR and that will sort out the issue the reason you might want to do that is if you're doing like a 12 column grid and you're going to be spanning your items over tracks so you're going to be controlling how much space then it will work and as you see if once you go back to broken content it all just works itself out because it's then wrapping and it's fitting into the track so if we stay here and just look at a bit more things about doing sort of your track listing if you've got say if you did have a 12 column grid and we're using things like min-max that's going to start looking very verbose so we can use repeat notation to tidy that up so if we say repeat three and then whatever you want to repeat and that basically means that you don't have to write out every single sized sort of track as you go so that could be anything that could be you know a set of big sized tracks if you wanted anything you like and you can repeat a single thing like this so you can repeat a pattern in which case you'll get multiple tracks so here we'll add it with six tracks going 200 pixels, 100 pixels, 200 pixels, 100 pixels along until you've sort of got the three sets you can also use repeat for part of your track listing so here we might have our repeating section and then 100 pixel track on the end so you don't have to use it for the full thing but it's just a handy way to tidy things up really and kind of just to sort of close the loop on stuff that you can do as you're creating your tracks so if we combine what we know about the FR unit repeat and min max we can create a very useful pattern so if we let's remove that so if we say repeat auto fill 200 pixels then what happens is Grid will have as many 200 pixel columns as it can in the container so that's quite neat but you can see they're not flexible columns, they're fixed we're getting 200 pixel columns then we get a gap on the end if we say min max 200 pixels then we'll get as many flexible columns as will fit with a base size of 200 pixels so they'll never get smaller than 200 pixels so it's easy to get a bit bigger because there's that little extra space that's getting shared out and that lets you sort of create a responsive pattern without having to use any media queries because it's just working out how many it can put in so that's a useful little pattern and you can use that for all sorts of interesting stuff so that's sort of the basics of creating a grid sort of very quickly and so now we'll move on to placing things on the grid using line based placement so grids always have lines, the lines are horizontal and vertical as I mentioned earlier they're indexed from one and so here I've got a grid we've got four columns and I'm using grid auto rows so that my tracks in the implicit grid will be a minimum of 100 pixels and a maximum of auto which means that they'll never be smaller than 100 pixels but they can grow to fit the context, their max is auto and that just means that we can kind of see those tracks to position things onto them so I'll take my item one here, I've just popped classes on these divs just to make it nice and easy and if you want to position things using line based positioning we can use grid column start and grid column end to position things via columns and end on line three and you can see now that that item is stretching over a couple of tracks there those are the longhand properties, they're obviously fairly lengthy you've also got grid row start and grid row end if you're working by rows you can compress that down to a shorthand if we just use grid column and then use a forward slash line that you want to go to so remember you're targeting lines not the tracks so we're going to line three because that is the line that sort of is after track two so you're targeting the line numbers rather than the tracks if you want your item to start at the first line end at the last line you can use minus one as your last line as well as counting up from one from the start of the layout they count back from minus one from the end line so you can target that or you could go to the second glass line with minus two for example a little note is that that only works for the explicit grid so you can only do the negative line numbers with the grid tracks that you've defined with grid template columns and grid template rows it doesn't work to go to the last line say if you're just filling up a grid with implicit rows you won't be able to target the last one with minus one it is an issue that's raised that we'd quite like to be able to do that but I think it's because of the performance implication of laying everything out and then working out where the last line is going to be that at the moment that doesn't work so minus one will only go to the last line of the explicit grid so the last line of what you specified with grid template columns and grid template rows so I say this all works in the same way for rows other than that that's sort of minus one, we've got implicit rows here so we say grid row one to three so my rows are getting that height because of the min max function setting them to a minimum of 100 pixels just so we can kind of see where we've got those rows so that's really the basics of positioning things by lines it's very very straightforward you give it a start line and an end line and you can position things wherever you want and you'll note that the other items just carry on laying out via the auto placement mechanism where grid finds a cell and we'll talk a bit more about auto placement next so that it's worth understanding about how that works everything on top of all the other things we're going to look at for doing positioning is basically built on top of this grid of lines so you can just use line based placement and never worry about anything else if you don't want to and just use this simple go from this line to that line if that's easier so everything else is kind of a nice bit of syntax on top of this grid of lines it's worth noting that you can overlap things you can place things into the same cell as another thing that's fine and then if you do that you can control that with zindex just like absolutely positioned items you don't need to add position relative or anything grid just works with zindex so if you've positioned things into the same cell and you want to switch their order then you can just give it a higher zindex so I am kind of rattling through things today because we obviously don't have a huge amount of time and I'll try and pick up some questions at the end if they're not answered by future material but I'm going to try and sort of get through a bunch of stuff so I want to talk a bit about auto placement because most of the questions I get that where people are a bit confused about something that grid's doing they have something to do with auto placement because it means that we can create a grid and just then chuck a bunch of content at it and lay it out and there's so many patterns on the web that are just that all these sort of card type layouts are literally just here's some stuff please lay it out in a nice kind of display so auto placement is what grid does when you create a grid but you don't position any items and so if no items are positioned at all then we just start in the top left if we're in English and fill up the first row and then carry on filling up rows which if you want a basic card layout that's kind of what you've got there but we can tweak this and we can sort of do some slightly different things with auto placement so let's get the first child perhaps serve here and what I'm going to say with this item is I want it to start where it would normally start which is going to be on line one but we'll say auto if you use auto for a line number that's going to use its auto placement position so I'm going to say span two you can see now that that first item has spanned two rows of the grid two row tracks and this time I'm going to span columns there I'm saying start where you would normally start where auto placement would put you but span over two column tracks so this is kind of a useful pattern you could be targeting these items anywhere you like for example you could have a bunch of images and some of them are portrayed in some of them are landscape and you want the landscape ones to span two tracks so you could maybe have a class on the ones that have landscape images and target it that way you'll notice that there are gaps in the grid when we do this and so by default what grid layout is doing is it is keeping things in source order so if you look at the source here and I've numbered the items it makes easy we've got one two three there's not enough space here for four to fit so it's just gone down to the next line and then we've got five you can modify that behaviour with grid auto flow set to dense and so you can see what's happened there is that item number five has kind of hopped up and filled that gap so what that does is it kind of takes things out of source order and if you think about accessibility that could potentially be a bit of a problem if these were say product cards and so on was tabbing through them then you could end up with a rather confusing sort of behaviour where you're sort of jumping around the screen so generally you need to be very very careful when messing around with things like grid auto flow and dense packing but even just with positioning things by lines or what have you if you start to take things away from the order that they are in the source it's a very confusing experience for people because there's an awful lot of people who maybe use a screen reader but it also can see the content on the screen or using the keyboards completely to navigate and in that situation you can sort of create an odd experience the way to test it is a lot of dev tools now we've got the ability to check the tab order through a document the other thing is just to keyboard navigate yourself put your mouse away, put your trackpad away and use your keyboard to get around your site and make sure that that does make sense because for a screen reader user they're going to have things read out to them in source order so the biggest issue with people who are accessing the document and can also see the layout because it can be very very disconnecting that's just a general warning with grids and less of the flexbox you can do with anything, with absolute positioning because we don't tend to lay out our entire layout it's not been as much of a problem as it is now I have a second auto placement example just because I wanted to highlight something which tends to come up as an issue so I've got some items here and on my grid here and they've all got some sort of placement which is why they're like this and so we've got bits of white space where there isn't an item I add another item, it shows up right up here in that bit of white space that we've left and that typically is quite confusing when it happens because you kind of expect the auto placement will start after all of the items that you've placed if you mix auto placement and line based positioning and so an auto placed item appears it will go into the first available cell for it so when this causes people problems is they've made a grid on their body element and they've got some white space in that as part of their layout so if something gets injected in or someone puts something in with a CMS or whatever and it appears in a really weird place and I can't understand why it got there it's this is going on, you've got a lot of positioned items you've just put something in and it's appeared in an odd place couches everybody out, caught me out the other day I was building an example that just happened to use grid I was demonstrating something else because it was something which I hadn't placed and so it was sort of popped up into an odd place so generally if you're using auto placement use auto placement, if you're positioning items you probably want to position all of your items because otherwise you are going to get a slightly odd effect like this and if something does appear in an odd place in your grid layout you can be pretty sure that's what's going on in your grid so let's look at number five which is named lines so I really just wanted to sort of show you an example of naming lines on the grid because it's a sort of a slightly unusual syntax and so this example I've got some regular line based addition things but I've also added some named lines to sort of show you that so you name lines on your grid by using a name within square brackets like this which is a slightly sort of unusual syntax the name can be pretty much anything you want other than keywords that we use in grid layout so you couldn't use say span as a name but otherwise you can use pretty much anything you like so you name your lines in the position where that line is so this main start is essentially line one which means that our item one which starts at main start and finishes at main end that's basically like doing one minus one because I've got main end at the end of the grid you totally don't have to use named lines as you can see I've mixed it here with using line numbers there's kind of a sort of reasons why you might want to do it it might be easier for other team members if you name the lines on your grid and then they can just position things against them you can have multiple line names if you want so for example we could also have call start and call end in here so you can have multiple lines you just need to separate them with a space and then you could use either of those line names to target that line so you might want to do that just to make it easier for other people to work with your grid if you are redefining this grid within media queries then if you're careful with naming lines, naming specific lines you could for instance always have content against line content even if line content was you know line two in one context and line one in another so you can kind of use it that way to help make it easier to do a responsive layout and not need to keep track of which line things are positioned against so that's there that's kind of useful the convention is to use this dash start, dash end for your start and end lines which gives us a little bit of extra functionality that we'll look at later but you don't need to so you could call them A, B, C and D if you wanted it doesn't really matter you can call them anything you want because you'll often see people with this sort of name dash start and end in their named lines let's say you absolutely don't need to use it I don't see it used that often I think people it's not so common used but it's sort of I think a lot of things in grid layout it's worth knowing that you can do it but it might come in useful later on so I'll just know that you can I don't have time to go into it too much today but you can have multiple lines with the same name in which case they act like an index of those lines so if you named every other line you know a name say call or whatever and then you targeted call 2 that would get the second line that was named call so again that's a useful possibility it allows you to sort of target a set of lines in rather than targeting the whole grid so that's just something handy to know that you can work with but probably more likely what you're going to want to use is the concept of named grid areas because I think this is my favourite thing about the grid because this gives us a different way to lay out our items so what we do with grid template areas is we define in CSS what our layout looks like as the value of the grid template areas property so this is my container and I've got my four column grid here and so what I'm going to do is I'm going to use grid template areas and we're going to just do a bit of ASCII art here which is defining each row of the layout each row is between the quotes that's not going to do anything exciting just yet but then if we go down to our items which have each again got a class on them we can then place them on the grid using the grid area property so basically putting each of these items into a position on the grid so I've used the names that I defined up here and I've given each of my items a grid area that it's going to sit in so as you can see a repeated name causes the item to span tracks and we've sort of got these different rectangular areas they have to be rectangular areas you can't create like an L shaped piece or something like that we can't do any kind of Tetris within our ASCII art at the moment and you have to have a complete grid so you can see we've actually filled every cell of the grid now that doesn't mean you can't have white space if you want to have white space then you can just use a dot and you can actually use a string of dots so that will help your ASCII art line up which I think is quite nice you can also have multiple white spaces in between things so if you had different lengths of names then you can use multiple spaces to get it all to line up so a dot will give you white space if you kind of say if you don't have a complete grid or you use a T shaped area or something like that then essentially the whole value would be seen as invalid and be thrown away and you won't get a layout so you kind of have to use it as you want but the nice thing about this is so easy to play around with your layout here you know if I want to see a sidebar looks like if it spans two rows I can just do that so it's a very nice way to play around and experiment with layout and it's also very easy to redefine as you can imagine inside your media queries because if you've named everything you can just redefine grid template areas to move from a to a four column layout or what have you I also think it's just really nice particularly if you're working in a kind of component based system so you've got all of your components and their CSS you can see what that looks like looking at the CSS which I think is just a really nice thing because that's something that CSS doesn't really do very well it's very very difficult to kind of look at some CSS and figure out what on earth it's doing in terms of the actual layout whereas you know with this you can actually see right there in that container what its layout looks like which I think is it's kind of just a really nice thing and an unusual thing for CSS if you think about our layout methods of the past using floats or something I mean I actually have no idea what's going on unless you poke around in DevTools so it's actually very nice to be able to see that so yeah I use this all the time I love it before grid was even really a thing I started using this for prototyping just because it's so easy to mess about in code with your layouts I was using it behind a flag to prototype stuff because it's a nice thing to use so have a quick look at something that you get when you use grid areas grid lines from named areas so we're basically going back to a similar sort of layout here but I've got an extra item at the bottom which is being placed by auto placement so again if you've got something laid out with grid template areas auto placed items are just going to end up below now I mentioned with line based positioning that you can position items onto the grid using lines so you can combine grid template areas with line based positioning if you want so we've got our item here and I could layer that onto the grid grid column one and grid row so that's going to sort of dump it, layer it on top and again that would be sort of controllable with the index, you've got your box there you can also though place it by using line names and the line names are generated from the names that you've given the different areas on your grid so we could also position this with sd start and sd start and it's against the footer isn't it, so ft end this is like using your line your named line placement but the named lines are being generated by the names that we gave our areas with dash start and dash end appended so both for rows and columns so for the area hd we're going to have hd start at the top hd start at the bottom so that's for rows and for columns we've got hd start on the left because we're in English and hd end on the right so you can actually use those to place an item into that layout and to layer things over for example you might want to put a close button if this was a little dialogue panel or something you might want to put a close button top right you could use the lines to know that you're always targeting that top right area without having to use line numbers which might change in a responsive layout if you're changing the number of column tracks so again that's a handy little thing which I don't see people use very often obviously that you might find handy one day it will solve a problem so it's sort of handy to know you can do that so then we'll have a look at alignment on the grid so when we're sort of looking at all these demos and I think with a lot of grid demos we see this we see these full height columns and content which is stretched all the way over each grid cell or grid area now the reason they're doing that is because of the properties by default stretch over the full area that an item is in so if you've got a background colour on it it fills the entire area it's quite nice we spent a long time on the web battling to have full height columns and the default for both grid and flexbox is you get full height columns the only time that doesn't happen is if your item has an aspect ratio so that would be something like an image images video, anything with an aspect ratio will be aligned to start both for rows and columns rather than stretch so we don't stretch your images by default if you want to stretch your image if your image is a grid item and you want to stretch it you can but by default we won't do that because that would kind of generally you don't want to stretch your images out of shape so all of the alignment properties are detailed in the box alignment specification when flexbox first came out you might think of them as really been tied to flexbox because they started with that spec but they then got themselves moved out so that we could do alignment anywhere in the same kind of way so when we talk about alignment everybody's first question is I can never remember how whether I should be using align or justify so I'll try and explain when you should use align and justify so in grid and we'll look at flexbox later but in grid you use the properties that begin with align on the block axis so if we're in English which is a horizontal writing mode the block axis is the going from top to bottom and it's the axis of which are blocks layout one after the other so on that axis we're going to use the properties that start with align that's align content, align items, align self now align content controls the distribution of space between the tracks so in this case my grid is defined by that grey border and so I've got some extra space and I've got extra space because I'm using pixels for my track sizing so I'm not using a sizing that will let them stretch to fill the remaining space so that means that I can do something with that spare space so I could say align content space between and it helps if you spell correctly so what's happened there is that the spare space in the block direction has been put between the items and you'll see that the these items here have got bigger and that's because they've got a gap and so they're getting some extra space put into that gap and because they span over it that means they also get bigger so that's something to be aware of with grid that obviously you're going to get space between tracks that might have things sort of spanning over them and so you could center it on this axis center it's very much like the properties we used to in Flexbox the same sort of values you can use so that's distributing the spare space so the other thing you want to do is align the actual items themselves so they're stretched by default and so you can use align items and so now instead of stretching on the block axis to give us our full height columns it's just they've just aligned up to the start of that item and we could use end all this down to the end and what align items does is it sets all of the align self properties so we can do those on an individual basis you could say align self center that gets my first item and aligns it to the center so basically just shifting things up and down there on the block axis so you can then on the inline axis do exactly the same but using justify so if we say justify content center that moves all of the tracks there into the center or we could say justify content end and that moves all of the tracks to the end so we're now working in the inline direction so here we can sort of left and right in English and we can justify items and so that's now justifying the item to the end of its area and again we've got the self property so we can say justify self and target one of them let's get that one we had before let's say center to it let's move that one to the center so you can see once you start doing that things can stop looking like a grid and this is where your sort of ability to layer things sort of works because you might have an item which is stretched all the way over you position another item into that same area and then align it so that it goes to the top right for example like a close button and this kind of means you don't necessarily have to use so much absolute positioning for those things which can be a little bit fragile you can actually use grid itself to move things around so let's say you kind of have to play around with them to get used to using them I think people find them quite confusing dev tools are really handy because you can kind of see where you're moving things around you look at the grid in dev tools and I just play around with them until you get the idea but in grid it's fairly straightforward you've got two dimensions, you've got block and inline if you want to move things on the block axis the properties begin with that line if you want to move them on the inline axis you're going to use the properties that begin with justify and you've got two different things to deal with you've got the space around tracks which only works if you've got extra space and then you've got the item inside its area to sort of move about and by combining those you can do all sorts of interesting things so moving swiftly on something that I think is quite useful I wanted to wrap up the grid stuff with is using generated content with grid layout because I think this lets you do all sorts of interesting things again it's solving problems that people say how do I do this with grid one of the things we can't do at the moment is style a grid area without putting something into it so you have to have some HTML element in there in order to give it a border for example we're looking at ways to change that in the CSS working group to give people a way to style the sort of the gap as it were but at the moment that isn't possible so we need quite a bit of it by using generated content because it works really nicely with grid so just as a quick demo of that if I say container before and we're just putting in an empty string of generated content and we'll give it a background color so we can see it you see there we've got essentially a new grid item and so the generated content works in exactly the same way as any other grid item when you say before with generated content what it does is it adds a first child it's a little bit misleading you're sort of saying container before you feel like that should be before the container it's actually before the content of the container so that's what you get and you've also got after so I'm just going to copy that and if you use after that will give you the last child essentially so it'll put in a piece of generated content as the last child of your container so you've kind of got these two extra elements that you can play with by using generated content which could be quite useful because obviously you can position those you can use libase positioning on them you can style them up any way you want you can use them to create borders on areas or you can use them for little stylistic touches I have a sort of non-obvious use for this which I like to do so let's quickly do that so if I add a heading up here into my HTML and then I'm going to say generated content before and after the heading and then I'm going to give it a border and align it and then I go to my h1 so display basically creating a three column grid and I'm going to give it a gap so what that's giving me is nice flexible sort of lines either side of my heading there's a ton of patterns like this this sort of demonstrates a couple of things that I like to show people with grid you don't just need to use grid for your main page layout you can use it on components as well I quite often turn little components into a grid just so I can do this sort of thing I can somehow style it up a lot of what I did before I was at Google you know one of the things I did was I had a CMS product so I did lots and lots of kind of UI little bits of user interface and grid is really useful for that stuff if you get away from thinking of it as just for your main layout and yeah there's tons of little things where you're just like oh I just want to be able to have a nice you know little stylistic line or something so this is quite a useful useful pattern and it works because basically we're saying that center track which is where the heading text ends up is auto sized so we'll be big enough to fit the content we talked about before either side we've got a 1fr track and so they will just take up as much space as they need and so it'll be nice and nice and flexible and if the heading gets bigger those lines will just get smaller because they're only going to take up the space they want so that's kind of just a useful little tip and just to have you think about grid outside of big grids and page layouts and so on the sort of intrinsic sizing and generated content and just thinking of interesting ways to lay things out it can be actually quite useful for so we've got half an hour left to go and I want to go through Flexbox a little bit and the reason I sort of do grid first is because I think grid is actually easier to understand in a lot of ways than Flexbox because Flexbox is kind of a bit weird and I think we sort of see it as being a bit weird because when it first showed up we thought we'll use Flexbox to do grid layouts because it's better than floats which is true it would have found it difficult to be worse than floats for layout but it wasn't never really designed for grid layouts because what Flexbox is designed for is taking a bunch of oddly sized things and returning the best layout for those things which is also something that is impossible to do with floats really you know it's very very difficult you have to kind of give things percentage sizes and push them around with floats so I think it's time now to think about Flexbox more for what it was designed for so that's really what we're sort of going to look at here so again it's a value of display so we say display flex and we immediately get a bunch of Flexbox behavior I mean that might be all you want to do it's really useful the items display as a row they line up at the start and they don't grow to fill the container what they actually do is go to max content size if they can so they display as a row because the initial value of flex direction is row and of course the flexbox we can play around with the direction the main axis so the flex direction property changes your main axis and we can also do things like reverse the flow of that main axis which sort of switches the start and end just like with dense packing in grid don't do this if your problem is that you've got your items in the wrong order that change your html because just like with grid the navigation order the tab order of the content is going to be what your html is so if you start switching things around you're probably going to cause people problems where you're not going to cause problems and you know there is reasons you might want to use it say you've got like an icon that's not targetable the icon is not targetable and you just want it to be on the other side of the field that's probably a reasonable use of doing row reverse you could probably get away with that but again test it if you're doing that stuff when I used to do audits of people's css this would be the sort of thing I would look for is the use of row or column reverse or the order property in flexbox you know if I found those that would be a little bit of a red flag but you can use them well but that's just something to kind of be be aware of check your tab order make sure that you're not creating a mess for somebody flexbox again works with the writing mode of the document so if we happen to be using alibiq the items would start on the right and flow over to the left because it goes with the document flow and that's common with a grid and flexbox we're designed once we would kind of realise that people don't just use English on the web and so they've been designed for that reality and so which is why we don't tend to talk about top right bottom left like we do in other places in css we work with the sort of the logical flow relative directions so the other thing to sort of just remember with flexbox is rather than thinking about block and inline because we can do this thing of changing the main axis you tend to want to think about the main axis and the cross axis when you're doing stuff in flexbox so the main axis is whatever you've set flex direction to or by default row if you've not got a flex direction property and the cross axis is running across that so if your main axis is row then your cross axis is the column and so let's have a look at number two which is wrapping flex items so flexbox is designed essentially to be a one-dimensional layout method and what that means is you're controlling the row or the column but not both at once now you can obviously get multi-line flex containers so we do that if we've got our container here and we say display flex and the items they've sort of gone into these columns here now if we want them to wrap we can use flex wrap and what that will do by default is just wrap them all onto individual lines which probably wasn't what you wanted so we'll look at the flex property later but I'm just going to give a flex basis of 300 pixels which basically says I don't want them to be smaller than 300 pixels so they end up wrapping onto two lines there and you can see really here this is the difference between grid and flexbox if you're in grid layout then item four and five would be lined up underneath item one and two and you'd have a gap at the end because we're in flexbox the space distribution happens on a flex line by line basis so and that's really what we mean by one-dimensional even though we've got two rows here each of those rows is treated like an integral flex container so space distribution happens just across the row this row down here doesn't know about this one really so it doesn't know to line up things now obviously if you wanted to create a flexbox grid and lots of people have created a flexbox grid the way you do that is by turning off the flexibility of flexbox stopping this growing behaviour and then sizing things in percentages again just like you did with the floated layout so it kind of becomes like floats plus so when you do a flexbox grid you're essentially fighting against the natural way that flexbox behaves which is why then flexbox seems a bit weird and hard because you're actually trying to sort of force it into this sort of grid layout which it doesn't really suit so if you edit the layout like this and you're like actually I want these item four and five to line up under item one and two switch layout methods say display grid create some columns maybe use the auto fill method that I showed you before and use a grid layout for that component they're very easy to switch and there's no tax in switching layout methods you don't have to worry about whether you're using grid or flexbox use the one that suits the pattern that you're trying to build is really the key thing to remember so let's look at alignment in flexbox now I think alignment is harder to understand in flexbox and I think it's why people often find alignment quite confusing because we've got this switchable axis we can't just say block or inline we're actually saying well what's the main axis so in flexbox when you're doing alignment you need to think about the main axis and the main axis is the one that you use to flex direction and on that axis you're treating the items as a group so you're sort of moving the items around as a group of items rather than as individual items so we can have a look at that so we use the on the main axis we use the justify property so we can say justify content space between again just like between grid tracks what we're doing here is we're taking the extra space and we're sharing it out between the items if we say justify content flex end and we take our available space and we dump it before the items so this will only work if you've got spare space in your flexline if your items are all packed in and there's no extra space then justify content won't do anything because it needs the extra space to share out so there's no self property when you're on the main axis because you're dealing with these items as a group of items and you're just sharing out space around them if you want to do a sort of pattern it's a fairly common pattern where you've got if you're navigation you've got sort of two groups of navigation and you've got one lot pushed over to the left and one lot pushed over to the right the way you do that in flexbox and it's in the spec because this is what we should be doing is we use auto margins so I've just added a class to number five there to make it nice and easy if we say push and if we say margin left auto push is the item over to the right the reason that works is that auto margins absorb all of the space in their direction so it's how you center a block I'm sure you know if you've ever done a fixed width or sort of a ostentative layout and you've done margin left and right auto and then the layout has gone to the middle that's because you've got two margins that are both trying to get all possible space and that's just shoving the thing into the center if you give a flex item an auto margin it will take all of the space and so you get that separation so obviously you could put that class wherever you wanted or you could target something with the last child or what have you so if you're wondering how to deal with one item differently or group of items differently on the main axis auto margins are the way to do that so that's sort of the basics of doing that we also have obviously the ability to use the alignment on the cross axis so in this case that's on the block axis so that's aligning things against each other we've got a couple of things we might want to do there let's just tidy this up so we can the first of those is if you've got wrapped flex lines and spare space in the container on the cross axis you can use align content to deal with that space in the same way that you use justify content so if I give my container a block size or some height now you can see that the items have stretched themselves and I am going to say wrap them oh it's in the wrong place we put flex wrap on the parent so we've got items here which are wrapped and we've got spare space you can see they're stretching to fill all the spare space so we can then use align content to distribute that space so I've got align basically put the space between probably you're less likely to be using align content but it does work in the same way if you happen to have extra space and your multiple lines and then we also have align items and align self on the cross axis so just like in grid we can use align items say start that's going to align them to the start or we can align them to the center now in this case we've got a sort of a height of block size on the container if we didn't have that and they're all the same sort of size then obviously that's not going to do anything because they've got nowhere to align however if we say added some extra text into one of these to make one of them taller we can kind of see there now how the other items are center aligned against that one and just as with grid these are setting the self properties so if we go for that one I've just added a class to so that one's five and we could say align self and that one's now aligned itself to the end so again this gives you quite a lot of ability to to play around with alignment really useful for again small UI components where you're wanting to you've got like a label and a form field and some little icon quite often just aligning items to center or just line them all up for you nicely things that were just a real pain in the past so quite often using Flexbox for those little alignment tasks you know it's really handy and that's really comes to this demo here one of the very useful things about Flexbox is it allows us to properly center items which apparently is one of the hardest things in web development to do that we've got a container here with an item here that we would like to center I'm going to make it a Flexcontainer gives me access to the alignment properties so I can then put it into the center meaning that problem is now solved in the future at some point we might be able to do this without using display Flex the alignment properties are specified for block layout so just your normal flow, your regular layout of things when they're not flex or grid at the moment no browser has actually implemented this because messing around locking in line layout is obviously quite scary so it's kind of going to be something that is coming I think it's probably something that people will look at but there really is no tax in turning a container into a Flexcontainer just to do alignment so if all you want to do is align the things well that's absolutely fine you can make it a Flexcontainer then you've got access to the alignment properties for whatever's inside the container to do your alignment but yeah at some point in the future we'll be able to use the alignment properties outside of grid and Flexbox just to align something inside another box I think Flexbox is quite useful in that because it shows you that actually where you've got the alignment properties you won't necessarily have all of the alignment properties in Flexbox we don't have all of the properties on the main access because we're dealing with things as a group and it'll be the same with block layout the alignment properties are going to make sense in a block layout context so it'll just be the ones that do make sense will be the ones you have access to but yeah feel free to make things Flexcontainers in order to align the stuff inside them and again it's nice that the age-old problem of not being able to properly centre things has been solved for us so just to finish off I want you to look at the actual Flex property itself very quickly and so really what we've looked at so far with alignment is distributing space around the items so you've got some spare space in your container and we're going to sort of move the items around by messing about with that space but you might actually want the space to go inside the items themselves so I've got my items here and one of the items has got a lot more content and you can see here that the default of your Flexbox is for the items to go to max content so when we looked at max content with grid and we saw how a max content item goes as big as it can but no bigger you can see that that's happening with these items and Flexbox will do that it will go to max content if it can and as long as your items are allowed to shrink which they are by default once there's not enough room for them to go to max content they'll start to shrink down into so that they fit into the space and they'll shrink down until they go to min content so that's kind of the default behaviour of Flexbox and that's controlled by the Flex properties and the initial values of the Flex properties are flex grow is zero, flex shrink is one and flex basis is auto we tend to use the shorthand so grow auto so flex grow is zero, the items don't grow and you can see that because they've only gone to max content they haven't filled the container flex shrink is one they can shrink and we saw that when we made the container smaller they shrunk and the flex basis is auto which again big enough to fit the content, kind of intrinsic sizing the flex algorithm will treat that as going to max content if it can if not sort of shrinking down so that's sort of the basics of using the flex properties there so obviously we can play around with those a bit if you do want the items to grow you can say flex one and you can see now that the items have grown and they've filled the container but they haven't gone to equal sizes because it's a bit like the FR unit in grid you're sort of sharing out whatever's left of in the space from the auto basis because that's our flex basis if you would like the items to all end up equal we could change auto to zero and again just like that FR unit we're saying here the items have got no intrinsic size give them a flex basis of zero and you get these sort of equally sized items so that's really two things you might want to sort of understand about flex basis you can give a flex basis of a length unit which is what we were doing to force things to wrap if you want items to say grow from 200 pixels so they're never going to get smaller than 200 pixels and then they're going to wrap onto another line you might want to give a larger flex basis but most of the time with flex box you can use these default values for the flex properties you don't even need to remember flex grow, flex shrink and flex basis you can remember these sort of default shorthands so those are flex initial that's your initial but you probably would need to set this unless you were setting it back to it for some reason because this is just the initial values so the things can they do shrink they don't grow and their flex basis is auto if you say flex auto that gives you shrinking so flex shrink is one flex grow is one so the items can grow and their flex basis is auto if you say flex none you get fully inflexible flex items so their flex shrink value is set to zero they're not allowed to shrink you might want to do this if you are just using flex box for the alignment properties you're saying display flexors you want to turn on the ability to use the alignment properties but you don't want any other flexible behavior to start happening you might want to use flex one that might solve your problem I don't think I've ever used it in production but it's there if you need to use it and then the other thing is to use and this is what all the tutorials did when flex box first came out and confused everybody flex one is basically setting the flex grow to zero and the flex basis to zero and flex grow to whatever you put here so if we have an item our class or if we say because the flex basis is zero item five with our class of five and which has flex two is going to be two times the size of the other items because you're basically setting the flex grow factor to being two rather than one the others have all got one so when you use flex one to whatever you're setting the flex base to zero so you get that consistent you know sharing out of content whereas if you use flex auto which is the default then flex box looks at the max content size and the min content size and figures out you know how much space to give each of the items which I think is kind of the killer feature of flex box it's kind of what it's for that ability to just say hey browser here's this bunch of things please give them a reasonable layout don't squash a big thing into a tiny box or leave loads of space around this small thing and so really you're kind of tweaking that layout basically using flex box and I think if you are doing something like setting widths on all of your flex items or setting a specific flex basis you know you're doing lots of classes to target individual items you're probably going to have an easier time using grid and you don't need to think of grid as just being just just being for like two dimensional things you can use grid like the heading for a one dimensional thing just because it gives you access to a bunch of stuff so I think if I was to leave you with anything it's to think of these layout methods as giving you access to a bunch of interesting things that you can then do with them rather than thinking of them strictly as grid is for sort of macro layouts and flex boxes for little UI elements use whichever one works the best use whichever one gives you the access to the tools that you need to create the patterns that you want and don't be afraid to play around and switch what you're doing if it's not working out see if the other one will work better for you so that's kind of what I've got for you today I know it has been a super fly through all of this stuff I hope some of that's been handy and that you learned little bits and pieces maybe you didn't know before the discord channel is open I think until maybe the end of the month so there is a CSS channel there I know that I've been in there and Una and Adam from Google have been in there as well talking about layout stuff so you're always very welcome to go and ask questions there maybe they're a little bit more complex than some of the stuff we've covered here please use that take advantage of the knowledge that we've got here that we're sharing and I'll have a quick look through questions and see if there's anything that I can quickly answer let's just scroll up to the top here right so there was someone here who said named lines is the best practice to use areas versus line numbers it is absolutely up to you so basically the CSS working group makes CSS and we create things that we think will solve a wide variety of use cases but other than the occasional accessibility tip there's not really a good or bad practice here it's very much what you want to be doing what I would say and having looked at quite a lot of people's CSS over the years choose something and use that decide on how you're going to use something like grid because what you don't want is some people on your team using grid template areas some people naming lines and everyone's using something different and you're going to end up with a mess so I think defining use is the important thing there's no real difference in terms of performance or anything else which ones there's no good or bad practice it's more what works well for your team so we've got a question about IE not supporting grid if you're still having to support IE at this point I'm really sorry for you I know some people do need to support IE feature queries I think somebody else in the chat mentioned you can use that support to display grid you can create a simpler layout for IE browsers and then use grid layout as a progressive enhancement I mean hopefully you're not having to build new things right now for IE it is kind of going away and all modern browsers support all the stuff I've shown today has fantastic browser support none of this stuff is cutting edge at this point IE really is people who've got to support IE I know some people are still having to support IE and it's an unfortunate thing but feature queries are probably the best way to deal with that if you're wanting to introduce components laid out with grid into something which has to support IE because remember that support isn't looks the same and I think if you're dealing with Internet Explorer then there is so much people using Internet Explorer are going to be seeing such a mess on the web they're going to be very happy if they can just read your content and you're not doing anything that makes it hard for them to use so I think that giving them a simpler layout and then using feature queries to enhance that layout is probably a good way forward and if you are just adding things into a layout that needs support IE that's probably the way to go and yeah feature queries are really for anything new that appears on the web now you can use feature queries to detect it and to provide fallbacks if it's going to be a problem and we are really up on time as I say if you've got specific questions you've got bits of code you want me to look at do stick them into the discord as I say we had quite a nice chat in there after the last workshop so do use that and if you've got knowledge on CSS answering there and Una and Adam have got a ton of knowledge on creating cool stuff so do come and use the discord I hope this has been handy I'm Rachel Andrew I'm at Rachel Andrew on Twitter if you want to follow me there I do talk about CSS stuff as well as cats so you can follow me there and yeah enjoy the rest of your day I hope this has been handy for you thank you