Making CSS From Good to Great – by HJ Chen – Mozilla Developer Roadshow – Seoul


[in Korean] Hello, I am Hui Jing. [in Korean] Today, I am going to talk about CSS grid… No, I really can’t speak Korean. Let’s – let’s try this again. My name is Hui Jing. And as you can probably guess from this slide, I’m a big fan of emojis. And these pretty much describe who I am as a person. And if they don’t make sense, you can come talk to me about them later. I’m currently a developer advocate with nexmo,
which is a platform that does APIs for messaging, voice and authentication, so developers can integrate communications into their apps.
Pretty cool. But today, we’re all about web layouts. So when the web started, there was no layout. You could format your text with spaces, line breaks, indents, but having a designed visual layout on your web page,
you can’t do that. And the first time we could sort of place things in specific positions on a web page, that was about 1994, when the table element first got introduced into browsers. Tables are meant for data. But developers, you know, they do their own thing. And so we started to hack the table to create creative and interesting layouts,
you know, like Space Jam. And then in ’96, we got CSS. And we all had to learn a new way to do layout with floats. But floats – floats were very difficult to use. You know, when you use floats, your columns were uneven heights,
things were displaced. They didn’t line up. You had to clear floats. What is clear? Like, what is – Nevermind. So because it was so hard, people decided to build frameworks, you know, like bootstrap, or whatever, and
release these frameworks to other people so that everyone else could apply pre-written styles with CSS classes. And this approach was very popular. And soon we hit an age where many websites looked very similar. So Mr. Jon Gold tweeted this out. And this tweet has been used in conference talks all over the world many, many times. But it’s a very salient point that, you know, you’re either building the left website,
or the right layout. And 6.8 thousand people agree with me. But the thing is that CSS which is predominantly used for layouts, it has evolved over the past 20 years, and now we have a lot of options for doing layouts. So when CSS2 was released, we had four layout modes
that were used for different use cases. So we had block layout, which was meant for laying out boxes. We had inline layout for text. And then we had table layouts, which was, again,
table layouts are meant for doing tables. And then we also have, you know, position layout, which was like an escape hatch, because then your elements ignore other elements on the page
like a dinosaur going “rarrr”. So that’s – yeah, so we had four for a while. And then in 2009, we had the Flexbox layout. And this was the first layout model that was designed
specifically for building dynamic layouts on the web. So it introduced a lot of new and powerful methods
for distributing space between your items as well as aligning content in a way that really suited
how dynamic your browsers were, how dynamic a website could be, because it was viewed in many different viewport sizes. Following that, we had grid. So grid, it was about 2010, when it was first proposed, and grid, for now, is the only layout model that recognizes
the relationship between rows and columns. But why is this significant?
What’s the big deal about two dimensions? Do I continue? Okay, right. Now we have a white border. Anyway, grid actually changes the way we think about layout
and how we write the code to do layout. So Rachel Andrew, who’s one of the major contributors to CSS Grid,
she sums it up – magic. She sums it up with this quote. She says that grid works from the container in,
while other layout methods start with the item. So this is better explained with a example. So say you wanted to lay out your content into three columns. How would you do it? So one such approach for doing such a layout is you could use inline block. And for a three column grid, we would set
the display of the items, the inline block, but then you’d have to give a width to your items. Here I’ll give it a width of a third of the container
and then you get your three columns, right. Or maybe you don’t like inline block,
we got options. You can do floats. But floats are also very similar to inline block. If you look at the code, you also have to set a width on your item. And if you want to be, you know, modern and you want to use flex box, sure, let’s do flex box. To do a three column grid, you would sort of lock your sizing by setting flex grow and flex shrink to zero, and then a basis of again, that of the container. So the similarity between all three techniques is that
I have to set a width on my item. And there is no grid, it just looks like there is a grid, because we forced all the items to line up with each other. But when we are using grid, the dimensions for rows and columns
are defined on the parent container. So there actually is a grid, and we can place items inside the grid. And this is amazing. So the basic premise of how grid works involves two steps. You have to define your grid, and then you place items inside the grid. So this placing of items in the grid, you can either let the browser do it automatically, or you can define it yourself. So before we go into it, there are some terms that I’ll be using that I’d like to clarify here. So we start off – grid lines. These are the horizontal and vertical lines
that form the basis of your grid structure. And you refer to these lines using the numerical index that start with one. One, because you know, we’re not talking about index arrays, we’re talking about a grid –
start from one not zero. And each space between the grid lines are known as grid tracks. So these are the tracks that make up the rows and columns of your grid. And that’s where your items will appear in. A grid cell is a single unit of the grid and
it’s made up of two adjacent row and column lines. So by default, a grid item will always take up the space of one grid cell
unless you specify a larger area. And speaking of area, a grid area is made up of multiple grid cells. And the best part about grid is the fact that you can now define grid gaps. So gaps are like gutters between your grid tracks. So this particular feature – gaps – has been expanded to flex layout as well. So if you’re using Firefox 63, and later, you can use gaps for flex layouts as well. So in 2017, Grid was rolled out. It was rolled out very successfully, because if you look at this calendar,
by the end of March, all the major browsers had shipped the stable implementation of Grid, and then if you waited until October, you would see that even Edge (RIP) and Samsung Internet also supported grid. So 2017, the year of grid, very impressive. And right now today, I know the number here is very, very small. But trust me when I say more than 93% of internet users
are using a browser that supports Grid. So you can’t use the excuse that oh, the browsers support is no good. No, you can’t say that anymore. Think of a better excuse. Now, I personally, I’ve always used Firefox DevTools
since I first started using Grid because it provides features that make it very easy to debug grid layouts from day one when Firefox shipped Grid. But DevTools can be more than just used for debugging. It can be a means for the browser to help us understand CSS better, like how Daisuke had shown us a bit earlier. And I’m going to go a bit more into grid and subgrid specific features in this demo. So let’s move to – Right. So this is an example page with a lot of layouts
that are built with CSS Grid, and we’ll go through each of them. So when you first open your Firefox DevTools and you inspect it, you’ll see that if you use grid, there’s this tag next to your container
that is a grid container. So you can click it, and you can toggle the grid overlay. You can either do it here, or if you go down, you can see there’s a layout panel. And when you click into it, every grid that you use on your page is listed. So in this page, I have multiple grids and all of them are listed here. The default color is like purple, orange, blue, green, but – but if you don’t like the color, you can always change it. Let’s just stick with purple for now because I tried the other day, I was not good with choosing colours. Anyway, so this is the most basic grid, right? So I have a grid container, and I have six grid children. So if we look at the code, we look at the syntax, display grid, and how you define your columns and rows is with the property grid template columns,
and grid template rows. And this syntax I really like, because if you can see,
three values means I have three columns. Two values of rows means I have two rows. So it’s a fairly visual type of syntax. Now, with a six column grid, if I highlight the grid item, you’ll notice that there is no layout code on my box.
It’s just a border. That’s because the browser has something called automatic placement, it will place all your grid items into the grid you defined in order. But this is something that you know we are very used to
because the browser has always laid things out one after another. This is nothing special. What is special about Grid is
if I focus on the second example. So this is a Go board, which may be more relevant in Japan, but nevermind –
Asian people, we know what Go is. Anyway, highlight. So this is a slightly more complicated grid. So there’s 10 grid lines for a nine by nine grid. So if I open up the markup, you’ll notice that this grid has four grid items for each of the Go pieces. The background is fake, it’s a background gradient. The interesting part about building this particular demo was
trying to get the background aligned with the grid. And if I didn’t have the grid, the Firefox DevTools,
it would have been very hard for me to figure out how to align the grids with the background, because how Go pieces work is that they’re not in the space, they’re in the intersection. So for a fairly complicated grid like this, the key feature here is the line numbers. So Firefox is the only dev tool that provides this. And if you go to the layout panel, you will see that under the settings, you can display the line numbers and you can also display area names. I’ll talk about that later. You can extend the lines. So if you have multiple grids on the page, and you need to check their alignment, extending grid lines infinitely is a good feature. But for now, turn it off. So these numbers make it very easy for me to see
where I need to place my grid item, in this case, the Go piece. So if you highlight the Go piece, you’ll notice that the code for placing an item is grid row and grid column
and it works like math. So when you do Cartesian geometry – is that what you call it? x and y coordinates, it operates on a similar principle. So for this first Go piece, my grid row is four. So you can see number four here, grid column five. So with the line numbers, I can just immediately find – locate
where I want to put my my item, and then just put the number in there. So it makes it a lot easier. If I didn’t have the line numbers, I had to sit there and count lines. And I honestly would have better things to do with my time. So moving on, the next example is about grid areas. So again, what Firefox DevTools has is it has support for grid area names. So once you highlight it, another great property
other than template columns and template rows is template areas. So after you define your columns and rows,
you can actually name specific areas of the grid, and then assign your grid item to be inside that area. So for this particular grid, I have three items in it. So three items, and it’s a one of them is a doll emoji, sushi emoji
and the last one, I don’t know, power? But the point is that you can assign names, alphanumeric names. So in this case, I just used dolls, sushi, but you can do like –
you can do banana if you wanted. And how it works is that – if you can see the code – let me pull this up – there are quotes so each of these quotes represents a single row, and all the values inside the quotes represent the column. So because this is a six by six, you have to have six rows,
and then six values inside the rows. So if it doesn’t, if you don’t match up the 36 values, then the browser will ignore this rule, because then it’s an invalid rule. But the good part about template areas is that
it’s really good for full page layouts that have a lot of elements on the page. And if you need to change the layout, for example, if you’re doing responsive design,
and you want to shift things in a smaller viewport, instead of going to each of the individual items and changing their position, what you can do is after assigning each item into its respective area,
you can just tweak it on the parent. So for example, if I don’t want sushi to take up four cells, I can change it directly. So let’s see. So hard to type. Right, okay. So let’s change. So if you just tweak the code on the template areas, you’ll see that now I can change the size of my grid item
without having to go into the grid item for sushi itself. So this is really handy, like I mentioned,
when you’re doing a lot of full page responsive layouts. The next feature of Grid that I want to highlight – – and I think for now, it’s probably only supported in Firefox 66 and onwards, is the fact that you can animate grid rows and columns. So I saw a similar implementation of this.
Someone else built a demo. And when I saw this, the first thing I thought was that ‘Oh, if I want to animate something across the grid, that means that the grid item is moving across grid tracks, right?’
Wrong! And this is much easier to wrap your head around if you have the DevTools. So if I turn it on, you can see that the grid is a lie, again, the grid is just the background, it’s not actually three columns and three rows,
it’s two columns and two rows. And what the browser is animating is the size of the first grid cell. So if you look at the keyframes, all I’m doing is I’m only animating the size of the first row of the first cell
to move across the entire grid. And what you do is that you align the item, which in this case, is the pond, you align it to the bottom right corner. Because interpolation doesn’t work across grid tracks, you can only animate the size of your grid track, and it makes it much easier to understand if you can see it using DevTools. So let’s go back to the presentation. I hope that I’ve convinced you that Grid is awesome. But what will make Grid even more awesome, is Subgrid. So some of us might not be too familiar with the levels in CSS specs. But the long story short is that the CSS specification used to be
this really, really long, monolithic document, at least for CSS 1 and 2. So it’s like, I think if you print it out, it’s maybe like this thick, and you kill a lot of trees, so don’t do that. But in the year 2000, this big document was split up into modules, The rationale behind it was to make it easier
to test, to develop and to maintain the spec itself. So this split up version, we commonly call it CSS3, but there will never be a CSS 4 or 5 and so on, because each CSS feature now is a separate document. And when a feature gets too complicated
or something in there requires more discussion, we’ll just kick the feature into the next level. So Subgrid was actually a very important feature from the start when CSS Grid was being developed, but because there were a lot of edge cases
and things that needed more discussion, it was moved and differed into grid level two. So level two of the grid spec cover subgrid, and also something called aspect ratio control gutters –
but we’ll not talk about that. We’re only going to talk about subgrid. So why – why do we need subgrid? Subgrid actually solve several use cases where we want nested grids to be able to line up with the outermost grid. So for example, if you have card style layouts,
which is a very popular design pattern these days, usually your designer will give you a very neat, stylized cuts, all have the same content because every designer speaks lorem ipsum. And the header will always have the exact same number of words, the images will always be the same size, and everyone has the same amount of content. And then when you build it, and you pull data from your CMS, you’ll realize that you know, some editors write one word headings,
and some write a sentence of headings, and you get uneven heights of content of headings. Maybe someone uploaded a five megabyte image because they felt like it
and then your layout breaks. Before subgrid, you wouldn’t be able to line up everything because the content inside the grid doesn’t know about the content in the other part. So this is why a subgrid solves this particular use case, you can do it either horizontally or vertically
as in the second example. Another use case is forms because, again, your forms are usually just a list of fields, right, but each form field is made up of an input and a label. So what you have is that your input and labels are actually grandchildren
of your list element, that’s fine. That’s why it’s really hard to align your labels with each other,
and keep your semantic markup at the same time, because if you try to use grid without subgrid,
your inputs and your labels don’t know about each other. So what we used to do to fix this is that
we wouldn’t do in-line labels and inputs. We just put the label on top of the input and call it a day. But now we can.
Now with subgrid, this is a very possible layout. And so the syntax for subgrid – I’m just going to show some code here – but we will move to the examples because this is too much text. But basically, the subgrid syntax is applied onto your columns and rows, because subgrid is for sizing. So at the end of the day, you still have to put display grid, not display subgrid – that is not a valid CSS value. The subgrid value goes onto the columns and the rows. This is what I want to highlight. So let’s move on to the example page. The slides will be shared later, don’t worry. So this is again a bunch of examples. So what we can do with subgrid is that you have the option of either having the sizing follow columns, or rows, or both. So what do I mean? If I highlight grid, and this is where having different colors on the DevTools really comes in handy
because you can see – okay, I think people at the back can’t see the numbers, but your sub grid will have its own set of line numbers that start from one. So even though my subgrid is on line three of the parent grid, the sub grid itself has a line number that starts with one, that’s fine. But when we look at the code, you’ll notice that for the subgrid, my grid template columns, I use the subgrid keyword. So that means that the columns follow the parent’s sizing, but the rows can be any size at once so the rows don’t line up. Because sometimes you don’t want your rows to follow the parent
and that’s okay – it’s an option. So similarly, you can do that along the rows as well. So, these two examples are just mirrors of each other in a different dimension. So, for this one, you will see that the subgrid follows the rows of the pattern, but the column is a different size. So, this is what we mean when we say subgrid along a single dimension. And of course, you can follow both. So we use that with using the subgrid keyword
inside the template rows or the template columns property. Another thing that is interesting about subgrid is gaps. So I mentioned earlier that gaps is a very useful feature. So when you have parent grids and subgrids, by default, the subgrid will inherit the gap size of its parent, but you can also override it. So if we highlight this, so I have gaps set on the parent group of 1em, on the subgrid it’s set to 2em. So if you notice item 2, it does line up with the parent grid like item 4, but it’s smaller, because the gap for the subgrid is 1em larger than the parent. So item 2 is a bit smaller than item 4. So this is something to keep in mind when you are using nested grids and you’re adjusting – – you’re having a different gap size, it’s going to affect the sizing of the nested items as much as you nest your grid. And this nest thing can become quite significant if you take into account margins and padding. So if you look at this next example,
this is a bit of an inception, because I have a grid and I also have a subgrid and then I have a sub subgrid. It’s hard to name things, okay. But if you’re on the edge,
the edge of the grid will accumulate margins, borders and paddings. So if you look at this example, the grid is the outermost. It’s five columns, that’s the outermost container. So first subgrid has padding of 1em and margin of 1em. So this starts to accumulate. By the time you get to the sub subgrid,
which also has a padding of 1em and a margin of 1em, the great grandchild, element number two, has shrunk. So all this, even though it’s aligned inside the second column of the parent grid,
it’s much smaller, because this padding and margins from the outer grids accumulate and kind of shrink item 2. If you look at item three, it doesn’t have this problem. It’s the same width as the parent column because it’s not at the edge. So this problem only manifests at the edge of the grid. And so again, this is something to keep in mind when you nest grids, maybe don’t nest them too much or take note of your margins and paddings, especially if the sizing is very important to you. One more thing to note is that because it’s a nested grid, no implicit grid tracks means that you can’t oversize the sub grid. And I’ll show you what I mean with this next example quickly. So if you look at this parent grid, again, there’s five columns. And then I have a subgrid. So if you look at the subgrid, its size is supposed to span from 2 to 4. So this means that my subgrid only takes up two columns. If I want to size the grandchild item inside, which is item 2, if I size it to three columns, the browser says no, because it can only max out at two. So if I set this to anything bigger than than 2, so even if you do 456, the browser will clamp it at the size of the allocated columns. And also, if you have a fixed number of cells for your parent grid, again, if you have more items than grid cells,
what the browser’s going to do is that it will just stack everything in the last track. So here, when the grid spans line 2 to line 5, it’s three columns, two rows, so it can contain six items. If I change the number to, say, for it to span from 2 to 4, that means I’m reducing the columns to 2. So you’ll see that items E and F just get stacked up on top of C because there’s no space, so the browser is not going to put it outside,
it’s just going to stack it on top. So that’s how the browser deals with subgrids. And so if we look at the, these are the examples, which I will be sharing with all of you later
so you can see how the code works. These are the use cases that subgrid can solve. And I think it can be very useful. And you can sort of reduce the number of hacks you need to do
in order to achieve this sort of layout. So I’m going to wrap up here by showing you browser support for subgrid, which is actually very sad. And this is why more of us need to try this out, because if we build things with subgrid, and then talk about it, we’re going to send a signal to other browser vendors. Now Firefox supports it, but like Chrome, Safari, they don’t yet. But if we use this and we sort of create more buzz for this feature, we’re sort of encouraging them to put this feature higher on the priority list, right? So these slides are going to be shared with everyone and there are some useful links if you want to learn more about grid and subgrid. And definitely download a copy of Firefox, plus points if you use Nightly to see all the great dev tools and CSS features and other features as they are released. [in Korean] Thank you.

Tags:, ,

Add a Comment

Your email address will not be published. Required fields are marked *