 I'm Ken from Spain. I'm really excited to be here in New York, Carolina. I'm in Broadway talking about Villa Ja, which is a really great spec. I guess most of you will love it, but I will show you today. And that's also a little bit more about me. I'm like a kind of aware fish in this conference, because I'm not working in front end at all. I don't write websites. I don't write CSS all the day. I'm on the other side. I'm working exactly on the browser. I'm implementing the CSS will allow the spec on Blink and WebKit, so Chrome and future future Safari versions. So I'm like a different position than most of you, but it's really good that you know how this is working and how you can also contact with us and with the CSS working group, people like Leah, in order to move the specs forward and contribute to them. Because like Leah said yesterday, you have a lot of power in what things are going to happen in the browser. So even if you don't know it, you can do noise, you can ping people, and things will get modified. And I'm part of an open source consultancy from Spain called Igalea. That was founded back in 2001, and we work mostly on free software projects. We have people all around the globe. And we have a pretty big web platform team with a lot of experience on WebKit, and also on Chromium, and even in service, so we are collaborating in different free software projects. So here we are going to talk about layout on the web. And I guess most of you know how to do websites. So most of you know that most of the websites are using somehow a grid layout. You usually have a header. You usually have a footer. Maybe a column on the left or on the right. So there are grids everywhere. This is just one example, the New York Times website, where you have a footer, you have a column on the left. And grids have been there forever. We go back in time to 1996. We see that the New York Times website was already using a grid somehow, some columns, some header. So how does this evolve? You know better than me. It's part of the history, but people started to use tables, I guess. Or most of you use a table the first time you create a website. You shouldn't be ashamed because of that, because I guess that's what all of us have done sometime. And then we have floats. And floats work really nice if you want to float an image on the left, and the text flowing on the right. But when you try to create really complex layouts, and you want to have columns, and you want maybe to have rows and span two rows, then things become more complex. The same happens with inline blocks that are good for some use cases, but not for a complete grid design. And then the CSS frameworks emerge. And they are pretty good. There are some of them that do a lot of nice things. The problem is that there are so many that it's hard to see what's the good one. You can choose one, and then you realize that you miss a feature. And maybe changing the whole website to another framework is not an option anymore. And also, you have to download the CSS or JavaScript sometime in your page. So it's not like the perfect solution. It's a good solution anyway. And then from the WFCC, especially from the CSS working group, new specs are appearing. One of them is CSS flexible blocks that I guess several of you have already used it, or have already played with it, which is a really great spec. But it's thought for one dimensional layout. So if you want to put elements in a row and use this space properly and flex some of them that once grow more than other, and then if there are no displays, they wrap to the next line. So that works pretty good in Flexbox. But if you want to do a complete layout of your web page, like a real layout with columns and rows, you have to use nested Flexbox, and sometimes nested and nested Flexbox. And then if you want to move things on the website, you have to redo the HTML again, so it's not a good idea. And then CSS will layout spec appear, which allows you to debate the page in columns and rows, and set how do you want them to be sizes, how do you want them to grow, or to shrink, depending on the space. And you can actually set a lot of different sizing behaviors for the rows and the columns. I have a complete layout, so it's like the solution that will be in the browser supported, I hope soon. So first, let's talk about some grid concepts in order because I'm going to use them during the talk. So in order that we all know what I'm talking about, this is a very simple grid with one row here, the column, the main, and the footer. And then maybe the most important concept regarding the CSS grid layout spec are the grid lines, because they are actually numbers, so we have here three vertical lines, one, two, and three, and four horizontal lines, one, two, three, and four. And these numbers are really important because when you are placing elements on the grid, you are referencing these lines, actually. That's why they are starting one and not in zero to avoid confusion between rows and columns. We will see that later. But we are actually, if we want to put the header here, in all this, we put it between the first and the third vertical lines. Then we have the grid tracks, which are both the rows. In this case, we have three rows. And the columns, we call track both things, independent on the direction. And then we have six cells in this grid. But also, we can define grid areas that are, for example, in this case, the first row completely, I can say that this is an area that takes two columns. And it's the whole first row. And I place directly the items inside that can place one or three or two or several items inside that are not specifically in a cell. So we will take a look to the syntax of grid, but only the basic things, because there are a lot of syntax and a lot of options to do the same things. And it's pretty powerful. But we will do just a quick overview of the syntax and the main features in order that you know how to use grid. And you can start to play with them. And everything starts with a new value for the display property. In this case, it's display grid. So it's easy to remember. Similar to display flex. Or there are also inline grid, like inline flex. And what happens when you use that is that if you put display grid to an element, that element becomes a grid container. And you are setting a new formatting contents. What does it mean? It means that you are breaking the flow of the page. So the children of the grid, which are the grid items, won't follow the regular flow of the page, the regular layout. So they will have specific rules defined by the CSS grid layout spec. So we have two main properties to set the size, to set the structure of the grid, to set the size of the columns and the rows. We have grid template columns and grid template rows. They are long names, but not so hard to remember, I think. And the good part here is that we are actually creating boxes from CSS, which was not that common before. I mean, you usually need a wrapper element in the HTML, put it somewhere, and then you place things there. But here, from CSS, we are creating the containing boxes. And we are placing things there. So it's something a little bit new. So we are going to take a look at how this works. And actually, we have three different sizing methods, so sizing behaviors for the columns and the rows. We can use fixer sizes, like we put 100 pixels, 100 pixels, and 100 pixels. So we have three columns of 100 pixels. And we can even have set the height of the rows. The second row can be bigger, or whatever. We can remove one of the columns, and we have just two columns and two rows. And this is using fixer sizing. So we have another method that is using intrinsic sizing. So the columns or the rows will depend on the size of the contents. So we can put auto, for example. So this column now is as with as the content. If the B has 100 pixels width, we see that the column is bigger now. And the other option is use flexible sizing, which is, for example, this new unit, which is called free space. So we do one free space. So take the free space for the second column, or we can do similar things to the ones in flexbox. So when you say do an item in flexbox, flexgrow1, flexgrow2, so here is more or less the same. Use the free space, but use double of the space than the second column. So these are mainly the three methods, and we will see later how they actually work. So now that we know how to create the structure of the grid, we have to place the elements there. So we have the grid placement properties. There are several short hands, but the most common are grid column and grid row. And the important thing here is that when you are using a grid, you are very easily breaking the order of your source code, of your HTML, the DOM order, and the visual order, because you can put the items in different places of the page, and that will break that order. So you should keep a good order in your HTML in order that for accessibility, and in order that people using screen readers can follow that properly, and don't mess it up because you can change it later with these properties. So for example, we have here a grid with two columns and two rows, and we can put the grid item in the second row. So it's just grid row two, and in the second column, if you want. And you see that we are already breaking the order from the HTML and the visual order. We have also the order property like in flashbox, but I don't know if it can be useful in some use cases, but not the most common thing. And then we can span the items. For example, say, span two. So it will be taking two columns. And this is the same as saying from line one to line three, because we are actually referring lines here. So this is the second line. This is the first vertical line up to the third vertical line. And we can span also vertically. So it will take two rows and two columns, or just one column, for example, the first or the second one. So we can very easily move things inside the grid with these properties. Also, another interesting property is grid template areas that allow us to create name and area. So some places of the grid that we put name and name, and we can place element directly there. And this is a kind of ASCII art, as you will say. So for example, we have here four items, and we place the A in the head area, the main area, the nap area, and the foot area. And we are defining here the areas. So we have the head taking the first row, the nap on the left, the main on the right, and the foot taking the last row completely. But you can say, OK, but naps should be on the right better. And it will move to the right. And you can even say, but I want naps here, too, and here, too. And it changes, as you can see. So it allows you to do a lot of things and change very easily the layout of your web page, just modifying this simple property. You can even say that I prefer to have here a gap and don't put any name to that, or have the head again, or whatever. So you have a lot of flexibility with this to just change how the layout of your web page is. Then, as you maybe have noticed during my presentation, even if we don't set the grid placement properties, like grid row and grid column, the elements are already taking the different cells on the grid. So that's because there is an algorithm and the auto placement feature that takes care of looking for empty cells on the grid in order to place the elements. And if you need to add more rows or more columns, that's controlled by grid autoflow property. So this is like the canonical example for auto placement feature. We have a very simple form with levels, input, and a button. And we say, OK, I want this to be a grid. So it's adding rows by default. If we say grid autoflow column, it will be adding columns, but we don't want that now. So let's stay with row, which is the default. So we can put the level on the first column. We put the inputs on the second column. And OK, the form is looking better. Just putting it inside our grid. And we can say, OK, but the button can even span two, because we have enough space. We just have one button. So let's take the whole space. And we can even say, OK, just defy self-center. And it's center. Now we will see alignment just before. Just next. So this is putting the elements, looking for empty cells so the input goes here, the level goes here, the input goes here. And then it has any row, because there are no more space for the rest of the things. And it adds rows on demand. So alignment. And like we see this morning in fleshbox, it was already very easy to center things vertically and horizontally. And the same will happen with grid, because the same properties introduced by fleshbox, like justify items, or justify self-aligned items, they are also used in grid. And actually, they were like the CSS Working Group create a new spec called CSS Box Alignment that is a generalization of the things in fleshbox that also need grid. And grid is implementing and following that spec too. So it's very easy to center things here. For example, just align item center and they are centered and the same for justify, so they are centered too. And by default, the important thing is that they are stretched by default vertically, like in fleshbox. So this is the default behavior. If the row is bigger, like 200 pixels, it actually is stretched anyway and takes the whole, if you don't set anything, if you say start, of course, it doesn't stretch. But this is something quite different from what the regular blocks does that usually take the whole space horizontally, but not vertically. And then thanks to the grid spec, not because you use the grid spec, you are going to do responsive designs by default, but it has some features that are very useful for helping you to create responsive websites. So one of them is the flexible track sizing for the tracks, so they will take the space and they will row and shrink depending on the needs. And also, if you combine it with media queries, you can very easily change the layout of your page. For example, just changing the grid template areas property. So here we have a grid with three rows and two columns, but if the width is smaller than 400 pixels, we go to just one column. For example, for mobile phones or whatever, or from Portrait to Landscape or something like that. So we can just change in this property and you are also changing here the values for the sizing of the rows and the columns. You are changing completely the layout of your webpage and you don't have to do anything with the HTML at all, you don't have to modify anything in the HTML, just a few lines of CSS and you will be changing the layout of your page and you can even do more things. And the tracks that are flexible but are growing and shrinking as they need. So that's most of the things that you can do nowadays. We read there are more syntax for doing the things, you can put names to the lines but it's like a lot of stuff for this talk. So what about the future? There was a thing that was missing in CSS with layout aspect that was the possibility to add gathers or gaps to the columns and the rows. So you have to do it manually before, you have to put, for example, if you want to have gaps of 25 pixels here, you have to put them manually on your columns and then when you place the items, take care that you don't place them in the second column which is actually a gap but place it on the third column. And there was a proposal to reuse column gap from multi-column spec and introduce a new property row gap. And actually this week, the spec was modified and these two properties has been added to the spec. They are not implemented yet but they will be soon. But also, meanwhile, we don't have that, we also have the option like a workaround using alignment which is pretty similar to what you have with flashbox. You have just agreed with three columns but you are using just if I content space between or space around and this is similar to what we have in flashbox. We are creating gaps. We don't know the size of the gap but it's an option in some cases that can be nice. And another thing that will come in the future are subgrids which is a bit complex to explain but I will try it anyway. So basically you can have a roller grid with several items in this case A, B, C, D, E and then a new item that is agreed at the same time so it's a nested grid and in the nested grid you place four items but you are not sharing anything regarding the track sizing with your parent. So the alignment here is completely different. You don't know anything about your parent. The columns of your parents are bigger or smaller or you don't know anything. So if you use subgrids, you will be sharing exactly the same lines than your parent. So the subgrids will be sharing the same track sizing information so things might be perfectly aligned. So just in order to get the idea, if we have a real use, more real form inside the UL and LI list items with the label and the input in each list item, we can say okay the UL is agreed, each list item is agreed at the same time. We put the labels on the first column, the inputs on the second but this grid is independent of this grid so they don't know anything about where to place, where what's the size of the first column in this grid and this grid so they are not aligned at all. We have the chance to use subgrid which is not implemented yet and it's marked right now as risk in the spec so we will move to the next level of the spec. We will have this perfectly aligned so we could have something like this is the main grid and this is just our subgrid so we place this like if they were children directly of the UL somehow. So now that we know more or less how all the synthesis and the features that we have, how does it works behind the scenes in the browser itself? What we have to implement in order that we can let out a grid. Basically we have to do three main steps somehow, very summarizing a lot the work we have to do but we have to place the items inside the grid so when you say grid row one, grid row two, grid column three, we have to place the items. If you don't set the properties we have to run the auto placement algorithm and look for empty cells and place them there. You can even place things outside of the grid and we have implicit tracks on demand. Then once they are placed we have to calculate the size of the columns and the rows because they might depend on the content. And then once we know all the sizes we have to lay out the items using the new containing boxes that they have defined by the grid. So we will use this example to see how a grid works. So we have here fifth five items. So then these two ones share the same class aside that put them in the third column but don't say anything about the row. And we have a grid with a width of 400 pixels to make issue the calculations. And we have three columns. The first one has a fixed sizing method. The other one flexible and the other intrinsic just to see how all of them work. And also we have two rows. So first of all we have an empty grid. We know we have three rows and three columns and two rows thanks to these properties. But we don't know anything about the size of the rows or the columns at this point. So we'll start placing the items there. So the first item is title and we put it in the first row and the second column. Then up on the second row and the first column the main content on the second row and the second column. And then we have the add that has a class aside and it just says grid column three. So okay, the first row is empty. Good for me and not work. The first row was not was already take by that. So it has to go to the second row. So we have the elements placed inside the grid. And now we have to calculate the sizes of the columns and the rows. So first, the first column is very easy. We have a fixed sizing method. So it's 100 pixels. We don't have anything to calculate. But then when we have processed all the fixed column we have to go to the intrinsic ones because they depend on the content and the flexible ones that use the available space need to know the value of the others before. So we skip to the third column which has auto. So this means that it needs to ask to each item inside that column what's your size? So they say, okay, add mine size is 30 pixels. AdWords says mine is 70 pixels. So auto column will be 70 pixels like the biggest one of this. So they have if you have like 100 rows it will have to go to all the rows, to all the items in that column and calculate the sizes. And then we have the column in the middle that was a flexible column. And now that we know the size of the rest of the things we can just subtract these values and we have 230 pixels for this column. Okay, so we know the size of the columns and now we have to lay out the items and say, okay, you have this width available for you. Lay out you here, so title takes the width and the content maybe in this case is bigger but we don't know the sizes of the row yet so not important. But we need to calculate this before going to the rows because if the row depends on the content we have to, we need to know these sizes. So the first row again is easy because it's a fixed row. So we just recite the thing but the second row which is auto again to ask to the children, what's your height? Okay, my height is 120 pixels, you are the bigger one so we will go there. And it seems we are done, we have finished all grid but not yet because as I told you before the default option is stretch so they have to vertically stretch so we have to lay out again the items and say, okay, you have to take the whole height of your containing boxes that are now these cells that we are defining in the grid. So now, yes, we are done. We have the grid layout. There was like a bunch of steps and this is the most simple case because you have items spanning several rows or several columns and the columns are intrinsic sizes or things like that. It becomes, the algorithm is much more complex and you have to do much more calculations but anyway you got the idea more or less and now that you know how it works how can we make them faster? I mean we can avoid some things or try to use different features to make the grids faster and this is just some numbers that I took comparing some big grids with others and see what happens so for example as you can, this is very easily, very easy. I mean fixed sizing is faster than using intrinsic sizing. If you have to ask, as you remember before in the third column, we have to ask every children what's your size before calculating the size of the column. If the column has a fixed sizing, that's faster. Actually in a 20 rows and 10 columns grid is 50% faster. In a 100 times 20 grid, 100% faster and it's even 150% faster if the grid is bigger. So the bigger your grid is, the bigger different you are going to have here. But not only that, if we have like the previous grid at 20 rows and 10 columns grid, all of them are out so they are intrinsic or all of them are one affair and they are flexible sizing so taking the free space. Auto is faster because the flexible sizing you have to divide the space to calculate and the division operation is pretty expensive. So on average auto in this case is 70% faster. So it's better if you can use fixed sizing otherwise it's better if you can use intrinsic. Of course if it's just one column with flexible sizing it's not a big deal but if you are doing the whole grid with flexible sizing it's much more complicated. And also as you remember the last step was stretch and lay out the items again to stretch them vertically and take the whole space. So if you avoid a stretch you are saving time. Actually your stretch is 20% slower than using a start or center or end for example. And that's because we need to do that extra step later. Also if you use fixed sizing for your item they are not going to stretch so you are saving this time anyway. So that's all about the spec and how does it work and what's the current status of the things nowadays. So basically the W3C specification is here this is the link to the editor of draft because it's evolving and the last working draft is from March but since then a few syntax have changed for example in the written blade areas for the gaps you can use several dots now and not only one if you want to have everything aligned. Also the grid name areas, the grid name aligns syntax that we didn't see also changed. So the spec is evolving and the last syntax and the last things that we have implemented are on the editor of draft. And this spec was started back in the times of Windows H and Internet Explorer 10 by Microsoft but since then it has evolved a lot and have much more features and the syntax has changed it a lot and it's a very good timing for this kind of talk because you are going to be the ones using grid in the future so you can already start playing with it and see if you miss features because the spec is still moving so you are still on time of talking with the CSS working group and saying okay but I'm missing this that is really important for us. And then we are, Uali is working on the W3C test suite which is just a bunch of HTML, small HTML pages with some CSS and some JavaScript sometimes so any of you could contribute there for example you want to go to the spec you want to test a few features and you create several small HTML files testing the different options and you do a GitHub pull request and I can review that and we can integrate inside the test suite so the test suite is really interesting for us to find bugs but not only to find bugs because in order that the rest of the browsers implement the spec if they have a test suite for reference and to check that they are following the spec properly it's really nice and also for us to be sure that we are following the spec properly. So that's maybe the bad part can I use with if you go to the page you see that is not really yet but that's not exactly how things are because my target is called CSS Relayout it's just around the corner so it's not that bad I think. Basically in Internet of Sport since version 10 you can use it not the same syntax not all the features but you can create grids they are prefixed with MS and actually in Microsoft Edge it will keep the old implementation yet so they are not updating the implementation yet because the spec is still moving then in Chrome you can find the implementation that is more complete and it is more updated for example the last changes that happened during the last month on the syntax are already implemented there there are some webkits and it's our primary focus for our work we are working mostly on Blink and all the patches go first to Blink and you can test this behind the experimental web platform feature flag you just enable the flag and you can test this in your Chrome I'm using Chrome Canary actually in this presentation and I'm using a lot of grids. Then on Workkit so when we do the patches we work mostly on Blink but then we move them to Workkit because the code is pretty similar and it's very straightforward for us to have both implementation ongoing at the same time and it's useful because sometimes we find bugs on the Workkit side and then we solve them both in the both projects and it's like a feedback between both projects and it's enabled by default in the nightlies but in this case it's prefixed with Workkit so if you want to test this you can download the nightly but you have to use prefix and basically we don't know anything about the plans of Safari, about Chromium or plan is our goal is to ship the feature this year but with the panels on what the spec if the spec keeps moving a lot or not so it's not that easy to give an estimated deadline we hope that during this year we are sending the intent to ship to the Blink developer list and see what's going on there and I guess that once that's really the implementation in Workkit is lagging a bit behind that should be ready to like in a few months later so I hope Safari will ship too and then in Firefox the implementation has just started this year and it's also behind a flag and you can do simple grids but it still needs more work but there is also a polyfill that you can that is under development and you can use to play with reading older browsers if you need it so it's not like you can use it already but you can already start playing with it and provide feedback in order that once this is shipped it will be much more complicated to change things or so it's better to test it before so if you want to test it we have our repository with examples and GitHub this is very simple with just when we implement the features we upload a few samples just in case someone wants to take a look to it and Rachel Andrew who is giving a lot of talks about CSS Village Out and explaining very well all the syntax and knows much more than us how to write websites and how to do websites because she is not an implementer of a browser like us has a nice website with a lot of samples and more real use cases so you can take a look too and last I would like to publicly thank Bloomberg because we are in a collaboration with them working on that and without their support nor neither the spec, neither the implementation will be in the situation it is now because we are actually helping to move the spec forward and the implementation is covering almost everything that is in the spec right now so it's very reading and we are really happy to do that and that's all from my side thank you very much for listening and we can talk with me later