Start using CSS Grid Layout by Rachel Andrew

okay hello I'm Canada PHP developer at Java conference so we'll see how this goes this is their all front-end stuff anyway so I'm Rachel Andrew say I feel a little bit of an outsider here but I'm a web developer and I've been working on the web since around 1996 which makes me old enough in terms of CSS to remember when the arguments were kind of for and against whether we should use CSS - all I remember CSS first appearing and been something that we could use and I was using CSS for layout right back when we were still having to support Netscape for if anyone can remember that and sort of arguing for using CSS rather than tables and at around that Tower became part of the web standards project so I've had a very very long involvement with open web standards and that's something I really care about and is saying I carry on doing no matter what else I do in my career so of the interest in the sort of stuff I'm talking about today goes right back to that time I've always been very interested in layout and it has to be said that what we can actually do these days with CSS alone is pretty amazing when you come from where I did with with the web even if we ignore everything else you can be ignored JavaScript the stuff we can do with CSS you can do animation with CSS we can do whole load of visual effects things that we were you know in the past having to chop up images to do all of this stuff would have really blown my mind back in you know 97 or actually even in 2007 so we've come a very very long way but in one place we haven't and that's really in terms of using CSS for layout what we're doing now doesn't actually look that different to what we did you know 10 years ago we're using floats and their associated clear fix hacks we're using absolute positioning and dealing with things sort of overlapping and going weird we're using a display table to display things or some kind of fake table and dealing with whitespace issues if we use inline block which is quite a popular way of doing layout and recently we've started to use flexbox and flow Xboxes fantastic it's a wonderful spec and I think a lot of people see flexbox as being the kind of savior for all these our layout hacks but the problem is that flexbox is designed for laying things out it kind of in one dimension things that can be represented as an unbroken line so if we start trying to use flexbox for grid light layouts we just go down this other route of more layout hacks it's not the Silver Bullet for our layout issues it's just one part of the puzzle and obviously we're all doing layouts and we're doing quite complex layouts were laying out where applications but the cost of taming these layout methods you know all the time that we spend learning how to do this I'm teaching everybody else on our teams how to do this we make compromises in terms of document semantics how you know we can often get kind of the semantics document we want and then we can get one layout and then we do respond to design and we want to move something somewhere else and so we end up fiddling about with the source to do that they come at a cost of us leaning increasingly on frameworks just to abstract out all of this layout stuff because we're sick of dealing with it because of you know the problems of training people to do it and so we're adding markup to our documents or having to stuff markup in there we're generally using preprocessor to abstract out this stuff because it's hard to do and it's not great and it seems still really really strange that we don't have this way of defining grids and CSS and just dropping elements onto them we don't want to be clearing and hacking around we need fit for purpose layout systems for modern websites and I believe we have that with the new CSS grid layout specification now this is a specification that appeared first in IE 10 and about three years ago I started talking and writing about it because I got very excited because I finally saw something that I thought could solve the problems that we've got so in the next hour I'm going to show you why I love the grid and why I think that this is the layout method that really is going to change how we do things on the web so I've got a ton of code so here is a selection ml it's a div with the class of rapper it's got two child elements one with the class of a one with the class of B and I'm going to declare a grid on rapper and so we do this it's a new value of the display property we set that on the parent element on rapper we using display grid which creates a block level grid you can also use the value inline grid that creates an inline level grid on the element and we then use some new properties these are properties created for CSS grid layout we've got grid template columns for our grid columns and grid template rows to create grid rows so I've got 3 100 pixel width columns here and I've got two auto sized rows if we could see the grid it would look a bit like this and so once you've got a grid on the parent element any direct children become grid items and we can place them on the grid so the div with a class of a I'm going to place it using grid column start and grid column n to define the start and end column lines and grid row start and grid Gro end to define the row lines before and after where that content sits so you'll end up with something like this and we could do the same with B perhaps you want to place the place that bottom Center so we use this set of rules and that places B bottom Center now that's only spanning a single cell but we can span more cells by just moving the end line so if we change grid column n to 4 it then just spans the two cells now all of the examples I'm going to show you are online and you'll find them at that URL and I'll be showing the slides later so you can look at them and there's also a shorthand for these properties so these are the rules for our two positioned elements that's quite a lot of CSS especially got a whole layout that you're describing so we can compress grid columns start and grid column end into grid column and the same with grid row so eight lines there become four and you'll notice there's a forward slash between the values so the first value is start and the second value is end we can actually go a step further than this and take our definition of where to place something down to one line so we're declaring all thought once here using the grid area property now the order of those lines is grid rows start a grid column start grid row end grid column end which is essentially the opposite direction to how we declare margins and padding which I think it's actually quite confusing and hard to read for anyone else or for your future self when you come back to it so I've been preferring to use the the sort of a grid column and grid row properties but it's kind of cool we can declare positioning of an element in one line of CSS it's worth noting if you work with documents that have been right to left rather than left to right languages and grid lines relate to writing mode so if you're in a right to left language the first column line is the right-hand line rather than the left-hand line insulin-like English so that's the very very basic way to position items using CSS grid layout there is a lot more to grid the spec introduces a whole bunch of new stuff which we'll encounter as we go through this presentation about to start with there's some key bits of terminology so we've already seen numbered grid lines we have horizontal grid lines for our rows and vertical grid lines for our columns so this here is highlighted column line two if we wanted content to start this column we'd use the value of grid column start two then we have grid Trax that's any row or column between two row or column lines so here we've got a grid track which will start at grid row start two then we have grid cells and these are conceptually just like a table cell it's the smallest unit on the grid that we can put some content into so it's the space between four grid lines and if we join some cells together we get a grid area that's any area on the grid bound by four grid lines which can contain many grid cells so the area is simply defined just by setting you start and end lines for columns and rows now as I mentioned all of the examples I'm going to be showing you are online they're actually all hosted on this website good by example which is my kind of collection of grid stuff at the current time you can use Chrome with experimental web platform features flag on to see the examples working I'll talk a bit more about where we are with browsers and grid later and actually soon my examples only work in Chrome Canary because a bunch of stuff in the spec changed very recently and it hasn't quite made it into chrome yet so let's have a look at a sort of more realistic example of a layout so we're going to start with this line based placement you've already seen a little bit of that and I'm going to create this it's pretty straightforward layout I'm sure you all know how you do this with the current examples the current layout methods use today so there's the HTML I've got a parent it's got a class of rapper there are three direct children in there if I just style up the page for typography it's looking a bit like this I've got no layout at the moment so now I'm going to define a layout using grid so we set up the grid just like I did before we've got two columns and two rows so this will create three row lines and three column lines now there's a different unit here a unit that we don't use anywhere else in CSS the fr unit this is a new unit for grid and it's a fraction unit it represents a fraction of the available space in the grid container if you know flexbox and you've wrapped your head around flex Gro this works pretty much in the same way so take a really simple grid like this one I'm defining three columns all with one fr as the width so this creates three equal width columns if I change that definition and create one 600 pixel column and two 1fr columns grid will first give that fixed width element six hundred pixels and then the remaining space in the container it divides it into two and gives it equally to the other two if I change that last column to 3f are the remaining space is basically divided into four and the first one gets one FR of space and the other one gets three so this just like with flexbox means we can create fully flexible layouts that have some fixed width elements in them and this is just like the kind of Holy Grail layout that we used to want to try and do when we're trying to do to fix sidebars in a stretchy middle bit and this is something that you know kind of occurs about every basic example of CSS per ticking the past would you know how do you make this particular layout and so that's pretty easy with CSS grid layout it's probably not the layout that were all trying to build these days but it's kind of nice after all this time that we can sort of do it and there it is so back to the layout that were looking at and here I've created two columns we've got two fr and for fr so basically we're dividing the space and the container into six and it's signing two units of space to the side bar and four to the rest of it and we've also got these properties here grid column gap and grid row gap which basically just create gutters between our columns and rows so if we declare the grid but don't position things on the grid we get this and this isn't a strange as it looks because what grid layout does is if you declare a grid and then throw some content at it it will position things inside the the grid cells you've created sort of put one thing into each cell which is what's happening here now that can be quite useful we'll look at that in a minute and but at the moment we'd like to position the items so we've got a header it's got a class of main header it spans across the grid from column line one to column line three it starts at row line one and goes into that first auto sized row the panel is a side bar starts at the far left column line one ends at column line two and it starts at grid Row 2 which is the second of our auto sized rows and the content area it's next to the panel which gives us this the panel here has got a full-height gray background and that's because both the panel and the main content area and they're in the same row so they know they need to be the same Heights each other if we were doing a floated layout for example that background color would sit up behind the content because when you float things each item doesn't really have any relationship to each other now this is a key thing with our new layout methods with Flex box as well as grid items that we put into those containers understand themselves as part of an overall layout and it's this that makes them kind of so cool to use and make such a difference from arts or old-fashioned ways of doing layout so if we overlay the grid you can see that they're the fat lines or our row and column gaps so they act basically just like a fat grid line and as when we start our content after row line two it will start after the end of the gap and you can see the full layout here so perhaps I want to put a footer onto the layout now to do that I just add a footer to my markup I've given it a class there of main footer and our then position it right across the layout from column line one to column line three and I'm putting it between row lines three and four and then we get that we don't need to clear it because it's in its own row so unlike with floats you know we just say we want it to go into this row and it will go there and unlike position things there's no chance of it overlapping or jumping up over the content because it's always going to stay in its own row on the grid which you can have a look at here now that row between lines three and four doesn't actually exist in the explicit grid that I defined when I set up my grid and that's because grid will essentially create implicit grid lines to hold items that are positioned outside of your declared grid so you can keep on adding columns or rows as needed there'll be Auto sized by defaults they'll expand to fit the content you can actually specify those with the grid Auto columns and grid Auto rows properties we want to actually specify the size of them so what this means is that for many layouts you probably don't even need to set up the rows you just can be quite happy if grid just adds rows and things can just go into them now anyone who's actually as old as me and did table based layout when they started doing web stuff and might be thinking well this is a bit like using tables and I think conceptually if you come from the past and you did build things using tables for layout then you probably though that's quite a good way to think about things I think it's how I sort of think about this stuff in my own head as I'm working it out but unlike tables for layout grid doesn't rely on source order if you're using tables for layout you have to kind of break things up and in into the table cells grid doesn't rely on on that source order and because grids are entirely described in CSS it means that we can take advantage of media queries and we can move things around on the grid at different break points we can also introduce grids at different break points so we can start with no grid or start with one grid and then break things out into two and we can do that at any break point so we'll have a look at how we might make our layout our simple layout into a simply sort of responsive layout and so I'm starting mobile first and here I'm declaring essentially a one column grid and I'm using grid layout just to rearrange things on the grid so end it with something like this from an arrow layout and you'll find this being built up there so I then redefine the grid within some media queries and I'm positioning my elements and basically we're just going back to that two column layout with a header and footer that we had before so grid makes it really easy to move things around based on media queries and grid because it takes things away from this kind of concern about source order you can start with a good semantic document and you can then move things around if your different layouts if for instance you've got you know some adverts that you don't want to appear right at the top on mobile and you can then move them out the way and then put them into the into the sidebar wherever when you add a desktop layout it makes it very easy to let that user experience dictate where things are as opposed to having to worry about you know where they are in the source or whether you're going to be able to make that work so we've looked at numbers positioning things using numbers but you can also name our lines so I'm going to stay with the same layout with the same underlying HTML markup and we're going to have a look at naming the lines and that's at this URL so this time I define my single column layout and I name the row lines so the value auto or whatever is actually the grid track so we're naming the lines before at using the square brackets and in the case the very last line after the line and then you position things exactly the same way as you would with line numbers except you use the name of the line so this becomes this this is obviously easier if you're working a team and also with responsive designs you're not having to wonder like you know where does the content starts at carts don't start on line two or line four as we move around the different break points if you name the line is the same then you always know always starts at content start or whatever and I think it said bit of a nicer way than dealing with just n numbered lines you can of course mix the two you can have some named lines and then position something using numbers as well so that's lines and that's probably the sort of simplest way of using grid and in terms of be able to see how it how it structurally works but there's a whole other way of working with grid and that's using named areas using the grid template areas property so I'll show you how we would create our layout using that method now we're sticking with the same markup and the same layout that we want to create but this template areas one is at this URL so the first thing we need to do is give the areas on our grid and name and I'm doing the outside of any media queries and we use the grid area see for this now grid area was what we used for that very short one line shorthand and earlier on but we also use grid area and to define areas on on the grid to give them names so here I've named the main header header and the content content and so on so this is why I set up the grid for the mobile width layout so I've got that single column layout with rows separated by a 10 pixel gutter so this time I set up my grid and instead of positioning all of the items with their own rules away from this I'm just creating the layout as the value of the grid template areas property so that's all I need to do to create a layout so that's the narrow layout and here it is with the named template areas overlaid so that's it that's all you need to do and then we can go back to our wider layout here within the media queries and again I'm describing the layout in this sort of ASCII art manner and this sort of idea has been around in CSS specs for a very long time there were very early kind of template type specs where this idea shows up and it's now been brought into the CSS grid specification it's a very very nice way of doing layout so we've got a layout here and then we overlay the areas I think this is a great way to prototype layout it's I've actually been using it I do a lot of application layout stuff and for our product and I use this although I can't use it in production yet because it's not out from behind a flag I use it for photo typing because it is so easy just to move things around see how they're going to behave at different responsive breakpoints it's going to be a very nice way of working there's a couple of things to note about doing this if you repeat a name that causes the element to span the cell so see we've got header and footer in repeated that just means it'll just span over and you can have multiple whitespace characters in between in order to line up your ASCII art and if you want to leave a cell empty you use a full stop character or you can also use multiple full stops with no space in between again that's part of the specs that people can line up their ASCII art and so you can actually see the sort of visual representation of your layout as the value out of that property so here I've got footer instead of repeating photo so it spans right across the bottom I've got a full stop character and then footer and so what that does is it means that the footer just sits underneath the content there and doesn't span right across so as I mentioned before you can kind of mix the different ways of positioning things you can mix areas with blind based positioning you can mix named lines with numbers but something quite interesting happens when you use these named areas grid basically creates you some named lines to match your areas so there's the layout that we had before because we've got this named grid area that we've called content grid is going to create for us content start and content end for the rows and the columns so where you've got m content you get content start and content end which you can use then as column start and column end and content start and content to use in the row definition so I'm positioning this area test and I'm positioning it and to start in that the column content start finishing the column content end start on the grid row content start but finish on the grid row footer end which will give me this very attractive result but what this demonstrates is something else that's interesting about grid and that's you can layer items so unlike as a rolled school tables for layout you can layer up items on the grid which creates all kinds of interesting possibilities and you're just using the z-index property there to stack things up and to stacking order so those are very simple examples of doing layout they were very simple layouts and you could achieve those layouts with all kinds of methods and I think when people think of grid systems they're not thinking of such simple layouts is that what you're thinking about are these kind of twelve or sixteen column flexible grid systems that we are already using on the web and with ten be using frameworks for so here's the example code from the bootstrap framework this has their sixteen column grid and these things really help developers avoid all of the maths and the kind of hair-pulling of working out the percentages to create these flexible grids but there's a problem with them and that is that they are conceptually very very heavy because we're describing layout in markup and you know whether you're someone who cares about putting presentational classes in markup or not there's only so far you can go with stuffing a description of your layout into the HTML markup and of course sometimes you can't even get at the HTML markup and you know if you're working with the system where you just can't change the mark-up it's coming out of something coming out of a CMS or whatever you can't touch it then it's very difficult to use a lot of these frameworks because they do rely on putting a representation of layout into the markup so the nice thing with grid is that of course you're not defining layout in markup you don't need to do that it gives us the ability to flexibly redefine the grids at any time if some new device comes out that means you want to take a different breakpoint in there you don't have to go back to your documents and put code into the markup you can just do that in the CSS and also when we're looking at replacing something like bootstrap or another grid system with CSS grid layout we need to think in a different way and as I've been collecting examples of grid I'm getting a lot of people sending me stuff and saying oh I don't think you can do this with grid layout and what they've done is tried to translate these kind of conceptually heavy you know markup based grid systems with grid layout and it kind of doesn't work like that we've got to think in a different way so let's have a look at that the typography and my examples comes from a CSS framework called skeleton now that's a fairly lightweight CSS framework it includes a grid and it does a similar kind of thing to bootstrap but it's a little bit lighter weight in itself so it's a bit easier to see what's going on however it's similar to bootstrap in that you have to add a divs sort of rows around your markup and then you have to add classes to each element to achieve the grid now before I show you how to reproduce this layout with CSS grid layout there's a couple of new concepts once you're creating multiple column grids the definitions are going to look a bit verbose if we have to specify you know 12 or 16 columns and if they're all the same we can use this repeat keyword so the repeat keyword basically you have repeats and you open your brackets and you say how many times you want to repeat the pattern and then you have the pattern after a comma so here we're saying repeat four times and a 200 pixel track and then a 100 pixel track now we looked at named grid lines earlier and the example I'm gonna show you uses them but if we're using this repeat keyword I'm a creating repeating pattern then we're going to end up with multiple lines all with the same name now this is really useful because we can use a span keyword to span multiple lines so here I'm naming some lines as Col a and called B and the line before a 200 pixel wide track is call a and the line before the 100 pixel track is called B so when I position my content I start on the second line named call a so call a two and then I span two lines so that essentially spans two tracks a 200 pixel one and a 100 pixel one or I could position something on the second line named Col a but spam two lines named Colby which would take me over three tracks in taupe in total to the next Colby line so let's see how these things then work in a layout so that's my markup for the skeleton grid you can see we've got these divs for rows and then we've got classes which have a number of columns and columns at the column conspan now that's not as bad as a lot of the grid systems out there but again we're describing layout in markup now this little example looks like this using the default skeleton grid so I'm going to try and reproduce this with grid layout so for the grid version the first thing I do is I remove all of the row divs because I don't need them and I also remove these classes that describe the layout because I don't need to do that either so here I'm just using the classes box one box two because this isn't a sort of a real layout but in reality they could be semantics class names they could be content or sidebar whatever you liked so we've now removed any description of how the grid works from the markup and I then create a grid the declaration here looks a bit more complex because I'm introducing this repeat keyword and you can see I've named the lines so we're going to have multiple row and column lines and we can now place our items on this grid now I'm using the named line syntax here I want box one to start on the first line named call and span four lines it goes into the first row so it starts the first row line and it spans one row line that's the default so don't need to I don't need to actually specify the row line if you just specify a start line you'll span one row and then we do the same with box eight we start on column line 7 and we span three lines and we don't need to worry which line on the grid the third line after column line 7 is we just know we want those three tracks so that's the completed grid layout version under the skeleton version and say all of this is on line two have a look at later so we can easily replicate these kind of layout systems it's a different way of doing layout and we need to think in a slightly different way to build up our layouts but it's perfectly possible to create this kind of layout with CSS grid layout but it also lets us go a step further than this grid layout lets us do something that's actually quite difficult to do with our existing layout systems and that's to control our grid rows so we can span rows in exactly the same way that we span columns so I can set up a couple of the boxes to span at two and three lines so in this third example I'm not just putting things into single rows I'm spanning rows and you can see here that the height of the box goes to the gutter it doesn't sit up behind the content that would if we were sort of trying to play around floats or something and and that behavior is very much the same as that of flexbox so things stretch and the whole lot is at that URL so if you want to set up a multi-column layout like that you can then use it to create regular layouts based on a flexible grid system so here I'm rebuilding the layout that we were playing with before but this time I'm positioning things actually on our new grid so the header and footer start at the first line named call and spans line twelve the header starts after the first row line and the foot of the third between them we've got our panel and our content and after row line to the panel as a side bar spans four lines and the content takes up the rest of the width so there's the layout and that's all at this URL so this makes it really easy to play around with our layout we've now got a grid system and we can just move things around on it and perhaps I'd like the panel to extend the bottom of the content and the footer to sit just under the text and I can do that by changing three values in the CSS so this is the CSS and I can change the panel grid row end and the main footer and so we end up with a layout like this again it's really easy to start playing around and moving things about because we're not having to worry about clearing stuff and we're not having to worry about how we're going to make this thing look as tall as these other things and that just kind of happens because they all understand their place on the grid they understand how how they need to relate to other things so that's kind of positioning things and the various ways in which we can position items on the grid which most the time is probably what you're going to do if you're creating layouts you're going to want to explicitly position things on the grid however there are circumstances where it might be nice to say here is a grid here is some stuff let's just automatically display this stuff on this grid and the specification has that ability and the rules around doing this are defined by the grid item placement algorithm so this algorithm is basically how automatic positions of grid items on the grid are resolved and understanding sort of what how this happens and that's kind of important because if you don't position something grid is going to position it and that's going to be quite baffling if you don't understand what it's doing and why it's doing that you're going to wonder why things are appearing in slightly peculiar places so it's useful to know how this works and but as I say there's also ways that we could be using it so back in our original example we created a grid and we didn't position things on it so grid just position things for us so let's have a look at scenario where this could be useful I've got an unordered list here it's got a class of wrapper and inside our list items the first thing has got a class of text it contains some text content and the rest of the list items contain images plus a bit of text just so we can sort see what they are and I've given a class of wide to two of those list items and so without any layout applied we get this so what I want to do with with this text in this list of images is I'd like to create a responsive layout my text should be priority so at the most narrow break point the text should be at the top and the images displayed afterwards at a slightly wider great point I want to go to two columns but I still want my text to take two columns rather than be squashed into a skin or column and I've also got these wide images that have given the class of wide so I'd like those to spam two columns as well and for desktop view I'm going a bit more creative I'm going to put my text in the center and display the images around but I don't know how many images I'm going to have so I can't just position them each one carefully I'm going to need to rely on grid layout to sort out some of those images for me so outside of our media queries I'm creating a grid on the wrapper and that's the UL element I'm creating at the moment of one column grid taking up all the available space and I'm setting rows to auto and then there's a new property here the grid Auto flow property set to dense now this isn't going to change much but we actually now have a grid and each item is being put into a row on the grid and grids automatically creating those rows for us but it won't make a huge difference into how this looks but this works quite nicely for my mobile devices so then it's slightly wider device width I'm going to go to a two column grid now the only item I'm actually positioning is the one containing the text I'm saying this is a dollar class of text so it's going to span from line one to line three I've then got those images to which I added a class of wide I'm not positioning them but I am setting their start position to auto and then I'm saying span to lines so this means they have to span 2 to column tracks which means they're going to have to go onto their own line so what happens with the auto placement rules is first it encounters the thing that we apply position so it gives that its position and then it starts to work through displaying all the other items and by default it's going to put each item into a grid cell when it comes across a wide item it's going to make it span to a grid tracks and so we get this now if you remember we set this put a grid Auto flow property we gave that a value of dents so that large image here which is last in the screenshot on the screen there that's actually the fourth image in the source but it has to drop down to the next row rather than display next to the balloons three image because it can't have a two-track wide image next to it there so it drops down but because grid overflows dense at the image that's balloons five has actually been taken out of source order and put in the hole because it fits it which means you don't get a gap so that's then that grid layout will do it will backfill if you ask it to and we can see this again if we go to 660 pixels here I'm redefining the grid to have four equal width columns and I'm then positioning that text block so it will be top center of the grid spanning two grid tracks and two row tracks which then gives me this and again that image balloons five has been taken out of dom order use the dense packing mode and you can see the whole thing on this URL and that's all of the CSS for the layout so able to do quite a lot of stuff and without really writing very much CSS now if we change the value of grid auto flow to sparse you can see now we've got that gap left in the grid so if you use this sparse packing mode things will stay in Dom order and other than things that you've given a position to if he gives them a position to grid will assume that you know what you're doing and it will position it and it will take it out of Dom order if if that means it goes out of dom order but otherwise things will be positioned in the order they are in the source because generally that's probably what you want mean if you're laying out a definition list using grid layout you don't want things getting jumbled up because grids trying to fill holes so the default is sparse the default is that grid will move through the DOM and position items as it comes to them and if it has to leave a gap it'll leave a gap but where you're dealing with say things like images you know an image gallery you want of a grid of things and using this dense packing mode can mean you can get a really nice display of things without needing to use a JavaScript to shift things around and you can also set up rules as we set up our simple rules for wide things so you've got certain things that you know need to take up more space you can give them that without needing to know exactly where they're going to sit in the layout I think this is great for dynamic content for instance you've got like an image gallery and you've got some landscape images you've got some portrait images you might want your landscape images to take up and to tracks and the portrait ones take up two rows you can set up those rules and then just let grid display the things and that that would work really nicely so grid is really part of a layout system and it includes flexbox it's not a competing spec to flexbox that's a sort of commonly asked question you know is this a competitor to flexbox it's not it's a different layout method but it sort of lives alongside flexbox it's kind of a shame that the two didn't get into browsers kind of at the same time so we could really see them as part of this system and they're tied together by something called box alignment module which is another new CSS module and this is where all the alignment properties that are in grid that's where they live and where they're specified and really the the box alignment for a module is basically taking the flex box alignment properties and expanding them out other types of layout and that's not just going to include grid it's going to include other types of layout or the types of block layout as well so essentially CSS box alignment module level 3 is the vertical alignment module it's the module that will let us finally vertically align things properly on the web and that's all in there we can already do that with Flex box and it's going to bring it to other things so it's worth having a look at that I think is it's an interesting module so here I've got a grid I'm setting align items to Center the grid has a repeating pattern of 5 150 pixel tracks separated by 10 pixel tracks and then I'm positioning the items so each grid area spans four lines horizontally and to Cle I can see the grid there so each of the four grid areas on the Left covers four squares of the background image so by default the item would stretch and fill the area but because we've set the line items to center the items Center within the area and the link there is an example of this which may need canary it might work in chrome but it may need Chrome Canary at the moment and we can also justify the items so I've got the same grid again in the same placement but this time we get this horizontal alignment so that would best survive 'extra specifying on the parent with specifying the alignment for all of the items but we can also use align self and justify self and in both grid and flexbox and these target individual items so box say there that's the default stretch which covers the grid area so you can see the four squares that it's covering and be is set to align self and see is aligned self start and diaz aligned self center you can already do this sort of stuff in Flex box and you can do this in the emerging grid spec in browsers and eventually we're going to be able to do it with everything so being able to align groups individual items is is really vital for responsive design and it's where a lot of the kind of layout hacks that we've been using that really worked fine before we weren't responsive it's where they start to fall down but the thing with these new layout methods they really are responsive by default and along with you know different things like the fraction units and these alignment properties it's going to make it very very easy to work with responsive layouts once we have grid layout now a huge valid this specification and evander flex box and I think that you know once we have the two we've got a very elegant way of doing layout the implementation work in chrome is been done by and agali who an open-source consultancy and all of the stuff I've been showing you you know works in Chrome Canary will work very soon in Chrome and so you can get your hands on it you can play with it and I really encourage people to do so and it's also just recently started to go into Firefox as well we're starting to see grid there is an issue though with both grid and to a lesser extent flexbox but it the issues there as well there's both of them allow us to reorder stuff they allow us to get completely away from the order in which things are in the source which could be really useful for accessibility and I hope that people you know are con whoever concerned about that this idea of now display things independently of the order in the source is quite concerning it could be great it could also be terrible because ideally we'd create an accessible source we'd order our source document to be as accessible as possible so if someone is using a screen reader or some kind of text speech browser and it would be read out it would be really spot-on it would be absolutely perfect that would be great that'll be the best way to be using this and then we use these layout methods to work with the content and how good user experience and lay things out nicely that would be great however there's a real danger that this reordering capability will encourage people just to forget about source order is like oh it doesn't matter anymore and I can just drag things around that will be fine so that that would be bad if that's what happens but even worse because elements only become flex or grid items if they're a direct child reflects or grid container there will be a real temptation I believe to flatten out our source and especially with things like visual authoring tools any kind of WYSIWYG thing you know if something is a direct child of something with grid declared on it then it can be positioned anywhere on the grid so there'll be a real temptation for people but also tools applications to start stripping sauce to start flattening out the source in order to be able to very easily move things around on a grid and which obviously would be rather disastrous for accessibility because the source is what infers what things are so the drafter in the working groups are worried about that too and the current draft says that grid item placement and reordering must not be used as substitute for correct source ordering as that can ruin the accessibility of the document there's a similar statement in the Flex box back it also notes that order does not change how document is read out in text-to-speech so if you change the order visually that won't change how text-to-speech works there's also an issue with tab order if you navigate use the keyboard if you're using some kind of assistive technology that tabs around the document obviously once you start visually messing about with how things are displayed you could end up with a really messy tab order you could start at the top left and then jump right down to the bottom and back up again that's obviously going to be something that we have to care about as developers when we're creating documents using these things I'm actually very concerned about this flattening of marker potential sort of way back in the past I did a lot of work with macro media when I was part of the web standards project and did Macromedia who had Dreamweaver at the time Travis is now with Adobe and so I'm kind of interested in visual tools for doing layout and because I work a lot with designers I'm interested in how that we can you know allow designers to do things in a more visual way and so I've been quite concerned about this flattening out of markup potential and grid actually contains something in the spec that I think could mitigate this because we can nest grids at current time just like with Flex items you can nest flex box and you can nest grids so for example if I've got this set of divs here each has got a class of box and box D has EF and G nested inside it so if I declare a grid on the wrapper and position all of the children the light boxes here are the children of box D because they're not a direct child of the wrapper element they're not grid items they're just inline they're inside box D but it's valid to make a grid item a grid itself so we declare a grid on the item with its own rows and column and then we can position things so you can do something like this so we can nest grid just like we used to nest tables we can nest grids now see what would be really cool would be if we could declare a grid on the parent and then we could sort of inherit that grid on things that are nested rather than having to declare brand-new grids because that would allow us to create quite a good visual consistency across our layout and that's there in the spec the level one spec includes a sub grid keyword so a grid declared as a sub grid would use the grid specified on the parent so instead of setting up columns and rows on D we could use this sub grid keyword and you could use the parent grid for rows or columns or both and now if we position those child items and positions according to the parent grid lines unfortunately no one has yet implemented it without an implementation it's kind of March that risk and saying it could get removed from the specification if it means that the spec and then kind of move on to be a recommendation and obviously sub grid will be useful for designers you know been able to actually line things up on that parent grid but I think the worst thing is this this key accessibility issue the temptation for developers and for authoring tools to remove markup and without it I really think that sub grid is an important thing an important part of the spec and I'm kind of adding it to this presentation and talking about it in the hope that people will also talk about it and put a little bit of pressure on the implementers so we do see it get into browsers and we can have it in grid as it ships as this is why I'm explaining these problems because grid is getting to a point where it's going to be a finalized level one specification and it's until things become a finalized sort of recommendation by the working group that we have the best chance as people who build websites with these things we have the best chance to actually make a difference to them and if you wait until something is shipped in browsers and then say this isn't working very well there is nothing that can be done about it because people are relying on it it's when things are in this sort of development stage that we can actually make a difference and people tell me oh you know the working groups don't listen to ordinary developers this is the post we're grid column and grid row gap properties were added to grid and this is something that I've been wandering around presenting about for getting on for three years and I was arguing the case for having and gutters basically in grid because I think for a lot of simple layouts we don't want to be specifying gutter tracks we just want to like in multi call say we've got a gap and eventually the workgroup decided to write that into the specification it's just been implemented in Chrome so regular developers and I'm just a regular developer I'm not a member of the CSS working group and we can actually change these specs as they move through the process if we get in at the right time and offer useful feedback anyone can pose to the working group mailing lists so if you see an issue with the sort of stuff you're building and then you know post it let them know because it's really important so often people complain about CSS specifications at a point at which there's just nothing that can be done and it's really worth at the moment having a look at grid because with the flexbox spec that spec was developed sort of in this sort of prefix tree with vendor prefixes so people got the hands-on flexbox at an early stage and started to use it and this is why we have these kind of competing implementations in browsers of flexbox and browsers have got different levels of support and support different bits of it and it's all a bit of a mess this hasn't happened with grid grids been developed behind these flags so all of the stuff that had that is working in chrome works on prefix but you need to enable the experimental at web platform features flag and suddenly it will all work if you go to any of my examples without that they won't work at all and WebKit is prefixed but you're in any only works in WebKit nightlies and as I mentioned before the work in the implementation in Chrome and also in off hooks it's in blink and and in WebKit has been done by an open source consultancy called agalya and it's actually been sponsored by bloomberg they've paid for the implementation into the browser and firefox Knightley's now have some grid support it's not quite up to the level the stuff in chrome but it's getting there a lot of my examples do work and what's in ie10 is actually an old implementation this spec came from the Microsoft ie team originally and so they've got an old implementation they which is what they invented against and it's now on the edge backlog as high priority to update their implementation to the new spec so that's coming too and so all of the browser's are implementing this kind of hidden out of sight and if you start to look at the implementations they're very very good I mean the stuff in chrome is fantastic it works really well so when they do ship its kind of going to land in modern browsers and pretty much the same everywhere because they're all working to to deploy it in the same sort of way so it's going to be something that were going to be able to start to use if you've got the sort of browser profile and I think in in mobile particularly it's going to start being something we can use probably sooner than on desktop where we tend to get the older browsers hanging around so it's really good time to start looking at it because this is going to happen relatively soon so mention I've got a bunch of examples here at goodbye example.com I keep putting stuff up there I really enjoy trying to build things that people tell me are impossible to build with grid and because it gives me a chance to sort of see whether it is possible and also to offer feedback to the working group I discover something that isn't possible so if anyone is interested in playing around with this and just wants to chat about it I am always very interested to hear and I love seeing other use cases that are sort of fall outside of what I might think up thank you very much for listening my slides and some of the resources and bits and bobs are there and twitter is generally a very good way of getting hold of me if you want to talk about grid at all thank you very much for listening

Channel: Devoxx

Views: 34,977

Keywords: Devoxx, DevoxxBE15, DevoxxBE

Id: Felq4z_rdPQ

Length: 56min 9sec (3369 seconds)

Published: Thu Nov 12 2015