okay hello 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
but I'm very sad that this is is the
last of type I'm so pleased to be here
so I'm rich Landrieu it's becoming
increasingly difficult for me to tell
people what it is that I actually do I
kind of that they ask me so many things
for conference badges say can you put
your company down there and I think just
stop doing stuff on the web so amongst
that stuff I'm a CSS working group
member and I represent frontiers and its
really as 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 was in 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 it eventually got out into browsers
so I was quite pleased when it did
eventually happen
so a carrot two years on amazingly
although I feel like I've now spent half
of my life talking about this
specification and I've shipped stuff you
know I've got production sites that use
grid a lot of you have probably got
production sites that are using grid to
some extent and we're starting to see
people coming back and saying well this
grid things all really good and but I've
discovered that it doesn't do this or
I've got this use case that doesn't
really work properly
you know how are we going to how can we
do that so I'm kind of interested really
in what's next
I really sort of see myself as a problem
solver whatever I've done in the
industry has been 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
someone's bringing a problem and which I
work out to do that and one of the
problems that was that we sort of
immediately started to see and we kind
of knew this was going to be an issue
was this issue that grid items you know
you can say display grid but only the
direct children of the grid become grid
items so only they can be laid out on
the grid that you've created if you
create a twelve column grid only the
direct children can sit on that grid and
in the level one specification we had
this idea of sub grids and it didn't get
implemented by anyone and we sort of
changed how maybe that was going to
happen and and there was some debate
about it and eventually it was removed
from the specification from the level
one spec so he kind of finished that
specification but I was very very keen
that this sub grid feature wouldn't go
away and as soon as people started using
grid I could see that yes people really
did need this sub grid feature so this
is kind of the really good example of
why you might need sub grid we've 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 of 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 and then you
get it into the CMS and this happens and
then the designer says no those footers
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 and then we got grid
and we own flexbox and we could line at
the bottom of our boxes but if your
boxes are nested inside a grid item even
if they are a grid themselves
you still can't line at the boxes
because they're 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 up all the space and
you've got inline things like words and
they go next to each other
now that's normal flow and it can 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
and it's children will become flex or
grid items but they're children the
internals of those boxes they go right
back to normal flow now that's kind of a
good thing because otherwise once you
said display grid you'd then have to go
and say oh you know these things inside
our grid items you can't really be
setting yourself all the way down
because generally normal flow is what
you want it means that we can write the
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
meteor object said display flex and the
image in the content our Flex items but
the content has a heading and some and 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've made my card a grid
so I can make my grid item I can nest
grid to make my grid item a grid itself
so each of my cards a little mini grids
but they don't know about each other and
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 and they're
not lined up with all the other cards
there so we have this problem there are
some times where we do want things nest
it down inside the structure to be able
to somehow participate in the grid that
we have defined 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
so ready 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's as 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 and then participate in whatever
layout they then become a child of so
I've got a little example of that we've
got a grid layout here and nested inside
one of the grid items is actually a ul
and a nested inside that it's got some
list items so there's the HTML so I've
got a div with the class of grid that's
gonna be my grid container I think got
two divs there direct children I've got
are you well that is also a direct child
and then inside that you well there are
some list items that you can see so
there's the CSS the direct grid children
have that sort of pale background on
them so the UL as well and the direct UL
children they have a pink background so
we can see that they're actually a child
of the UL and not a child of the grid
now if I wanted to remove the box of the
UL 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 a ul they've still got that
pink background color because they're
still a direct child everything else
still applies just the box of the UL has
been visually removed but that does not
solve our card problem if we display
contents our card we get this because
the card box has been removed and so we
now have the sort of components inside
the card the header and the contents and
the footer and now beam 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 contents as well without a
little warning that although it has
pretty good browser support there is
also a really gnarly accessibility bug
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 bug in
browsers it is actually removing
elements from the accessibility tree and
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 know
semantic purposes and for accessibility
purposes and saying hey I'm a list it's
actually removing that information as
well
browsers are fixing this I think Firefox
have pretty much fixed it
I know chrome have been 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 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
our issue of wanting these card
internals to line up using display
contents even if it wasn't boogy and had
great browser support that doesn't give
us what we want because we want to keep
our boxers we want to keep our card
backgrounds so what are we going to do
and it's this issue is where sub-grid
becomes useful so this is a value for
grid template columns and grid template
rows and it basically makes it possible
for you to declare that the children of
a grid item become a sub grid and that's
much easier to understand with some
examples and all of the code for these
examples is online and it's with my
resources so you can go and have a look
and play around rather than trying to
sort of 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
are down as you like but at the moment
that grid becomes this unique
independent thing it's a nested grid
it's completely separate to the parent
it has different lines for columns and
rows if you want that nested thing to
line up with a parent you're gonna have
to do some very careful things with your
track sizing to make that work so here
I've got some CSS defining an outer grid
and that's got the white border on and
there's an item that sits on that grid
and the items also a grid with column
and row tracks and the serve item sits
on that which the serve item the pink
thing is on the internal grid so again
five got screwed inspect if you're
working with grids or with Flex box that
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 of your grid especially playing
around with this stuff so you turn on
the Firefox 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 the grid on the child and the
pink box lines up with the lines that
are on the child so fairly recently in
firefox you've been delayed bailout
source of set multiple grids display
them at once very handy if you're using
sub grid so you can kind of see how the
lines line up and or don't line up in
this case when we're looking at our item
so it basically sort of started over
with a new grid 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 opt our columns or
rows or both into using at 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 that are defined on
the parent and so the pink item is now
positioned according to those lines not
to any internal lines and therefore it
lines up with the rest of the tracks now
we could do this for rows we could say
grid template rows sub grid and here I'm
defining my own column so the columns
don't line up and that's because that's
what I decided I will
but here four rows were using the two
rows row tracks that are created and the
item is sort of been being stretched
over those because that 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 rows and
four columns so here were saying grid
template columns sub grid and grid
template rows sub grid and that's really
the basics of the spec it's a very
simple thing it is essentially just
another value for grid template columns
and grid template rows that says you
know I'm not going to define my own
columns or rows I'm just going to use
the ones that are already there on the
parent now as with any specification
there are some subtleties there there
are some things you might need to be
aware of one of those is that line
numbers we don't use the line number
from the parent because if you did you'd
have to figure out exactly where on the
parent your sub grid component was that
might change it could be a component you
use all over the place so line numbers
restart inside the sub grid so in that
way a sub grid is no different to
declaring the the the tracks and use the
line numbers they start from one if your
work in English which is left-to-right
line one is from Y on the left-hand side
of your sub grid component just working
in exactly the same way that a normal
grid would so in this example here you
can see that column line one is actually
on line two of the parent grid now you
might want to know where on the grid
your sub grid is you might care about
lining up against a line that's actually
in the parent are lining up something
inside that grid but again it's lying
the parent and to do that if you name
your parent lines they will get passed
into the sub grid so you've used line
names on the on the parent they'll get
passed in and you can reuse them when
you position things inside the sub grid
so for instance if on my parent I've
named cold start and call end when I'm
positioning the pink item inside the sub
grid I can say call start and call end
rather than worrying about the line
numbers
I have a feeling that more people will
use named limes once they're using
subgrade quite a bit so don't EE see so
many people using named lines it's not
saying that tend to get in my email
people asking about I have a feeling
that once people start to use subgrade
the named lines that get passed through
might be quite useful so here's the code
for that and you can see where we named
lines with the square brackets we're
naming the line and then you've got the
track size coming after it and then our
sub-item can actually use those those
names when we place the item but you
might also want some names that just a
scope to that sub gridded item you might
want to give the sub grid lines some
names and now we do that by basically
listing the line names after the sub
grid keyword who don't have tracts in
order to put our lines between so they
look a bit like that so you might say
you've got your sub grid keyword and
then you're going to have all of the
named tracks in square brackets because
that's how we name those things so there
I've just named two lines so this with
our example would let us do something
like this I've got my named lines on the
parent I've also named all of the lines
of my sub grid and so I've got I can use
either to position things I can use the
parent line so I can use the sub grid
lines it's up to me and so here's sort
of a little worked example of that I've
got my named lines on the parent now
I've added my named lines on the child
and then I'm positioning two items one
using parent lines and one using child
lines so that's sort of a useful way to
be able to so scope line names to just
the the circuited item itself I think
fairly obviously and logically the sub
grid inherits the gaps from the parent
so if you've used the gap property your
row gap or column gap that's gonna get
passed through into the sub gridded item
which i think is probably what you'd
expect if you've got gaps on the parent
in your lining things up against the
parent you'd probably expect that would
get passed through into your child item
and you can sort of see how that works
here but sometimes you want things to
line up with a parent tracks but you
might actually want to say close the gap
between two items perhaps you've
you know some content with a box below
it you don't want to have a visible gap
between the two things so to enable that
we can change the gaps on the sub grid
so you just used the gap properties as
normal on that sub grid at item so you
could if you wanted no gap like in this
example I've said row gap zero setting
the gap to zero and it's a bit like if
add as a negative margin then to the
item so it will sort of get into the gap
and it won't expand out of the top of
the there so good that would be really
weird and not very useful it will just
go down into any gaps and sort of fill
in the gap if you had said a larger gap
than is on the parent but it's as if
you've added a margin and it will sort
of you know go in but it's like that the
line of the grid sort of runs down the
middle of the gap basically and you can
sort of get into that by setting the gap
to zero
or whatever you want and hopefully it's
me it's sort of fairly obvious so I'm
looking at this stuff that sizing of
items in the sub grid can obviously
change the size of the parent tracks so
if you've got a row which is set to auto
which is the default for for grid tracks
and you put more and more content and
that's going to obviously make the sub
gridded row grow but as long as the
parent rows is auto that will grow as
well so it kind of works pretty much as
you'd expect it works pretty much like
you've just nested a grid and you happen
to be using you at the tracks from the
parent but everything else works in kind
of the way you'd expect if you've nested
one grid inside the other or if you've
already got designs where you're nesting
one grid inside the other so this is how
we would get our card example to work
we'd basically stretch our card over
three tracks of the grid which means
that the footers are now all in the same
row which means they all line up with
each other and when our footer which is
taller makes that row bigger it makes
the whole row bigger and we just get
space below the items that don't have as
much content which is really what we
wanted and we can also remove the gaps
throw on the parent grid on the child if
we don't want to have the bigger row gap
which we have between the
two items so this is this is pretty cool
this allows us to create that pattern it
allows us to nest grids and let them
then participate in the sizing really of
the parent and you can do this really as
far down as you need to do now I've been
playing around this for a little while
and just sort of I like to sort of think
Oh will this solve any other problems
that we've got and because you know this
is a sort of very obvious use case
having a set of cards like this this was
one of the first things that was brought
to me well why can't we do this there's
also the example of you know maybe
having like a 12 column layout and
wanting things that are nested
further down in the structure to also
use that same 12 column layout they're
kind of the obvious sub grid examples
but I think there's a few other things
that I've started to realize we can do
because we've got sub grid and yeah this
is one of them if you use an explicit
grid so this is where you say grid
template columns and define the track
some grid template rows and define the
tracks that creates what we call the
explicit grid the difference between
that and the implicit grid is the
implicit grid is when you just say oh
create as many rows as you want to fill
this to fill up with content which I
think is a lot of the time what we do if
you've got a set of cards like this and
you just want them to keep on filling
cards and keep creating grid rows as
many as you need you would just use the
implicit grid now in practice pretty
much the only difference between the
explicit grid and the implicit grid that
people run into is that you can target
the end line of the explicit grid with
minus one in other dimension which does
mean that you can you know if you're
using the explicit grid you can say 1 2
minus 1 on other elements and it will
span to the end of the grid so that's
what we're doing here I've got five
explicit grid rows my items are have
been placed into that and I've got one
item which is positions from grid Row 1
to minus 1 and minus 1 is the end line
of the explicit grid so it stretches to
full height and that's really what I
wanted to happen but then I have to
remember that line minus 1 is the end
line if the explicit grid so if I don't
know how
many of those items I'm going to have I
don't know how many rows I'm gonna have
them I have one row or might have a
hundred rows I don't know and so I can't
actually get it though row minus one
because I'm going to use the implicit
grid I'm going to create as many tracks
as I need and so if I try and do that
one two minus one thing that happens and
that's not what I wanted at all and this
comes up a lot I would get a lot of
people asking well how can I span to the
end of my implicit tracks and I'm like
well not very easily because we don't
know what we've got so what I really
what I want that pink block to be lined
up with the rest of the cogs what it
have the same size as the rest of the
columns they're going to be flexible and
but I want to be able to get to the end
of the number of rows that are created
so this is what that sort of looks like
and in terms of the CSS where I'm you
know I've got no defined implicit rows
I'm using a grid Auto rows to give my
rows a height so what I'm looking at
that then we can't talk that inline the
implicit grid I'm looking at sub grid
I'm thinking I think we can probably
solve this with sub grid because we've
now got a way of saying I want all my
columns to be everything lined up in
columns but those items to be able to
create implicit tracks and so it does
involve an extra container because I
needed something to sub grid so I've
added a container a wrapper around my
items and that's going to use a sub grid
for columns so that means that the
column tracks are going to be the same
for the the item which is outside of the
wrapper and the items that are inside
the wrapper so you can see there where
I've got my items and they're just
creating as many rows as they need
inside that sub gridded area so I'm not
going to submit on rows I've got a sub
grid on columns I'm just creating the
items one of one row after the other as
many as I need
but that pink item is essentially just
put in one row of the parent grid so it
can stretch as tall as it needs no
matter how many rows are created and
that basically just looks like this so
I've still got no to find explicit rows
and I've got the items there which is a
sub grid for the columns so that the the
pink
item could be the same size as all the
other items and then I've got the full
height one which is going one two minus
one but essentially just in one row of
the parent grid now we can use that we
can do that when we've got sub grid
because sub grid lets us sort of used
that that one grid on the parents for
everything to be lined up column wise
and let me do something different with
my rows I think as we start playing with
this there's probably quite a few other
little pans that aren't obvious sub grid
candidates but they will be able to fix
by using the sub grid now that's all
marvelous but in my role as CSS
vaporware lady I need to have some bad
news and that's fact that we don't
actually have anything in a live browser
that's going to be in front of your
clients just yet that's good isn't it I
like that I'm gonna be sad when someone
ships it and I'll not be able to show
while it's all red but slightly better
news is that Firefox have actually
shipped sub grid in nightly just last
week all Lizzie yeah I forgot the
Firefox so everything I've shown you
here is there they're screenshots
they're all screenshots from Firefox
nightly you can get a copy of Firefox
nightly and all the examples from this
talk will work and so if you don't have
a copy of any please go and download it
and have a play it is really really
important that you do and I'm going to
quote myself from 2014 or someone
quoting me in 2014 you know if you wait
until a spec is done and implemented to
have a look and say it's rubbish well
it's too late and browsers putting stuff
out for us behind flags or in like
nightly versions of browsers they give
us a chance to contribute because while
a spec is only in you know well we've
got all that read on can I use that
means that so grid is not in anybody's
hands get it's not out on any production
websites nothing is going to break if we
have to change something and that's the
same for any spec that is in development
that's just you know just starting to
get out there and one of the browsers it
is really the best time to be able to
play with that and to say hang on I can
see a use case that this nearly solves
but doesn't quite perhaps perhaps
it could so it's a time for us to
contribute and I think it's more
important than ever that web developers
get involved with the web platform we've
got a version of grid to experiment with
in the first place so the reason that I
had grid you know now is playing around
with it from sort of 2011 or so and was
because it was implemented prefixed in
IE 10 and that implementation was
pivotal in allowing people like me to
play with it and evangelize the spec and
hopefully try and get the interest of
web developers and actually try and help
move this forward and I think as we have
fewer rendering engines
we're losing places where those
experiments might happen and I think
that makes it even more important that
us as the web development community use
our influence on the browser's to the
left and we do have influence and so how
do we indicate what it is that we
actually want the first thing we just
need to tell browsers what we want in
the platform and we can often just do
that by going along to their book
trackers here is the book in chromium
for subgrade support and just flagging
up there's a like thing or a follow star
you can you can click on there to say
you know yes I think so good is
important I would like to have it and
here is a handy QR code you can use that
QR code you will go directly to that
book tracker and you can just like that
book and don't leave sort of me to
comments on bugs you know and we're not
here to pester browser engineers but
we're just here to say hey yes this is
something that I need as a web developer
I would find it useful if you would like
just off talk a bit more about it and
share a bit more information then write
up features like so good or anything
else that you want to see in browsers
right of your use case write up the
problems that your feature will solve
because it's seeing those use cases you
know web developers actually saying hey
we need this and we need this because of
this reason that's very compelling for
people on the working group browser
vendors to actually think about
implementing it and solving a new
problem sometimes we get a feature that
is just in one browser for example it's
likely that Firefox are going to ship
sub-grid before anybody else at which
point the entire web community will say
yeah Rachel that's very nice
use it because it's only supported in
one browser now we've got feature
queries you could potentially use sub
grid as enhancements you could ship
something like that card design and
which does have obviously not lined up
headers and footers that's fine if the
browser has sub grid we can check for
sub grid and we can use sub grid for the
browsers that support it the ones our
supporter it looks better now this is
important because if we're using it then
browsers are having a look to see what
it is that we're using because if you're
a browser that doesn't implement
something you don't want everyone saying
well it looks better in this other
browser so it kind of sends a message
we're using this we'd like to have it
and also use new features when they're
behind a flag or in a nightly version of
the browser as I say this is your chance
to be to test the web platform and offer
feedback you know you can you can be a
beta tester of this stuff and you can
actually make it better with your
feedback and so what do you do with the
feedback well you might find a bug if
you find a browser bug if it's like well
the spec says you should do this find a
browser book it's not log to go and log
it that's really helpful to the browser
engineers who are working on this if you
find something that's missing from the
specification then come and tell the CSS
working group all of the CSS working
group issues are on github so you can
come onto github you can search the
issues we're pretty good at them then
being sort of marked up with the name of
the spec so you can search like CSS
squid issues for example if you realize
that your issue is not locked and we're
not talking about it then you know you
can add a new issue just like you can
against any project you know CSS is just
like any other open source project it's
just a very big one it's quite a long
time to get things sorted but we are
interested in the things that you have
to say so you can raise an issue
particularly it's around layout you can
always then prod me and say hey I've
raised this issue you know could you
have a look when much rather be able to
kind of promote the things that are
coming out of the web development
community it's a lot more powerful than
the stuff coming from just right inside
the working group so this is that this
is just the issues repo there as I say
you can see in the square brackets the
names of the specs and it go and have a
poke around anything that you're
particularly interested in go and have a
look and see the sort of things the sort
of
work that's being done it can take a
while for things to be discussed but
when we do discuss things at a
face-to-face meeting or on our phone
conferences
that's all minuted and the minutes are
then posted back to the issue so you can
kind of follow along and see what the
progress of something is I'm really very
very keen to encourage people to
participate in the web platform and if
you're people who build things using
these features then you're exactly the
sort of people who should be
contributing and the browser engineers
people work on browsers and the people
who write specifications are all very
very clever folk but a lot of them don't
build websites anymore or haven't built
websites were a very long time so kind
of your input is really really important
and also as a person who uses CSS you
get an awful lot back by working on this
stuff by getting involved with this
stuff yeah I left school at 16 I've got
no maths or science background and the
things I have learned by just
contributing and yet some has been told
I'm wrong but having conversations with
browser engineers and people who have
really in-depth knowledge of this stuff
you know I couldn't have learned that
stuff on any course I couldn't have
learned that stuff out of any books and
so contributing has actually given me a
huge amount back and I really would
encourage anyone whether you're brand
new to the industry you've been doing it
for years to see how you can get
involved follow along and do speak up
and she might be the only person who's
actually spotted that missing use case
and you know you don't have to been
doing CSS forever
to realize that there's a glaring hole
that no one has noticed so please do get
involved and all of my demos and so on
are at that URL and I'm around all day
I'm always very very happy to talk about
layout thank you very much
[Applause]
[Music]