CSS Grid Layout - Rachel Andrew | February 2017

[Applause] it applies on the screen so it would doing okay so far so it's really great to be here because I'm actually Georgie I don't sound like one I've been down south for long enough that my accent is sort of drifting down and joining me I'm sure I don't know somewhere around Yorkshire maybe at the moment but I was born and brought up in any custom and Gateshead so it's I don't have much reason to hear anymore our family here now but it's really nice to come back and have a look around and things have changed a lot in the 20 or so years since I went down to London a little bit about me if you want to look at some of things I do and most of stuff is at Rachel's at UK and I'm constantly complaining about aeroplanes on Twitter so you can find me there I'm going to talk about CSS as well where I'm not talking about airplanes as a salad their CSS waiting group invited expert I'm not like as mostly CSS working group people are from browser vendors and other people who implement CSS there were a few of us who have just been brought on because we're people who know a bit about CSS and actually write CSS and so that's why I'm there I study various things ends but my day job is is purchase EMS so that's what I do to earn money so I've been actually working on the web since 1996 which dates me it means that I'm old enough to remember when we were arguing about whether we should use CSS at all or whether we should be using font tags and I was using CSS for layout when people were telling me that I was an idiot and I should be using tables so I've been doing this for kind of a long time and I was part of the web standards project back then actually part of the Dreamweaver task force which we were trying to encourage Macromedia who had Dreamweaver at the time to support standards in that authoring tool and really my interest in mr. so I'm going to tell you about today dates back to working with Dreamweaver and looking at visual layout and how we do layout visually because the thing is that CSS has got really really neat there's all this stuff that we can now do with native CSS or even need JavaScript for and things that we would have done with flash perhaps in the past and all of this would have really blown my mind ten years ago never mind twenty years ago but there's one part of designing for the web which kind of got stuck it got stuck and low somewhere around 2006 and that's layout and we're using layout now which was never designed to full page layout of complex applications things like floats inline block positioning they were for laying our academic documents so they were never designed for laying out the sort of stuff that we try and do today and that's why layout is hard and it is fragile and we rely on frameworks and things because who wants to be working out the current you know calculations for how wide every column should be that's really boring and so that's why we sort of where we are today is really because we're having to deal with faith fragile system that we've built on top of stuff that was never designed for doing layout but things are changing and we've got this group of CSS modules that have kind of come about to redefine how we do layout on the web and we've got flex box I'm sure a lot of people are already using flex locks we've got grid layout and they're kind of tied together by a module called box alignment which you might not have heard the name of but you're definitely using if you're already using flexbox and so today I'm going to talk about grid primarily because we're in a very interesting time for grid but I think a lot of this stuff that we look at will be familiar if you've already started using flexbox and I'll talk about browser support and where we are with grid later on and but a lot of the things all the code and things in my slides at the moment for the next months anyway you'll need to enable flags if you're using a current copy of Chrome or Firefox unless you've using night leaves or Chrome Canary all of this stuff will just work so grid layout I'm going to start by explaining a few things about it and then later on then have a break and I'll move on to showing you some sort of works examples let's say all the codes in the slide is all code pen links you can have a look later so first we create a grid we create a grid by using a new value of the display property so just like display flex we've got display grid you can also say inline grid and immediately any direct child of the element that you've said is a grid that becomes a grid item so this is the same as a flexbox you say display flex things become flex items and we then create grid tracks and we do this with grid template columns and grid template rows so what I'm doing here is creating a three column three row grid and the child elements will just lay themselves out automatically they'll go one into each grid cell if I want to space them out we can specify a grid gap and that's what the grid gap property and it's a shorthand for grid column gap and grid row gap works like the column gap in multi-column layout and we're creating a fixed width layout here with pixels but grid layout was created for a responsive web you ads with Flex box so it allows the creation of flexible grids and to do that we've got this new unit the fr unit and if you know how flex basis works and flex locks it's very very familiar to you and this unit assigns a fraction of the available space in the grid container to attract so if I say I've got three 1fr unit tracks I've got three equal width tracks and no matter how wide or now that container get I'm still going to have those three tracks they're going to share the space so grow and shrink in proportion and we can change those proportions so I can assign different fractions to each tracks so I've got two here of one fr and one of two fr so the available space in the container divides into four and we have one part each for the first two and two parts for the second the third one now the nice thing about fraction units rather than percentages is that because you're assigning a fraction of available space you can mix it with fixed width columns so I can have a 500 pixel fixed column and then I've got the rest of the space whatever that is depending on how wide the container is and that's shared out between these two columns one is one fr the other is to Fr the available space split into three and shared out we've got some little bits of syntax here we've got this repeat function and that basically means you can have a repeating pattern of tracks and instead of having to write them all out individually you can use the repeat syntax so if I say repeat 3 comma 1 fr then I that's exactly the same as writing out one of our one of our one of our having now if you've got a 16 column layout or equal width it saves you writing out each of those now we don't actually need to declare row tracks in this example if we leave them out grid we'll just create rows as needed for our items these created rows or columns if you place something outside in a column that's outside of what you've declared and they're described as the implicit grid so the explicit grid is the one that you create using grid template columns width template rows the grid will just cope with you sticking things into places that don't exist on that grid those rows and columns would be Auto sized by default so they'll just be the right size to fit the content but you can actually specify a size with grid auto rows and grid Auto columns and those that you will take a track list so you can say well the first implicit row that's created should be 100 pixels tall the second tributo or whatever you want so I showed you the repeat syntax which specified a fixed number of repeating tracks where you can actually ask grid to add as many tracks of a certain size as will fit into the container using the auto fill or auto fit keyword you can even create flexible tracks using min/max so I've set the minimum size to 200 pixels and the max to one fraction unit meaning that you get as many 200 pixel tracks as will fit into the container and the remaining space will be shared out between those tracks so you get these flexible tracks that never collapse down to 0 so that's pretty neat because you can have a layout that remains in strict rows and columns but it still flexes and allows as many things to fit in to the containers as you as you need so showing you lots of things about grid here it was not actually talked about positioning anything on the grid everything has just been blown into a grid and it's displaying itself with the auto placement rules and we'll have a look a bit more at Auto placement later we can also start to position things on the grid that we're creating so we can use though in create a grid and then we can say well I've got these this stuff these direct children of the grid element and say where exactly you want them on your grid and before we do that there's a little bit more terminology there was a huge amount of new terminology in the grid spec it's a big spec it does things that we haven't been able to do before and so there are lots of new bits and pieces sort of get your head around so when we talk about grids and we talked about tracks on the grid and a grid track is the space between two grid lines so that could be a column or it could be a row so that's a track and once you defined tracks so in our grid template columns or grid template rows we're actually defining the size of the track but by defining a track we get lines so a grid with three column tracks has four lines because you've got one on the end as well these are numbered starting with line one they can also be named which we'll have a little look at in a minute if you've got a gap that acts just like a fat line so it's as if V the line has got wider so you can't position anything into a gap so then that's worth noting is that grid lines are indexed according to the writing mode of your document so if you are working in English you're working a left-to-right language so grid line one is on the left hand side of your grid that's going to be flipped if you are working in a right to left language most of this modern CSS specs care about writing modes it's something that that we care about now because we've realised that the web isn't all in English in a left-to-right language and so there's a lot of things that seem a little bit complex when you look at women it's because we're trying to cope with the fact that you have different writing mode and documents sometimes you have mixed writing modes in you have some left to right and from top to bottom and that's something that these things try to cope with so then we have grid cells and conceptually that's just like a table cell it's the smallest unit that you could have on your grid between four lines so with grid layout you can join those cells together into areas and that's any area on the grid bound by four grid lines so that can include many grid cells it needs to be rectangular we can't create sort of tetris shaped m areas on our grid just yet maybe in the future so let's have a look at positioning things so here I'm using that repeat syntax and I'm creating a grid with three column tracks of one fraction unit each my rows are being created at 200 pixels tall so by default my blocks just layout on that grid but if I position the cards I can position that first card starting at grid column line one and ending at column line for Row 1 to Row 3 so that's the large block on the right the other two items will just position themselves in the space left with these auto placement rules now we can collapse that down to a shorthand so this is the short term so here I'm saying grid column and the number before the forward slash if you start line the number after is your end line same for rows I notice the slashes look really weird to people it's there you can have run out of things to use in CSS and a separator that the slash does look a bit like a division when you're working with numbers unfortunately but that's what we've gone with you can actually write that out as one line of CSS with grid area the order of those values is grid row start grid column start grid row end grid column end which is actually the reverse of specifying margin and padding shorthand and this comes down to writing modes again it kind of had to be in a logical way for somebody and so that was what was decided so that's line numbers you've always got line numbers on your grid but you can also name the lines and then refers the lines by name rather than number which is a bit easier than figuring out exactly which line something is on the grid tically if you redefine you grid at different breakpoints and so if you want to name your lines you do that within the square brackets and then you have the size of the track and remember that we're naming lines here not the tracks and so then when you position things using them you're going to use the line name rather than the number which looks like this you're using that name that you've decided instead of the number you've always forgot the number if you want to use that as well now you can name your lines anything you like really but if you end if you name them - start and - end grid will create a named grid area of the main name use and this looks entirely baffling and I'll show you some more examples later which may kind of bring it interviewers how this works when you can position an item right inside area using the grid area name so why i've done here is i've called these m I've got two layers main end main start that's going to create an area called main and you can also create these names areas explicitly - which gives us another positioning possibility so I've named each card this time with the grid area property and then instead of doing any line based positioning I use grid template areas and describe my layout in ASCII art which is pretty neat I'll show you some more examples of this I really like this method and I've been prototyping with this for about three years really ever since it we got this into into Chrome is live in Chrome Canary behind flags I've been using to the prototyping methods for interface design I'll have to go back and rebuild the stuff and things that work in modern browsers but it's a really nice way because you can just move things around it's a lovely way to play with responsive layouts I think that this is strange as it looks will become very very popular and once you've got it in browsers but there is an awful lot of magic here it's a lot of new stuff and I've aroused through all that mainly some that you've got those slides you can have a look at them later and see how those different bits work but let's have a look at some examples some things that you might be trying to build and see how we use grid in those contexts and we'll start with line based placement so I'm going to create a two column layout and it looks a bit like this now you could build that with pretty much anything and today so we'll have a look at how we do that with grid that's the HTML I've got a parent with a class of rapper and three child's elements and if we don't give it any layout it looks like this so everything's just laying out as you'd expect in in document order so I'm going to create my grid now so I've created two columns two fraction units and four fraction units so I'm dividing the available space into six and assigning it in those proportions we've got some gaps to create gaps between my columns and rows and having done that I get this so I'm not positioned anything but grid tries not to make things all stack up in the corner so what it's doing is using your to placement it's just laying the blocks out laying the child elements out in empty cells to make try and make things readable even if you don't do anything with it but then I want to create my layout and I do that with line based placement so I start the header the header starts that column line one ends up three it goes in grid Row one if things only span one track you don't need to have the end line because the default is to span one track and it's the panel and start to column line one and the content sits next to it a column line two and that's it that's my layout it looks like this and the panel there you can see well on this screen oh looks alright and you see it's at a gray background which takes full height and that's the close the panel and the main content are in the same row and the default is stretched just like with flexbox so the panel's going to extend all the way to the bottom unlike with floats where that background would fit up behind your text and it's this ability for things to react to other elements on the grid that makes this so powerful so if we overlay the grid there you can see how the elements are sitting according to grid lines and again those fat lines are just like a city line the content start afterwards later on our post few slides later you'll be able to find that example so if I want to put a footer on the layout I just add it to my markup and I say that I'd like that to stretch right across the grid and go in grid Row 3 and there it is it's not great doesn't need clearing it can't pop up over the content and it doesn't matter which column above it is longest because it's in its own row it's always going to stay below the columns above we didn't actually declare any rows so we were adding things too as I mentioned before if you keep on adding things in adding things into rows you'll just get new rows and they'll just be autosize so you don't need to declare all of your grid and carefully you don't need to have rows that are at all so they're going to be also by default so grid will just create those Auto sized rows as you position elements now when I'm showing this to people they say you know this is a bit like table based layout anyone who's old like me so like there this is this is a bit like using a table but of course unlike using a table and grid doesn't rely on your content be in a particular order and because you described in CSS you can redefine these layouts and you can change things around at different break points which you can't do with a table if we wanted to make our layout responsive we could define a single column grid to start with and perhaps just use that to reorder some of the content if we wanted to which would give us something like this and narrow width and then we redefined the grid in our media queries and also position our elements so we go back to that two column layout that we had before so grid makes it pretty easy to lose stuff around based on media queries and we've looked at using these line numbers and I mentioned that we could use named lines so we'll have a look at how our layout looks if we start naming the lines so again this is just the same layout and the same markup so this time when I create my single column layout here I'm just naming the row lines and the value there otto is describing the grid track and the name is for the line before or the line after in the case of the last line so this when we position our items becomes this again really you sort of responsive designs even as you redefine your grid you can give things the same line name she died after a mental track of where your numbers are and then we have those named areas so this is using the grid template areas property and once again we'll have a look at the exact same layout and how we would do that with named areas so outside of any media queries you need to assign a name to the various page elements again you name them anything you like really and we're using the grid area property and we're saying the main header is called header and so on so we name everything when I set up my grid for the mobile width layout this is a single column with the rows and instead of positioning the item with its own rules I just create the layout as the value of the grid template areas property so that basically is it that's my layout I've said I've got this grid it's got these these properties and this is my layout it looks like this so that's it so we end up with a narrow layout and that's it what it looks like the named template areas overlaid and this looks a bit more obvious when we go to something with two columns so that's the wider layout inside the media queries so again I'm just describing my layout in this ASCII art manner so we get this layout with the name template areas overlaid and I say really nice way to work and you play around with the stuff you can move things around really easily and a very nice way to work with the team you know it's very obvious you can look at what the layout looks like you can see it there in the code if you repeat a name that causes it the spam cells so where the head of stretches right across the top you can see that I've repeated that and as with creating it at any area not in any way the area has to be rectangular we can't have like an l-shaped area at this point and you can have multiple whitespace characters in between those repeated areas so you can line up your ASCII art if you want to leave a cell empty just use a full-stop character or multiple full stops and no space in between and again for the purpose of lining up your ASCII art so if on the bottom there I have a full stop and then only mention footer once that means the footer will just sit under the content and not span and will get empty space and this is a nice thing with grid you can have white space you can have white space whatever you like on your grid nothing's going to rise up and fill up that space I mention these implicit named lines and areas briefly at the beginning so something that happens when we name areas is you get lines for free you get named lines - so that's the layout and then below that I've got an area named pest and I've said I'm gonna start that on grid column content start and then it's going to start on row contents down end on row footer end and that gives us this we've sort of dropped this block on top of the content and we've used named lines that we didn't name but we've got because we've got an area called content we've got content start and content end on both rows and columns this also shows you can layer items on your grid and they just work with Zed index just the same as absolute positions items as you can stack stuff up and that's that works really nicely if you want to you know layer things you could layer into different transparency and so on and get some quite nice effects so they were very simple examples but I think that when most people think of grid systems you think of the 12 and 16 column grid systems that we get into the bootstrap and foundation and so on and that was really the first thing I want to do when I looked at grid I'm like well can we reproduce these things so this is example code from bootstrap and see we ended with an awful lot of stuff we're essentially describing our layout in markup and when we do this I know if you can get away from that by using fast and so on but it can be quite a heavy way to work conceptually quite a heavy way to work because you're having to describe layout in some way before it really gets rendered to the screen so the nice thing with grid layout is because we're doing everything in CSS we can describe down the size we can add new breakpoints at any anytime and redefine the description and but it does mean that when we need to think about where can I replace bootstrap with grid layout we're actually looking at a different way of working we're working the other way around and rather than just trying to map what we know about bootstrap on to grid so to kind of show that this is a grid layout called skeleton I don't know people may have come across that it works in a similar way to bootstrap is just slightly lighter weight so it kind of makes for an easier demo it's a bit cleaner so this is the mark-up for the skeleton grid you can see we have to add divs for rows and then state in the class the number of columns a column can span so it's pretty much like the rest of these things and that little example there it creates a grid that looks like this which is a little demo for the different sizes of the columns you can create so that's using the skeleton grid so how would we do this with grid layout well the first thing we do is you remove the row classes you don't need those and we also don't need to describe our grid in the markup so we could here I've just called these things box 1 box 2 I've got no semantics we could be using semantic class names if you wanted the important thing is I've removed all description of how our grid works from the markup and then I create my grid so I'm using the repeat keyword here to create a grid with 12 columns I've also named those lines which means that I have multiple lines named coal for instance and this turns out to be quite useful because you can place items on the grid using the named lines syntax so with box one I want it to start on coal that would be the first night line named Cole and I'm saying span four and then I want that on the first line named row and that's going to put my box you can see the highlighted box there that's going to sit there so if we look at something that's further down in the grid this is box eight so we start on column line seven spanning three lines so call seven its column line seven where we've got the same line names so we don't need to worry about which line of the grid the third line after column line seven is we just know we want to span three column tracks and so I can go around and position all the items and we end up with this I say this is all online you can have a look at it later but grid lets us go one step server and that to also control the grid rows so we can span rows in exactly the same way that we span columns and this is something that's really really difficult to do currently with the existing layout methods we've got and so by doing this we end up with this third example when I'm actually spanning across the rows as well as across columns and you can see the heights go to the gutter no matter how much content in the block and that's similar to flexbox we're kind of working in two dimensions here not just across the row but also down with VIX the column as well that it's all at that URL you can have a play around with it later and so this is how then we would rebuild our two column layout using that skeleton inspired grid we've got our header we say start at the first line named call and spam 12:00 go into the first row named row our main footer again that spans across the 12 columns the content and we want to span eight and the panel starts at the first column and spans four which gives us this layout again but this time using more of a traditional sort of twelve column grid and of course you can create any kind of grid you want if you want to have an unusual number of columns and try different kinds of columns you can do that so that's all of that URL you can have a look so it makes it really easy to play around so here I'm just changing where my footer fits I'm changing the m grid row n to make that span down and I'm moving the footer over to one side and just by changing three values in the CSS we can end up with this with the footer then moved across and the panel going all the way down it makes just really easy to play around with how your layout works so that's it that's all you need for your layout based on grid you've not included any framework there's no additional CSS that is absolutely it and the thing is what is going to happen and I can guarantee you what is going to happen is that just like flexbox we're going to see everybody posting their grid layout based grid phone works to github but please if you think of doing that think about whether that abstraction actually adds anything or whether it just adds a sort of weird layer of complexity on top of something because a lot of the time we're not going to need a grid layout based grid framework because grid is a grid framework built right into CSS right at the beginning of the talk I was showing examples where I was creating a grid and things are just laying themselves out sort of it into those into the boxes into the grid and they were positioning themselves without was giving them any placement properties and there's a bunch of rules around this Auto placement of grid items there's in the specs there is thing called the grid item placement algorithm which looks a bit like this but then it goes on into all sorts of compute things and the thing is with CSS specs they're actually reasonably readable and once you get used to certain the language that's used whether CSS working group there's an awful lot of stuff in there which is for browser vendors so people actually implementing a browser if you want to get really really deep into how CSS works and can be bothered to sort of plow through this language you can quite useful you can learn off a lot of things about how how things work we've got this algorithm there in the spec so that implementers know how things should lay out and learn is it useful to know this happens because it can be very odd if things start placing themselves in weird places on your grid you can also kind of use this to do interesting layouts things so our original example and when we created that grid and we didn't position a thing I said well grid trying to lay things out without them overlapping and it's just putting each child element into a cell of the grid and that's what will happen if you don't do anything so let's see how we can play with this algorithm to do an interesting layout so I've got a list here it's got a bunch of images in it and the UL element there has got a class of wrapper and that's what we're going to turn into a grid so the children there are the list items so in creating a grid with four equal columns on that ul and if we do that then we get this so you can see they're the images are laying themselves out on the grid they're going one into each cell now some of those images are taller and so they're sort of taking up the full height and they're making the height of that track the other things because they're in landscape format they're sort of staying and smaller now it might be quite nice to have those landscape images and make them span to grid tracks and that would kind of even out the proportions a bit if it was landscape it's going to go wider and so I'd added a class of landscape onto the Allies that contained landscape images and so then I can just say for anything that's got a class of landscape grid column end spam - it doesn't matter where it starts on the grid it's going to span two tracks and so we get this that's quite nice so grid goes along and it finds that portrait image and it puts it into the first cell in the next one it's got a class of landscape so then well that's going to take up two tracks and then we've got a gap because the next image is also a landscape image and obviously isn't going to fit into that little gap so a grid sight okay leaves the gap and just moves on to the next row so it's progressing forward it's keeping the elements in source order unless I add a property grid autoflow with a value of dense grid is now back filling the gap it's moving through the content it encounters an image that will fill a gap that's already left it picks it up it takes it out of dom order and it puts it in the space so item 4 now comes before item 3 in the visual display which is pretty cool for your image gallery not so great for your form and I'll come back to that later but first this is like the number one question that people ask me when I talk about grid they say is grid a competing specification to flex looks as if the CSS working group are sort of having some kind of CFS deathmatch between two specifications which will win we're not and grids essentially one part of a new system for layout it's a system that includes flexbox because there are things that flex box is pretty good at and which is different and in subtle ways to grid the two specs share common features and this is where we bring in this module that managed to start the box alignment module grid uses these alignment properties that are part of the CSS box alignment module level of 3 and what this module is is all of the cool stuff that's in flex locks for alignment the stuff that makes things equal height the stuff that lets you do things like M space between that's all defined in the box alignment module and what this means is we can use this in other layout methods so this is flex box so we say wrapper display flex and then we've got our items there so the the Flex container height has been defined by the portrait image we could do the same with grid we just say display grid and create a four column track grids using the fraction unit get pretty much the same layout and we're doing the alignment there with those box alignment properties so this is done with Flex who say align serve center with your line self x star align self flex 10 so that's aligning things inside a Flex container and then with grid we can do align Center align star start and align self end so we should start and then drum and flex start and end there so then we've got a layout that looks pretty much the same whether we're using flexbox or grid it demonstrates those alignment properties so why should we use grid rather than flexbox and there's a fairly simple rule around this flexbox is essentially for what we call one dimensional layout you're laying things out in a column or a row grid it's a two dimensional layout you want to lay something out in columns and rows at the same time and here's kind of this basic example of that I've got a set of items to using flexbox my Flex basis is 200 pixels the items can grow and shrink and I'm allowing them to wrap and so we get this so as the Flex items wrap each row becomes a new Flex container and if you are working in columns you turn row into column and each time it wraps that just becomes an entirely new flex container space distribution happens across the row so when we get that final row that's only got two items in they split the difference they don't line up underneath card one and card two you kind of have to break the Flex flexible nature of flex box to get those things to line up so this is where you want to control both rows and columns at the same time and that's how you do it with grid so here we're saying and repeat autofill so as many columns as you can get into the container at a minimum of 200 pixels and a maximum of one fraction unit it'll give you roughly the same thing as we had with Flex box in the Flex basis and then we get this so you can see the things here and not spreading out across the bottom they're lining up in their rows and their columns because we're working in both dimensions at once another way of thinking about it is that flex locks works from the content out you've got a bunch of stuff and you just say I want you to spaced out evenly across this row or across this column well as with grid you work in the other way around you're creating a grid and you're saying right stuff fit yourself into this grid so it colors the opposite way if you with flex fluctuation content out with grid you kind of work in grid and then and then working in so that a quick example of how these things might work together this is the tux plus website they have a common navigation pattern that we see you get these fixed height blocks the only way to do this with float is to set absolute Heights on things now as we know this is fine as long as you have absolute control of your content but like in the real world someone comes along and ABS too much stuff into a box when it all overflows and looks a horrible mess and I wanted to see if grids could kind of build this sort of pattern in a more responsive sort of way and it turns out it can so this is the layout i created and I'm redefining the grid at two great points after that initial mobile width to sort of match the pattern that was used on that site so while the rows appear fixed at 150 pixels which is what they were on that site as soon as I add extra content the entire row expands down to contain the content so as well as the box the news story about angular balloon fiestas that stretches down put so do the images that are next to it they have to get taller because that whole row gets taller and so that means everything still lines up at the bottom but we've got this space for extra content and this works by using the min/max function in the track sizing for rows so I mentioned earlier that the grid Auto rows property gives the height to our rows so if it went when we create euros new Pacific grid so here I say grid also rows min Max 150 pixels being at least as tall as 150 pixels so don't squish down to nothing but then have a height of auto and a height of auto resolves to the height of the content that's in the box so you you're always going to have tracks at 150 pixels tall but if you put more than 150 pixels and stuff in that track is just going to grow to contain the stuff and everything else across the row will also grow and so you're not going to end up with content overlapping so we can build these very precise looking layouts that don't blow apart if we get more stuff in than we were expecting and then sort of just as a note there I'm using flexbox as well inside the areas to push the content the bottom of cells I want content aligned I'm using flexbox in that basis because I just want to sort of push my content about another sort of real-world thing you've got content out by CMS not all CMS's are very good at stopping people adding more content than expected so you know you come into work and someone has added another news story to the box that wasn't supposed to have another news story well grid will just create a new row and let it go in and doesn't look it's not what you designed it's not what you wanted but it's not overlaying the rest of the content it's not a real mess you can sort it out again there's kind of tolerance here for the real world of content on the web now grid and flexbox as I mentioned where to auto placement there is a possibility to make a horrible mess in terms of accessibility when you have a layout method that lets you reorder your content and I think it's really important when we start to look at grids that we also think about what we're doing to the content and what we're doing to a content order for people's having around the document and so on cuz it's quite possible the creators can disconnect between the source and how it looks ideally grid should help us make really accessible source documents and then use the power of reordering to display stuff the best way for each great point there is a real danger that the reordering capability will have people just thinking when it doesn't matter anymore let's just drag things around and kind of forget about what the source order is like and potentially worse is the cause elements only become grid items or flex items if they're a direct child of the Flex or grid container I kind of worry and this goes back to my working with Dreamweaver in the past there'd be a temptation for authoring tools or potentially JavaScript frameworks to strip semantic markup so they're making everything flat so everything becomes a direct child of the grid which would make it obviously very easy to position things but wouldn't make for very useable documents and the spec does kind of warn about this and it's in the in the specs that we shouldn't be reordering things and if you want to reorder things you should do it in the source as well as in the visual display but I think we need to having conversations about how this stuff works with accessibility and that's saying that's happening in the working group as well but suddenly I hope that a lot more people will get involved with and if you want to sort of think about this stuff aging Miceli's got some examples how grid another layout methods work with things like tables I want to reorder things and this is a fantastic video from Leonie Watson who is a screen reader user herself and so she's talking about this accessibility issue she's talked about flexbox but a lot of the things she mentioned you know are exactly the same in grid potentially worse so when can we use it surely it's years and years away from this been useful in browsers so let's have a look grid is really interesting because it's the first big spec to have ship since the move away from vendor prefixes to experimental feature flags grid has been in development in browsers for over five years if we take a look at can I use you will notice something interesting at the moment there is only an implementation live-in into an explorer and edge and that's because that's because this spec came from Microsoft and it the original editors of the grid spec were from Microsoft it was implemented in IE 10 in experimental way behind a prefix and it's still there it's still in edge it's on the backlog to be updated you can go and vote to encourage them to update the implementation I would suggest that you do but they've what they brought us great I mean the spec came from Microsoft don't think we'd have it at all if it happens but early implementation and it meant that people like me could start writing about it and if you look at all that green that's because grid is going to pretty much the complete level one specification very interoperable into those browsers in March that will be Firefox that would be Chrome that will be Safari in March that's huge that same has never happened before the a lot of these examples and only worked in chrome for years behind a flag that blink implementations been underway for several years now actually been done not by people at Google but by a consultancy called agalya so open-source consultancy their work has interestingly been sponsored by Bloomberg so you can thank Bloomberg for the fatback chrome and also WebKit so Safari and have grid in so if you use chrome 56 that you will need to enable the experimental web platform features flags that's the current chrome chrome 57 grid will just be live it'll just be there and that should be in March and Safari 10.1 also includes grids and flags again that's probably march/april something like that Mozilla also shipping in March it's currently behind a flag unless you use the developer version or nightly but that would be coming out you know around the same time I try and keep this page up to date it also includes links to the meta bugs for each of the browsers which is the sort of the big bug that leads to all the other bugs so as it's getting finished if you go and look you'll see that an awful lot of stuff is now done we're really talking about sort of the edges of this instead of getting tidied up this has been a huge interoperability effort that would get in grid in all these browsers at the same time it's been really very exciting to follow grid itself is it candidate recommendation which in terms of service working groups that kind of means it's finished but too soon to exit kind of it recomment their recommendation we need to have two interoperable implementations everything in the spec and we're getting there there's there's some chunks respect that probably aren't going to get implemented by anyone but what is being implemented in the browsers is pretty much the same in every browser the examples I've been showing you the stuff I've got on my site all work exactly the same way in those browsers but of course what about the old browsers now a lot of you are probably going to find that come April about 70% of your visitors are going to have grid layout that overnights that is going to happen that's pretty cool but obviously there were going to be some people on our browsers so what about them well CSS has given you a solution it's called feature queries and the app support rule and there's not going to be a browser that supports grid but doesn't support feature queries in fact there will be of any new things that come into CSS from now you can use feature queries to the text so feature queries pretty neat if you've ever used modernizr you know how each crews work and if you've ever written a media query for like a mobile first design you know how to use them so this is a feature query we're saying we have our code for our non grid browsers then we say at support display grid and then we write our grid layout code and browsers that don't support grid layout they're not try and do anything with it so for future queries you want to write your CSS few browsers that don't have support then override those properties inside the future queries and that's a really great article I've linked to there and by Jenn Simmons that explains how to actually do that feature queries are fantastic and they really do give you a great way to sort of create grid layout so they aren't going to affect other things and it's worth noting that it's pretty easy to over like old stuff with grids because it's a value of display so if something was already displayed block or whatever you'll just be overwritten by grid and floats don't take effect when something's of grid items you don't have to do a huge amount of overwriting to enhance your layout with grid layout so don't have a lot of time to talk about that that's just another example and using feature queries and sort of build up and layout and something else I would say about old browsers you don't have to turn your whole layout over to grid you don't have to say right that's it I'm thrown out bootstrap I'm just using grid layout now and great if you can if you've got the sort of browsers where you can do that but you can use grid as an enhancement you know use it for laying out galleries of stuff laying out product doing things that you can do in it in a different way and then make a really good layout using grid because you might have 70% 80% of people very quickly you're going to get the cool version and the others are going to grow into it as their browsers update so don't think that you know you have to do everything go all-in you're going to be able to learn good layout by doing tiny things with it and then you'll know how to use it so when you can actually use it for more things and fuller layouts it really is a great time to start learning this I have masses and masses of code I've been working with this for about five years and so I've got code I've got video tutorials that grid example.com that's where I put the stuff that I build and I say I'll be tweeting these links and share these slides and things later so there's loads of examples there's also videos of some of the sort of the various bits of disgust also and I'm going to come to the pub for a bit I did get up at 4 o'clock this morning to fly here so I'm not sure how long our last the pub and how sensible I'll be but if you think of a question Lisa and most of these ants things questions about grid tend to be best answered in code and I've got this ask me anything so it's github issues you can go vacant post an issue saying oh look I've built this in code pen it looks a mess what's going on with it and I'll have a look and it's handy for me as a service working group member to to answer these questions because there are things we can't answer or if the spec isn't very descriptive and it's useful to know so I'm very happy to answer questions that you post there so to do and if you can post a code example that really really helps and the coarse grid is about to this is a very good time to report any browser bugs and you find anything I've written up some notes and this is M David Balan from Mozilla saying you've got a couple of weeks please let us know if you find any bugs if you do find something and if you think you found something and you want to ask me do and I'll have a look and see if I can confirm it's a bug and that that linked is some notes I made about reporting bugs in browsers we can all report bugs in browsers it's really helpful it makes the web better for everybody so thank you very very much my slides and stuff are there I'm at mate Sandra on Twitter and I'm happy to answer some questions [Applause] so I have a microphone so who's who has the first question do we have any questions I'll pass this to you where you make for this corner I could do with the exercise in goodness yeah and so we've got the support queries which work great for replacing things with a display:block layout or something like that but for layouts that can't do that is there any polyfills or anything like that that exists all right there is a polyfill it's very old it's an update I wouldn't use it I wouldn't try and polyfill grid if you try and polyfill if you're trying to do write your whole layout and probably feel that that's going to be really janky and jiggly and nasty I think if if you've got a layout that really needs you know kind of full support right you know right back then you're going to have to use older layout methods I think that's this is a pragmatic solution I mean yeah I'm using using this stuff and will be I mean our CMS perch we have to support that's why nine because people put down from the client to the i9 I know the pain there's no ivory tower here you know so like I'm like just really carefully using flexbox and then hoping is not going to break so yeah you know I think I wouldn't try and probably feel good because it's you know it's not going to work that well I mean we'll see what people caught with it maybe on on a small element basis you could do that it's not the uTorrent full layout is going to get really jiggly and nasty anymore for anymore you're not too far away keep your face yes acylation maybe I don't look like a wreck right so whatever grid can do I could see that there is a codeshare between Radin flexbox and it looks like a lot of browsers now support flexbox as well and can we do but whatever grid does including the responsiveness ordering etcetera using flexbox and positioning is it possible no I mean the stuff in grid that isn't the just doesn't exist another layout message you could use though flexbox as you could enhance flex with grid quite easily because again you know another value of the display property so you can have something and actually exams are linked to I've done exactly that I've used flexbox and they have enhanced it further using grid and so if you kind of clever with the layout message because they're sharing properties through things like alignment and stuff yeah you could have something books get pretty well with the Flex box then you really tighten it up with grid and I think that's the sort of stuff that is the kind of pragmatic way of working as we're sort of getting more and more stuff with support yeah you know really enhance it look like can we use both grid as well as flexbox layout inside like nested grid and mr. flicks yes yeah so you can nest here you can nest grids so you can have you know an item that is a grid item can also you can then declare display grid on it and then build a grid inside it or you could say display flex and use flex items inside it so you know I think I think it as we start to use it we're going to realize where which is best used where and and sort of play around with that I'm really excited to see how people use it in in kind of the real world rather than just all the experiments that like I've been building what is the performance difference if we I mean does it take much CPU or something like that great looking really good there was empty the influence to agalya we're doing some performance testing and we're coming up with some really good results it's certainly there's an issue with Flex box we try and do grid like stuff you get this kind of jiggling thing as it load all loads inks it's good the way it calculates stuff you don't have that with grid because you stop saying well here's my grid and I'm putting my stuff into it rather than having to work things out on a row by row basis so that content shifting thing you get with Flex box you're not going to get with grid and obviously it's been built to be to be as performant as possible and and yeah I mean there are certainly got links but like and I can post around on that say Oh golly we're doing on testing but it's certainly looking you know pretty speedy and per unit your average to a website something hyah did this by any chance work with any email clients I would if you know your name if you want tables you want table to fit your mail time yes table the lives then emails a terrible terrible thing okay does this mean that we the mantra of mobile first we now need to think accessibility first and then just build on on that is that where we're going with this I think I think generally thinking accessibility first is a good way to start you know what what what works in terms of a document and in terms of the different ways and the biggest issue with grid isn't things like screen readers so much I think as in people who keyboard navigate I keyboard navigating locks I'm kind of pretty much one-handed ever at my elbow so I have around documents all the time and it's flexbox you can end up essentially destroying the content order by moving things around obvi with grid you can do that in two dimensions so you could end up with a situation where you know you tab to two items and then you end up like right down the bottom of the page and then you back up again and that's going to be pretty horrible so that stuff is really still being worked out and I think it's a conversation that's going to be ongoing well I think you know test this stuff and if you know you are reordering things just make sure you not just doing it for the visuals you know if that thing needs to be elsewhere in the document move it in the source rather than just sort of thing you know what I can just move it because I'm using grid I can put it down here so it's kind of staged it's another level of care we need to take in terms of how people are using our stuff but yeah and yeah I say I think it's saying that we have to kind of be working out and assume that they weren't group of thinking about as well so with the grid layer you can't assign just say right I want to have orders to be left to write them in down you can't you can't do that no and there's a kind of this kind of a debate at the moment actually with flexbox Firefox has what is a bug but they think a lot of people think they're doing it the right way they're actually reordering things they're reordering the tab order based on the visual display order of so if you say oh I want my items to run from right to left and Firefox will work that way around which actually is a book when you look at what the spec says but a lot of people say well actually we should follow the visual order so I think this stuff may change it's certainly worth thinking about and certainly testing if you're doing a lot of reorderings I say it's when you start reordering things or if you start pulling things out of order with Auto flow it becomes a problem you can do blowing that that because you've been going very careful to do everything if you start so and is it supported by any pre processes at the moment like through the generation SAS support grid they ship to do it there was an issue with faff I think with the named line syntax and they then in recent release fixed it so you can yeah you can use pre-processing this stuff I think there are some post CSS type things to write grid with different syntaxes and stuff but I haven't looked into that any part of this animatable and do you have any examples if it is right so you can animate grid tracks because you can only animate things where there is like a between state so what you can't do is like animate an item between cells and things because there isn't there between State for that we don't really know what that would look like but you can animate the tracks and so on so yes you can sort of play around with that you can certainly do things around animations but yeah I think a lot of people think there should be as kind of just slide things around you know but that's not going to work because we don't have an in-between state for that real good yeah oh there thank you very much Rachel [Applause]

Channel: Frontend NE

Views: 56,512

Rating: 4.9521437 out of 5

Keywords: frontend ne, frontend, front end, conference, meetup, talk, css, grid, css-grid, layout, css working group

Id: N5Lt1SLqBmQ

Length: 59min 14sec (3554 seconds)

Published: Thu Feb 16 2017

Reddit Comments

[u/SlightlyAnnoyingBot]

Hello! It looks like you posted a YouTube video. I am here to provide you with unnecessary meta information about the video. Enjoy!

Category	Information
Title	CSS Grid Layout Rachel Andrew February 2017
Author	Frontend NE
Views	40
Duration	00:59:15
Rating	5.0
Upload Date	2017-02-16 11:00:01
Category	Science & Technology
Keywords	frontend ne frontend front end conference meetup talk css grid css grid layout css working group
Thumbnail	Thumbnail
Video ID	N5Lt1SLqBmQ

I'm a bot working hard to help Redditors find easy information about YouTube videos posted here. If you are unhappy with my services or found a bug, please write a message to my creator