Grids All the Way Down

Rachel Andrew at Pixel Pioneers 2019
Sign up for Conffab Free to watch this and hundreds of other videos for free
[Music] you please make our incredibly welcome it's Rachel Andrew okay so yes I made it then plane landed at Heathrow at 10 o'clock I was very very glad when it sort of left on time usually my flights had you very delayed so it was it was a good one to be on time and made it down here I was actually at the CSS working group meeting over in Toronto that's where I've come from so I've been in three days of meetings designing new CSS and fixing what appear to be very very tiny problems which take a very very long time to discuss over those three days and so yes I've been kind of doing things on the web since about 1996 it's becoming increasingly difficult to tell people what it is that I actually do but it's sort of some kind of collection of those things I'm editor-in-chief of Smashing Magazine if you have a fancy writing for smashing I am always interested particularly new writers people haven't written before we would love to help people with that and I remember at the CSS working group to say I'm actually an official representative of frontiers who are a Dutch collective of web developers so essentially on the CSS working group and on the w3c as a representative of web developers as opposed to a representative of a browser vendor which is you know what a lot of the people on the group are so what I'm going to talk about today really is it's really about a grid layout and and kind of where we are at this point because we're actually two years on from grid layout landing in our browsers so if you remember when CSS grid shipped it shipped in - really all of our browsers pretty much at the same time which is quite an unusual thing to happen normally we expect that a bit of CSS will go into one browser and then sort of like two years later somebody else will implement it grid was such a fundamentally important thing but it was prioritized by everyone is this important thing and came out in browsers pretty much at the same time and so we're two years on from that point and I'm still kind of getting this kind of question from people here two years on people are still debating you know whether they should even use layout or its flexbox enough should we have maybe it stopped there now the thing is nobody asks me this question no one is asking me whether they should use colour or fonts in their web design yet they are constantly asking me whether they should be using flexbox or grid as if we're talking about choosing between bootstrap and foundation and I think it really is time to stop thinking about these as two different layout methods because they're not they're just two values of the display property they're all CSS and so really you should be using the layout method that suits the pattern that you're trying to create the fact that flexbox and grid are two different CSS specifications is just working group process we've broken CSS down into different specifications because otherwise the full entirety of CSS should we light those encyclopedia Britannica's that people used to have on the walls you know we just go on and on and on and we'd never had to get anything finished so we have these individual specs but the fact that we don't just for instance have one display spec which has all of the different things you can do with display it's really just working group process flexbox and grid they just CSS they're tools that you've got to use and really at this point there's not a huge amount of difference in terms of browser support and yes older versions of ie do have flexbox support but it's pretty fragile and buggy if you try to use it in anger so it's gonna require some specific attention anyway so you might as well just use if you're building a brand new site now use the modern CSS that works for the patterns that you're trying to create and then create fall backs that work for the old II's you know rather than hobbling your design and your creativity and everything you can do to the web browsers of the past it's the pattern that you need to build will generally tell you what you need to use I like to talk about flexbox let's say you've got a bunch of stuff you've got a bunch of stuff it's all different sizes and all you want to do is kind display that in the most readable way display that in a sensible way so that you don't have you know a giant thing squashed into a tiny box and lots of space around a small thing that's what you want now that is a really good job for flex box that's what it's for it's what it was designed for it's not a grid but it's not just really good at this sort of squishy sizing where you just want things to take the amount of space that they need but if you've got a set structure in mind if you've got certain column sizes and row sides and you want them all to kind of line up with each other and you want to put the things into those cells well that's a grid you're lining things up in rows and columns at the same time you know that's grid now you can do that with Flex box by adding wicks to everything but that's not really the point you know if you're trying to make flex box behave like grid layouts then you probably should have just used grid in the first place and just because you're putting things into a grid it doesn't mean that the size of the item can't affect the track sizing but it's going to change all the way along the track if you put a bigger thing into a column and you're using some kind of content aware sizing that whole track is going to get bigger and really when you don't want to be using flexbox typically if you are adding wicks to all of your Flex items individually if you're going round and sort of controlling their size specifically that's generally a good sort of feeling there that hey I probably should be using grid because I'm trying to kind of control the whole thing I'm trying to line things up in two dimensions so here's a common pattern so we've got a set of cards and I've laid them out using flexbox so we've got sort of three items there and they all lay out nicely using flexbox and then we get some more content we add some more cards and we get this kind of display because we've got an odd number of cards here they don't neatly make you know three cards the top and three cards underneath and because all the cards can grow and shrinks that they can take as much space is there the cards on the bottom there's only two of them they've both grown an equal amount and they've shared the space which is why they're kind of splitting the space between them now if you're thinking oh I could only use flex book because I'm using flexbox I must use flexbox then you're gonna be saying well how do I put wicks on those cards to make them line up with the ones above but actually really what you should be thinking is am I using the right layout method and really what you want if you want to have cards four and five line up one two one and two you want to be using grid layouts and merely a couple of lines and a flex layout becomes a grid layout and you've got what you wanted and there's a bit of a difference between what we do here is you see with flexbox we have to do things on the child items I'm doing things on the list items themselves to sort of set sizing and so on with grid we do everything on the parents then we kind of put the chart the child items into the gaps that you've created but it's pretty easy to switch about if you realize that you're heading off down the wrong line and Flex isn't the thing you should be using or grid isn't the thing you should be using you should be able to switch between those layout methods fairly easily and so here's my grid version and you can see that the cards then line up in their rows and their columns and that's really all we mean when we describe grid as two-dimensional you can lay things out in rows and in columns at the same time and two-dimensional alignment means much more than just this basic example of Flex item sharing out all the space and grid items falling into the cells that we've created two-dimensional einman means that the grid works in exactly the same way in both dimensions and we don't always see that immediately because well there's some easy reason for that on the web block elements expand in the in-line dimension to be the extent of the available space in the container so they'll just get as wide as the count we kind of know that so they're extending in the inline direction as big as they can get but they don't expand in the block dimension things don't become as tall as your viewport by default for example so you have to give things a length in the block dimension if you want to have spare available space there and if you do give it a length then your track sizing and alignment and everything else in grid works exactly the same way as it does in the inline dimension so if you want to play with height or the block dimension if you want to align thing if you want to leave whitespace when you're using grid layout you can do that I think that's something we don't play with enough in web design and the reason we don't is because when we were tied to using floated layouts if you left a gap it was quite likely that something would kind of float up and sit in it it was very difficult to kind of keep that space with grid layout you can start to play with white space and see you know what are the things you can do there so there's all sorts of things that you can play around with and that's a reason to use grid you might have a layout that could be either way but if you want to play around with things in both dimensions then grid would let you do that and then there's another reason you might want to use grid and that's to help with these layouts where we're restricting things in the block dimension so a pattern we might see is it neat fixed height cells fixed height rows of content we sometimes see this people use it for navigation sometimes you'll have you know a little lovely little neat boxes that are gonna be a certain height and that's always being a little bit difficult to do on the web because every time you fix the height of something you risk your content overflowing you kind of end up you've got now too much content and it's coming out of the box and we still see this all the time we've seen this for ever on the web I've gotta see a mess product you know we still get people coming into our forum saying how can I stop too much content getting into the CMS because it's breaking my layout and so you know we're actually letting our design our desire to have this kind of control affect the content that we're using and that's not great so one of my favorite uses of the min/max function for track sizing is to create this effect of having a layout which is constrained in the block dimension having a layout which is height constrained but if too much content gets in those tracks can grow so the min/max function we say you know min max 100 pixel I want my track to be 100 pixels tall even it's got no content in it it should be 100 pixels tall but if more content gets in the maximum is auto and auto for grid tracks means pretty more big enough to take the content so that track will keep on getting taller if it needs to so we can build these kind of resilient layouts these resilient components that look pixel perfect that look like they're all lined up beautifully as we wanted but if you know more content gets in if that headline really really does need to be 40 words long then it's gonna work it's a it's still not gonna break you're not gonna get overlapping content you're not gonna get to have cut off so really all this is to say you've just got a lot more choice now when you're designing layouts when you're designing your patterns you know please take advantage of them they have been a very very long time coming and there's very rarely a kind of right or wrong way to do things but if you try and force one layout method to be another you're just making your life harder and if your life is becoming really really hard doing one of these things it may be that we've designed something else that would do it better and I keep being asked this is a quote you from a workshop I'd like to keep being asked you know people will say is this usage of grid okay or am I using Flex correctly and you know this is pretty much my answer does it work in most cases if it's working for you and your team then it's fine CSS specifications very rarely tell you how you should write CSS it's not this is a remit of a CSS working group to tell at web designers and developers how they should write CSS about the only time that we put things into the specifications that say don't do this or when it is to do with accessibility so we will advise you not to do certain things that could cause an accessibility problem but otherwise you know is it working is it working for you your team the browsers you need to support you know that's really what you should be looking at and in terms of accessibility just well we're sort of thinking about things that we might tell you you know not to do and the really the one thing that you need to take care of with both flex box and grid and it's probably more of a problem with grid is this content reordering problem it's very easy with both of Xbox and grid to jumble up the logical order of your content which is what is is in the source so how you've got your content and in the source orders in your HTML and then the visual representation of that which is what you've done with grid or flexbox now with grid and flexbox it's pretty easy with the order property with line based positioning or grid template areas to actually kind of jumble up and the logical order which is going to affect the way that it's how if someone is having it read out to them but they can see the screen which there's lots of people who are using some kind of screen reader but can actually see the screen and it's gonna be a very disconnected experience if it's reading out the source yet where they actually are on the screen is different or if they're tabbing around the document so that's one place where the CSS working group do say hey don't do this don't jumble up this experience um a very quick way to test this is this tool here it's where I've got up on the screen this is accessibility insights which Microsoft have released it has this tab stop checker which allows you to see what the natural order is of your content so if you're using grid or flexbox and you might have moved the order around a bit that's a very simple check you know can is that still logical you know we're not having a situation where the first items up here and then you're like right down the block of the page somewhere for the next thing and then back up they are trying to keep the the source and the visual display sort of in sync is really important just that's something that we might tell you that you know you should watch out for and that's in the series of specifications but in general you know we're not prescriptive about this stuff we're just busy designing CSS we would like you then to use it and then let us know what else we need to be doing and so on that note you know what can't we do yet so we've got these neat things that we can do and as people are starting to use grid layout and and so and flex watch an extent you know people are really starting to use these tools you start to run into new problems you start to find new things that you can't do you're like what it's solved all of these problems this whole class of problems have gone away but hey I still can't do this or now because I can do these things I want to be able to do this I'm always interested in what people are running to I really enjoy working on see ss because I see myself mostly in all the things that I do I was really a problem solver and CSS has loads of problems that we can solve so that makes me really happy and I enjoy looking at those so you know what's coming up what might we still want to solve so if we go back to these airplane cards and I've got you know two cards they're displayed next to each other and they've got different amounts of text in their caption so the captions there don't line up you know this one is go quite a tall caption and the Airbus a380 that's just one little name so that's that's got a small caption there and they don't line up now that might be fine but I think a lot of the times when you've got that kind of layout you'd like the captions to line up with each other too you'd like the whole thing to look like a grid so my cards are a figure inside the Li now the Li is a direct child of the grid so it participates in grid layout and that's why our cards really easily lay out on that nice grid now the figure nested down inside the mark-up that's an independent grid it's got two columns and two rows I'm using min max to stop the the captions of collapsing if they have no content and giving it a max if auto so it's expanding to take the content but the crucial thing is you know card a knows nothing about the sizing of the internals of card thing the things that are direct children of the grid they understand the sizing and they can all be the same height but things that are nested down inside the structure don't know about other things nested down inside the structure so why can't we just layout things deep in our markup on the overall grid so you need to understand that problem CSS has this concept of normal flow or block an inline layout now you might not have heard it referred to in those terms but it's pretty much the first thing that you learn about CSS you know we have things to the block we have things that are in line now you can switch between the two and by default if you write some HTML and lid stuff in the web browser the web browser this default stylesheet loads that up and it's readable because it displays in this normal flow and the thing to think about is that CSS is always trying to go back to normal flow so the values of display don't inherit so if you say display grid on a parent the direct children become grid items but their children go back to normal flow because that's what CSS does if it didn't be constantly resetting things all the way down and that would be a real nuisance so there's a simple flex example we've got a normal flow heading we've got a paragraph I've got a box set to display flick so the image and the content the Flex items inside the Flex item I've been got another heading and some content that's gone back to normal flow it's not also become Flex items because that would just be weird so that's why captions don't participate in the grid layout so they can't be placed on the track to the fact the parent grips they don't know anything about it they're just in normal flow and then I can create a grid but then I'm essentially just starting over again with a new independent grid those things aren't you know inheriting anything so that's cool that's how CSS works and generally it's fine but sometimes we would like things to be able to kind of participate in the grid on the parent we'd like to be able to opt into that sometimes now the only way to do that at the moment would be to start basically flattening out the markup perhaps taking the cards out of the list and to maintain order page will actually have to break the source order and so you'd end up with like two images and then two captions now that is obviously terrible and you should never do that because that is just making a terrible mess and so we don't want to do that it's a sort of thing we used to do with like nested table layouts in the past anybody else have built their website with tables you see you're my people there's lots of you this is marvelous we have some some therapy session later that's great oh but yeah that's kind of what we did and we don't want to go back to that sort of thing that's not that's not the world that we're designing now you'll be glad to know so you know so how do we get this to work now there's live another two the value of display let's display content and now this won't work in this in the scenario we're looking at if you've heard of display contents the fact that we need to rearrange our items to make Auto payment workers why display contents won't work either but there is sometimes a bit of confusion between display contents and the sub-grid proxy on the value that I'm going to talk about so let's have a look at what display contents actually does and why it doesn't help us here display content is potentially really useful it's useful when you have elements that you want to participate in grid or flex layout but they've got some markup around them which means that they're not a direct those items aren't a direct child of the grid so they need to have some markup to make them semantically whatever it is they are you don't want to display the box of that markup a good example is what we've got here which is a list so I've got a layout here I've got and some some items which are dialect children I then got a list which is a UL which is a dialect child it's got some list items inside there obviously list items they're not on the grid and then we've got another item so you can see the market looks a bit like that so the direct children have got that sort of lighter background color on them and then the list items have the pink background color and there's a CSS so we can see how that's working now all we need to do if we want to use display contents what we're going to do with display contents it's pretty much like what you do when you say display:none so if you say display:none we remove the box that you'd say display:none on and all of the children it's as if it was never there if you say display contents we just remove that box but we leave the children which will give you a layout that looks like this so we've removed the box of the UL but we've left the list items there and they are now participating in grid layout and laying themselves out they're still children of the UL for all of the reasons which is why they still got a background color of pink because they're still a direct child of a ul in all other reasons other than the fact that that box has gone from the layout now display contents will be really really useful it's actually really well supported in browsers but unfortunately it has a massive bug which is quite annoying and essentially the display property should only affect visual things other than display:none display:none is also passed by things like screen readers so if you say display neuron I a screen reader also won't read it out it will honor that and so you can then bring it back in in a sensible way but everything else in display should be pretty much ignored by things that aren't visual and which is why your source order goes with the document source and not whatever you've done with display grid when browsers implemented display contents they also remove the information from the accessibility tree and made those things unfocusable now it turns out that I think probably what they did is they looked at display:none so this is a bit like display:none and just remove the box and that has had bad effects for accessibility they are fixing it Firefox have pretty much fixed em there's a few things that are a bit of an issue chrome are in the process of fixing it so at the moment display contents why it does work in browsers you need to be very very careful if you're using it because you can essentially render things inaccessible essentially by making a list not a list anymore as far as a screen reader or something is concerned so you'd be fairly careful it's a useful thing but it's not really going to help in the situation we've got anyway and it's we useful for the news cases but you just need to be careful with this this sort of accessibility problem that we've currently got and it's kind of a problem with anything new in CSS you know it may well raise new problems that we have to take care of so to speak contents and even if it didn't have this problem isn't actually going to help us with the situation we've got with our cards we need something else what we really want is part of our gridded item or our little box to thieve captions to be in the same row as each other even though they're nested down inside the markup and that's basically what this subgrid feature is going to let us do she can already actually make a grid item a grid so you can say display grid on any grid item and you can give it the columns and even give it rows and it becomes its own independent grid you can nest grids as far down as you want you can make a grid item a grid you can make a grid item of the Flex container doesn't matter you can keep on changing the value of display however you need to be but those things are going be independent they're independent grids they don't have any relationship to the rows and columns on the parent so if we turn on the fact that squid inspector we can have a look at that so you can see there the outer grid on the parent and that's the one with the white border and we can select our inner grid and that's that's got fixed height rows and so that grid doesn't quite fill the container there and if we select both of the grids in the good inspector you can see how there's no relationship between those lines and they don't sort of line up with each other then just completely separate in there we've basically started all over again with a brand new grid so it's sub grid we can selectively opt grids on grid items into our grid layout and we can do that columns or rows or both so if we wanted our columns to use the tracks on the on the parent grid then we would say grid template columns sub grid so don't define it any column tracks of its own define sub grid and then it's going to use the tracks that it's got but that area has from the parent and we could do that for rows so in this case I've defined my own columns I decided I want the column tracks to be whatever and then I'm using sub grid on rows and we can also just create the circuit in both dimensions so we can then tie this the the sub item completely to the dimensions of the parent grid and that's pretty much the the main feature you know we can instead of defining your columns or your rows you can say sub grid and then you use the columns or the rows from the parent as with anything in CSS there are you know some finer details that you might need to think about one of those is that line numbers start from one inside the sub grid the soup were dancing pretty much exactly the same as a nested grid word except that it's getting its track sizing from the parent and you don't have to work out which line your sub grid is sat on and count from that they start over from one inside the sub grid and just kind of as you'd expect really so in this example we've got here subgrade line one is on line two of the parent grid and so when placing items inside the subgrade you use the sub grid line numbers not the parents now if you did want to use something of the parents to position the island side to sub grid that's a reasonable use case you can name your lines on the parent and they all get passed through into the sub which that would be the way to do that so for example if I lined named lines on my parent grid cold start and call end I could then position something inside the sub grid with those names so that would allow me to line something up deep nest inside the layout with a line on the parent because I've named the lines and so when you name your lines you do that inside square brackets you're naming the lines not the tracks so it's the the line before and after the tracks and then they get passed through and you can use those in inside the sub grid basically lines and grids can have masses of names there's all sorts of ways to end up with named lines doesn't matter you can have as many as you like and just pick whichever one you want to be using and when you're positioning your item if you want to name lines specifically scoped to the sub grid you can do that you can add named lines to the sub grid they are added after the sub grid keyword so for instance if we wanted to name all of our lines and our sub grid so sub ABCDE and then position another item on those we basically named a sort of a string of lines with square brackets at the Sigrid keyword can happen that you've got any track sizing to put in between them as you would when we name the lines on the parent so you just name them all as a list and then you can use those to position items if you want to do that I think fairly obviously and probably what you'd expect the sub grid inherits the gaps from at the parents if you've got used gap grid gap row gap on the on the pet on the M on the parent they'll just get passed through and you can then use those circling will just line up and but sometimes when you've got an item that's a sub grid item you don't want it to have gaps you would like to change the gaps you out bigger gaps but everything's still line up and with the parent and you can do that you can change them if you use the gap properties in the sub grid it will override whatever the parent is using and so for instance here I've set my row gap to zero and it's basically effect as if you've added a negative margin so the sort of item will kind of eat into the gap and so the lines from the parent should have run essentially down the middle of the gap and so if you want to set your gap to zero then the content is just going to sort of eat into that gap sort of whichever way you've set up to zero or if you've added a gap you made the gap larger or out of the gap with where there was no gap then it is if you've added a margin to the item and then of course sizing of the items in the sub grid if you've used some kind of content of a sizing so auto main content Max content that's going to change the size of the parent tracks and so if we return to our airplane cards example that's how we get the captions to line up across the grid we make it sub grid and nest that down inside to thee so that the sub grid figures and make the card span two rows of the sub grid the parent grid as a gap you don't want in the card so we set that to zero and the card captions are now basically in the same row of the grid which is pretty neat and and I think will work in a very intuitive way once you start doing it because it really is just the same as nesting a grid except that you're getting your track information from the parents rather than having it specified directly on the child now as I started playing around with this I think that's kind of the obvious use case the obvious use kids are sub grid of things like I've got a 12 column grid and I want everything including things nested down to line up with that or things like that card layout they're the obvious use cases our sub grid there's a few other things as I'm starting to play around with it I'm realizing that we can solve some things where people have said oh I can't do this in grid layout can you give me a way to do it I think sub grid might be the solution for some of these things this is one of them kind of accidentally I sort of realized this we've got the ability to target line - one of the grid which is the end line of the grid but it's only the end line of the explicit grid so the grid that you specify with grid template layers of grid template columns so I've got here five explicit grid low grid grid rows which the small items then sort of autofill into because you could explicit rows I can use minus one to stretch that pink item right to the end so line minus one is the end of the explicit grid but actually what happens more often is you don't know how many of the cards you're going to be putting into the cells you want to have as many grid rows created as you need to fill up with cards in that case you're taking making use of the implicit grid and you get that because you can't target line minus one and that'd be the end of auto you know of implicit tracks there's no way to do that it's something that comes up as a request quite often so here I've got no defined explicit rows and so line - Wallis then she just leaves the pink box up in the corner because we don't have five rows of the explicit grid for it to go to so this is a problem we can't target the end line of the implicit grid but we can do this by using sub grid so what you need to do is place the items into a container which is just sub grid for columns so what this lets us do is have all the columns be you know sort of equal width X we're using 1fr we want those columns all to be a nice equal width so the pink column is going to be the same width as all the other columns if we get smaller or bigger that's still going to work but all of the items are essentially in one row now that row can have implicit tracks we're not using a sub grid on on that those items so we can have as many as we like but because essentially they're all in one row then the pink item can span down to the bottom of it it doesn't matter because that we've got a sub gridded item there so that is quite a useful little thing that we can be doing now I think as we start to play with simple I think there was a bunch of patterns like this but maybe you know introducing just an extra wrapper as we did in this case allows us to solve all sorts of things that have been a little bit tricky to do with gridlayout as it stands so I think that's going to be quite fun as we start to play with it and find some of those things solve some of those problems but yeah now the bad news this is all very cool however slightly better news all of my examples there were screenshots and they were screenshots from Firefox nightly so if you download Firefox nightly you can play with all my examples which are all online you can get those you can play with the examples in Firefox nightly and get all that stuff working Firefox have implemented sub-grid so there's one of my examples with the Firefox good inspector open so that we can play around with them and it is really really important that you do play around with this stuff and that you do try things out as they're starting to get into the platform and this is why we are losing rendering engines edge has gone to chromium and and I think you know some people think oh great what one less browser test but the problem with fewer rendering engines as we have fewer places where experiments can happen we only got quit in the first place because the Microsoft team implemented grid and an early version as a prototype version of the spec in IE 10 I probably wouldn't be standing each day talking about it had it not been that Internet Explorer 10 implementation because it gave me something to play with and a certain say well hang on you know this doesn't quite work in in such a good way maybe we could be doing this and it allowed soon to be tested it allowed me to show it to people and get people excited about the possibilities of something like grid that was really really important the interest of web developers helping to move grid forward and actually get it into browsers that was very important and so I'm you know I'm worries that with fewer rendering engines you know we've got fewer places where these experiments can happen where new ground can be broken or we can start to get new stuff and that is why it's really important that we as the web development community use our influence on the browsers that are left and we do have influence so how do we kind of tell browsers what it is that we actually want but you can literally just go and tell them browsers have book trackers where you can raise issues say hey you don't support this yet why not so here we go this is the chromium bug for sub-grid and I've very handily just put a little QR code there now if you go to that damn bug you can you know create a quick accounts you know with a gmail account and star the bug and that says I am a web developer who is interested in sub-grid I would like you to implement it you don't need to go and add comments and so on ice adds noise for engineers but if you go and just starve it you're saying hey I would like to have this I'm someone who is interested in this feature do that for any feature you know in any browser you know Firefox have got their their traffic do that for any feature in a browser that you're interested in go and star it go and like it and there the nice thing about doing that as well is when there's any activity on that book you'll get a message so you can kind of see what's going on it gives you a bit of an insight into what's happening in the web platform that's quite fun anyway write about the stuff you want to see on your blog tweet about it write in a medium whatever I actually talk about the things that you want to see in the youth cases you've got the CSS working group we're often looking to see what what authors which is what we call web developers in CSS development land and you know what are you actually wanting to do because actually we want to design CSS that you need not design CSS cuz it seems like it might be fun and we've got lots of things that we could be working on so we want to know what you want and one way to do that is to write up your use cases say hey I've been using grid and you can't do this yet I'd like to be able to do this we'd really like to see that sometimes you get features that just show up in one browser for instance a sub grid is gonna land in Firefox first because they've already done all the work so it's likely that it will be out in a shipping implementation of Firefox fairly soon and then we're gonna all say well can't use it yet doing in Firefox can't use it if you can use things even just on your personal site or if you can use it with a fallback you can just for something trivial just making your captions line up more neatly you can use the stuff with feature queries the thing is browsers are looking to see what we're using out there on the web they have this information they know what it is that we're using on our sites now if browser a has supported a feature that a lot of people excited about a lot of people are starting to use browser B does not want to look worse than that than browser a so they're gonna say well hang on maybe we need to prioritize this because we've got a load of people using this property they're using this value using this feature and we don't support it yet so actually using the stuff sends a message to the browser's that hey this is something that we want so this is am this screenshots from the grid template grows on Chrome status you can see people starting to use and it takes off it's great for them poking around chrome status I'm seeing what it is that people actually use out there on the web and the other thing is to actually you know when things are behind a browser flag or in like a nightly version of browsers try them out it's your chance to be to test the web platform that is when you get challenged to try stuff out and offer feedback and you can offer feedback to the browser if you find a bug if like you know you've read the spec and you know that what that browsers are doing just isn't right or you're trying it with some other part of CSS you know you're playing around with sub-grid and writing modes and it doesn't work properly and you could raise that actually against the browser you can raise a bug there or if you find something that actually we haven't put in the spec as a CSS working group we would love for you to come and give us your feedback all of our issues are on github so just like any open source project you can come along and you can offer your feedback to CSS if you spot something you have a use case that we haven't solved yet let us know about it we really would like to know and so there's sort of all our issues there and CSS takes a long time to develop and it may well be that you leave an issue there and you think nobody has taken any notice of this and then in six months time it'll get picked up because there's actually a very few people who work on layout specs as it turns out and they're all really busy and they tend to be busy you know they depending on you know what is being implemented in browsers and there be lots of issues coming from browser vendors I am the editor for multi-column layout at the moment Firefox is doing a bunch of work and logic on layout so I get a lot of issues about much column layout because they're working on it whereas if they weren't working on it there'd be nothing coming in and so the people who work on CSS tend to be very busy and it might take a while before the thing you've raised an issue for the cousins the thing that we discuss but we do discuss all of this stuff and so when you know so good is going to grade level two which will probably go to CR fairly soon so then we work on grade level three and who knows what features will go into grid level three and it may be something that you post saying I want to be able to do this and we're say oh yeah that's something that we could put into level 3 we'll be looking for those features so we do take those seriously and I know that the discussion from the working group can seem incredibly academic and sometimes quite angry we actually all like each other quite a lot I hope it just doesn't sound like that but we do care very much about the feedback that we get and I'm always very happy to help people raise an issue if you're a little bit nervous about entering that world and you can always ping me first and I will be smiley around it and so it's because I'd really like to get more web developers involved in this stuff there's lots of ways to say to participate in the web platform it could just be writing about this stuff they might be using it it might just be you know going and starring a bug on a browser and saying hey you know please can you implement this very few people actually do get involved which means that the voices of those who do are hugely amplified you've got an awful lot of influence if you become someone who gets involved in this stuff you know don't hope that people like me will speak for you I'm a web developer I still build webs websites and I try to be a good voice for other web developers but I don't do everything you know I'm not a reactive developer for example so I don't know what that world is interested in so please what we do whichever part of this world you're in offering your feedback makes it better for all of us and I would say that although an awful lot of the work I've done for the web platforms being basically a sort of unpaid their advocate for the platform I couldn't have learned anything that I have learned from any college course or book you know been able to talk to browser engineers and how things explain to me about how browsers work I've been out to learn how to write specifications you know the web platform has given me an awful lot back in return for my contribution to it and if you are interested in this stuff if you're interested in CSS it's a very very good way to participate to make the web better for your future self and also to learn a lot really cool and interesting things so thank you very much for listening I hope that was useful in some way and yeah you don't look forward to sub where they were getting it soon [Applause] you