Hello.

So there's an awful lot of you out here.

Wow, it's very, very cool to be here.

I was at the 2014 event, and I've done one more since then, so it's very nice to be here.

I'm very sad that this is the last of type so pleased to be here.

So I'm grateful, Andrew.

It's becoming increasingly difficult for me to tell people what it is that I actually do.

I kind of that They asked me the semi things for conference badges.

So can you put your company down there now, just off doing stuff on the web?

So amongst that stuff, I'm a Stasis working group member, and I represent from tears on, and it's really is sort of part of that work is why I'm here talking to you today.

I mentioned that.

Yes, I was here in 2014 that I wasin fact here talking about CSS grid layout, slightly jumping the gun.

It has to be said because CSS grid layout didn't ship into browsers until the spring of 2017.

We were all well prepared and I was starting to feel a bit like the CSS vaporware lady by the time eventually got out into browsers, so I was quite pleased when it did eventually happen.

So what kind of two years on amazingly well, though I feel like I've now spent half of my life talking about their specifications.

Andi, I've shipped stuff, you know, I've got production sites that use grade.

A lot of you have probably got production sites that use Ingrid to some extent.

Um, and we're starting to see people coming back and saying, Well, they screwed things all really good.

But I've discovered that it doesn't do this.

Oh, I've got this use case that doesn't really work properly, you know?

How are we goingto?

How could we do that?

So I'm kind of interested, really.

In what's next, I really start see myself a za problem solver.

Whatever I've done in the industry has Bean about solving problems, and that's why I really love working on CSS because we've got all of these amazing problems to solve everywhere you look, there's a new problem on someone's bringing a problem, which workout to do that and one of the problems that was that we should have immediately started to see and we kind of knew this was going to be an issue.

Waas this issue that grid items, you know, you can say display grid, but only the direct Children of the grid become good items, so only they could be laid out on the grid that you've created.

If you create a 12 column grid, only the direct Children can sit on that grid and in the level one specifications.

We had this idea of sub grids on dhe.

It didn't get implemented for anyone and we should have changed her.

Maybe that was going to happen and and there is some debate about it.

And eventually it was removed from the specifications from the level one suspects that we kind of finish that specifications.

But I was very, very keen that this sub good feature wouldn't go away.

And as soon as people started using grid, I could see that Yes, people really did need this sub good feature.

So this is kind of the really good example off why you might need sub grid.

We got a pattern like this.

You've got a set of cards and they've got neat headers and footers.

I imagine that everyone has had a designer.

Bring to them a design like this with all of the same content in all of the boxes.

Because that's exactly how all websites work.

We have an identical content in every box all the time.

And of course you get it.

You implement this, you say, Well, that's a nice grid layout.

Really easy grid layout, like your basic grid example, will give you that layout, so you build that layout on, then you get into the CMS on this happens and then the designer says no.

Those photos are all supposed to line up with each other, and you're like, Yeah, and it's kind of like we've pushed this problem a level deeper because we used to have this problem.

We had this problem with floats that you couldn't line at the bottom of the boxes on.

Then we got great and we in flex box.

We could line the bottom of our boxes.

But if your boxes and nested inside a grid item even if they are a grid themselves, you still can't line up the boxes because their independent grids.

And this is a fundamental thing about using the display property values of display.

Don't inherit so the kind of wine back and understand the actual problem.

CSS has got this concept of normal flow or block and inline layout, and that's pretty much the first thing you learn.

When you learn CSS, you've got block things and they kind of spread out and take all the space.

And you've got in line things like words, and they go next to each other.

Now that's normal flow.

And it could be worth thinking that essentially, CSS is always trying to go back to this layout method so you can change the value of display.

You can make something display flex.

You can make something display grid on.

Its Children will become flexor good items, but their Children the internals of those boxes, they go right back to normal flow.

That's kind of a good thing, because otherwise once you said display grid, you then have to go and say, Oh, you know, these things inside aren't good items.

You can't be setting yourself all the way down because generally normal flow is what you want.

It means that we can write a page of HTML and just load up in a browser, and it's readable you know most the time.

That's actually what you want.

So here's a simple flex example.

We've got a normal flow heading, and a paragraph didn't have to do anything about their layout.

Then I've got this media objects that display flex on the image in the content or flex items, but the content has a heading and some a paragraph that's gone right back there to normal flow.

So that's kind of what's happening.

And that's why we can't just make things.

The nest is somewhere in the structure.

Participate in the grid.

Our card internals.

I have made my card agreed so I could make my grid.

I'd like a nest.

Agreed to make my grid item a grid itself to each of my cards.

A little mini grids, but they don't know about each other.

I've got the Firefox.

Good.

Inspector turned on here now and you can see the grid on that card and you can see how the lines are extending out on did not lined it with all the other cards there.

So we have this problem there sometimes where we do want things nested down inside the structure to be able to somehow participate in the grid that we have to find on the parent.

Now, we do have a way to make indirect Children use a grid or a flex layout.

And some of you might have come across two already.

We've got display contents now.

Display contents is one of the box generation values.

If you say display none, that removes the box and everything inside it.

So it is.

If that thing was never there on in your design, as you can say, display none on a container.

Everything inside gone can't see it.

Display contents does a similar thing with the box itself, but leaves the Children alone.

So if you've got a box, you say display contents on that box, the box is removed, but the Children stay visible on, then participate in whatever layout they then become a child off.

So I've got a little example of that.

We've got a grid layout here on nested inside.

One of the grid items is actually a UL and nested inside that it's got some list items, so there's the HTML.

So I've got a date with the class of grid.

That's gonna be my grid container.

I think got to devise their direct Children.

I've got you.

Well, that is also a direct child on that Inside that you?

Well, there are some list items that you can see.

So there's a CSS the direct grid.

Children have that sort of pale background on them.

So the you Ella's well on the direct UL Children, they have a pink background so you can see that they're actually a child of you.

Well, and no child off the grid.

Now, if I wanted to remove the box of the U.

L, I need to say display contents on the UL, it vanishes.

The list items can now participate in the grid layout and lay themselves out.

So that's pretty cool.

That solves some sort of pattern, and you can see that's only happening to the box.

The Children are still the direct Children of you.

Well, they've still got their pink background color because they're still a direct child.

Everything else still applies.

Just the box of the U.

N.

Has bean visually removed, but that does not solve our card problem.

If we display contents are card, we get this because the card box has been removed on So we now have the components inside the card, the head on the contents in the footer and now bean order placed across the grid.

And that's not what we wanted.

That might be a pattern that you want sometimes.

But it's not the pattern that we're trying to build today.

And I can't talk about display content as well without a little warning that although it has pretty good brown to support, there is also a really gnarly accessibility bug.

Um, when you say display none, that does actually make the thing invisible for screen readers and so on as well.

It's like it goes away, and then you might want to bring it back later.

Display content is only supposed to affect the visual display, but due to a book in browsers, it is actually removing elements from the accessibility tree on, therefore rendering it not very useful for the things it would be useful for, which is allowing something to have a semantic box around it for you, no semantic purposes and for accessibility purposes and saying, Hey, I'm a list.

It's actually moving that information as well.

Browsers are fixing this.

I think fair folks have pretty much fixed it.

I know Chroma bean, you know, fixing it.

I've been seeing the notifications on that issue coming through, so browsers are taking this very seriously.

Now it's been pointed out and are fixing the problem.

But if you do decide to use display contents, just test very carefully in assistive technology that you haven't made a terrible mess while doing it.

However, we'll go back to our cards and a issue of wanting these card internals tow line up using display contents, even if it wasn't boogie and had great Brown's support.

That doesn't give us what we want because we want to keep our boxes.

We want to keep our card backgrounds s.

So what are we gonna do?

And it's This issue is where sub grid becomes useful.

So this is a value for good template columns and good template rose, and it basically makes it possible for you to declare that the Children of a good item become a sub grid.

And that's much easier to understand with some examples on all of the code.

These examples is online, and it's with my resources so you can go and have a look and play around wealth and trying to squint it on the screen and work out what's going on so we can make a grid item a grid you can say display grid as far down as you like, but at the moment that grid becomes this unique independent thing.

It's a nested grid.

It's completely separate the parent.

It has different lines for columns on Dhe Rose.

If you want that nested thing to line up with apparent, you're gonna have to do some very careful things with the track sizing to make that work.

Eso here I've got some CSS defining an outer grid, and that's got the whiteboard on.

And there's an item that sits on that grid on the items.

Also agreed with column and road tracks, and the serve item sits on that bridge.

The surviving the pink thing is on the internal grid, so again, five bucks could inspect if you're working with grid or with flex box.

And you know the inspectors in Firefox are fantastic.

You really, really do want to be using them.

Make everything so much easier when you can see where the lines are off the grid, especially playing around with this stuff.

So you turned on the five.

That's good, Inspector, and you can see the outer grid there on the parent.

You can see how that pink box doesn't line up with those grid lines.

It's separate.

And if we have a look at the grid on the child, there's a good on the child in the pink box lines up with the lines that are on the child so fairly recently, in fact, been allowed to offset multiple grids.

Display them at once very handy if using sub good.

So you can kind of see how the lines lineup or don't line up in this case when we're looking at our item.

So it basically start started over with a new red.

And so what sub grid lets us do It lets us selectively opt grids into the parent grid so we can decide if we want to.

Ops are columns or rose or both into using that the parent tracks.

So what I've done here, I've said grid template columns, sub grid, and you can see what's happened.

The item is now using the columns.

They're defined on the parent, and so the pink item is now positioned according to those lines, not to any internal lines on, therefore, it lines up with the rest off the tracks.

Now we could do this for Rose.

We could say Grid template rose sub grid on here.

I'm defining my own column so the columns don't line up.

And that's because that's what I've decided.

I want behaviour Rose.

We're using the two rows road tracks that are created on the item is sort of bean bean stretched over those because we're going across two tracks.

We can also create a sub grid in both dimensions, so that will tie our sub grid completely to the tracks that are available for Rose on dhe four columns.

So here were saying great template columns, sub grid and good template rose sub grid.