“CSS Grid Layout” by Rachel Andrew—An Event Apart Orlando 2016

“CSS Grid Layout” by Rachel Andrew—An Event Apart Orlando 2016


Hello. So yes, as mentioned
I’ve been doing this for quite a long time. I’ve been working on the
web since about 1996 which makes me old enough to
remember when the arguments we were having were whether
we should use CSS at all or whether we should stick to
font tags for styling or text. And I was using CSS
for layout back when Netscape 4 was a thing. I like to ask this
question, who else has developed for Netscape 4? Oh, there’s quite a few
here, you are my people, this is great,
it’s a good start. I was a web standards
project member, and part of the Dreamweaver task
force, and essentially we were brought into
web standards project to try to encourage standards
in that authoring tool, which is really where a lot of my
interest in things like layout comes from, and
how can we visually represent layout, how can
we do layout, in a good way. Since I started
working with CSS, CSS has become
absolutely amazing. These examples of
CSS only demos. We can do all this
animation, you’ve just heard about
animation that we can do. We can do things that we
used to use JavaScript for, we used to use flash for,
we can do right there in CSS We’ve come a long
way, but there’s one part of CSS that seemed
to get kind of stuck in 2006, and that was layout. The techniques that
we’re using for layout seem really hard,
and really fragile, and the reason is they were
never designed for laying out complex web applications. They were certainly
never designed for doing responsive design. But there’s hope, and hope
comes in this group of modules, and hopefully we’re
inspired a bit by the work that Jen’s been doing yesterday. We’ve got Flexbox, you’ve
got CSS Grid layout, and we’ve got box
alignment, and they’re kind of coming together to
create a new system for doing layout on the web. A tailor made system
for the kind of things that we need to do. I’ve got a whole bunch of
code examples in my slides, I’m going to fly through this
very quickly so please later in the week, about your
offices when you get home, have a look at
that code, and I’ll talk a bit about the browser
support towards the end. So I want to start by explaining
a few things about Grid layout, and how it works, and then move
on to some worked examples. First, we define a Grid. And we do that with a new
value of the display property. We’ve got display grid, and
you can also use inline grid. So that’s a bit
like Flexbox, we say display flex all the child
items, they become flex items, you say display grid,
all the child elements become grid items. We create tracks
on that Grid and we use grid template columns,
and grid template rows. So, here I’m creating a three
column and three row grid. We’re defining an
explicit grid here, and our items are
child elements, they all just fall into
a cell of the grid. If I want to space those
out I use grid gap, and that’s a short term for grid
column gap and grid row gaps that gives us gutters
between our grid items. Now, I’m creating a fixed width
grid here, I’m using pixels, but Grid layout has been
created for a responsive web. It allows for the creation of
flexible grids really easily. To do that we’ve got this
new unit, the FI unit, that’s a fraction unit. It represents a fraction of
the available space in the grid container. So if we’ve got three,
one faction unit tracks, then we’ve got three equal
width flexible tracks. If we want to change
those proportions, then we can assign different
factions to different tracks. So, here I’ve got one
faction unit, one fracture unit, two faction units. So the available space
in the grid container is split into
four, one part each is given to my first two tracks,
and two parts to the second. The browser window
grows and shrinks, those tracks scale
in proportion. The nice thing
about faction units is that they assign a portion of
the available space, so you can mix them with absolute
tracks, or tracks that are set with pixels for instance. My first track
here is 500 pixels, and then I’ve got a one
fraction unit track, and a two fraction unit track. So we take away
the amount that we need for our 500 pixels, and
also any gutters, and then the rest of the space
we share between our two flexible tracks. If you’ve got a repeating
pattern of tracks, perhaps you’ve got
a very complex grid, you got lots of
different tracks, you can use this repeats
keywords, this repeat notation. So here I’m saying repeat
three times one fraction unit, and we get a three
column track grid. We don’t have to write
out 1FR, 1FR, 1FR. And as it happens, we don’t need
to declare those road tracks at all. Grid will create
tracks for things that are placed outside
of the grid you declare. So you create an explicit grid
with good template columns or grid template rows, and then
if you place things outside of that, so if you just add
more content to your rows, Grid will just
create rows for you, and they’ll be auto
sized by default, cell expand to fit whatever
content goes into them. If you happen to want
to fix the size of them, so here I’m saying grid
auto rows 200 pixels, every new row track
that’s created will be 200 pixels tall. Now, I showed you that repeat
syntax specifying a fixed number of repeating
tracks, but you can also ask Grid to create
as many columns as will fit into the container. So, here I’m saying create
as many 200 pixel columns as will fit into the container
using this auto fill keyword rather than a value for repeat. And they were kind
of fixed width tracks which meant we got
this gap at the end where it didn’t exactly fit,
but if we use [? minmax ?] along with repeat, we can
say create tracks that have a minimum
of 200 pixels, and a maximum of
one fraction unit. The results of that is when
we get that gap left over where we can’t fit in all the
200 pixel tracks, that amount is just shared out equally
because one fraction unit shared out between those,
we get this lovely behavior of a fluid number
of tracks depending on the amount of
space we’ve got, but we’re able to specify that
they should be a minimum size, and then share the
rest of the space. Everything I’ve shown you so far
has been about creating grids. We’ve got a grid, and
then the child element that just kind of
sit on that grid, but when we think about grids
we’re often thinking about, well I’d like to be
able to create a grid, I’d and then I would
like to be able to place my items on that
grid, I want to be able to use this
is a grid framework And so, we have that in grid. And it’s worth learning a bit
more terminology once we start to target areas on the Grid. I mentioned grid tracks already,
that’s the space between two grid lines so you can have
horizontal or vertical tracks. You define grid tracks,
when you set up your grid, and once you’ve got tracks,
you obviously got lines, you’ve got aligned before
and after each track. So you’ve got a
three track grade, you’ve actually got
four lines when you account for the one on the end. And, those lines are indexed
according to writing mode. So, in a right to letter
line which is Arabic, the first column line
would be on the right rather than on the left. And then we have grid cells
we’ve already seen grid laying items out
into cells and that’s the smallest unit on the grid. It’s conceptually a
bit like a table cell. If we join cells together
we get a grid area. So that’s any area
of the grid that’s bound by four grid lines. It needs to be a square
or rectangular area, but found by four grid lines,
that’s a grid area in which you might place some content. So here I’m using
that repeat syntax, I’m creating this three
column track grid. I can then position
my cards on the grid. So, I’m dealing with
that first item, and I’m starting at line two,
and ending at column line four, starting at row line one,
and ending it row line three. And that places that
item, and stretches it over a larger grid area. That’s fairly
verbose as a syntax. So we’ve got a shorthand here. Here is exactly the same, except
that we’re saying Grid column, and the start is the value
before the forward slash, and the end value comes
after the forward slash. You can actually go to an
even shorter shorthand, and express the whole
thing as one line of CSS. On the order of those values
is grid row start, grid column cart start, grid
row and, grid column end, which is the
other way around to how we specify margins and padding. We’ve seen line
numbers, but it’s possible to name those lines
which obviously could be quite useful if you’re working
with other people having to keep track of where
things are in the grid, especially in to
response to a design that might get quite confusing. You can name lines
and you name them in square brackets before
the track that you define, so if defining a chunk
of one faction unit, and we’re naming the
line before that. So I’ve changed my
lines, and then we can just switch out the
line numbers for the names that we’ve defined. You can name those
lines anything you like, but if you name them
dash start, and dash end, you get some magic. You get a grid area created with
the main name that you specify, so if you’ve got main
start and main end, you’re going to get a grid
area called main which you can actually position things into. We’ll have a look at that,
preferably in a minute. Because you can create those
named areas explicitly, we can say I’m going
to call the first card main, and the second
card side one, and the third card
side two for example. And then we just lay
them out like this as the value of the grid
template areas property, laying them out in
this ASCII art manner. There’s a lot of magic,
there’s a lot of new stuff. I’m going to show you
now some worked examples of using these
things so you can see how you’d actually apply them
to kind of real life layouts. I’m going to start
with this line based placement, positioning
things using lines. So, here’s a layout,
a very simple layout, and we could put that together
using really any method that we normally use today. We’re going to use grid layout. So there’s my HTML, I’ve got
a div with a class of wrapper, and we’ve got three
child elements, we’ve got this header,
and we’ve got two divs. Now without any layout applied,
it just lays out like this, it lays out in source
order as you’d expect. Now I create two columns,
one of two function units., and one of four, and I’m setting
up a gap for both columns and rows. So I have declared a grid, but
I haven’t position my items, and so we end up with this,
and what’s happening here is the Grid is taking each
of those child elements, and it’s popping it into one of
the cells that’s being created by our two column track grid. So nothing’s been overlapping
but just not the layout that we want, so now we
need to position the items. So, the header with the
class of main header expands across the grid from
column line one to three, and it sits in grid row one. The panel comes after column
line one in grid row two, and the content sits alongside
it, column line two, grid row two, which gives us this. So, that’s it,
that’s all you need to do to create your layout. If we overlay the grid
you can see the lines and you see how the gaps kind of
act as a fat line in the Grid, So the content comes
after that line. This is where you’ll
find out layout, we’ll play around with it later. If I want to put a
photo in my layout I add that to the markup,
and I position it, and from grid column line one
to three, and in grid row three, and there it is, and
it sits underneath. It doesn’t matter which of
those columns above are longer. That’s always going to sit
underneath because it’s in it’s own track on the
Grid, it can’t pop up, it doesn’t need clearing. And other things to note is
that the background on the panel extends all the way
down to the bottom, it stretches just like
flex items will by default, so you don’t need to worry
about how short your content is, it’s not going to hop
up and sit behind there. We weren’t adding any
rows to this grid. As I mentioned earlier,
grid has this idea with the implicit grid. It creates road
tracks to hold content even if we haven’t
created those tracks. We didn’t need to create any
road tracks for our content. Those rows auto size,
what ever content we put in they’ll
just grow, so we don’t really have to worry
about specifying rows in this kind of layout. I think an awful
lot of regular page layouts you’ll not worry
about specifying those. If you’re as old as me, if
you can do– unless you’re one of those people that put
their hands up about Netscape 4, you probably built sites
using tables for layout, and I imagine some
of you are thinking, this is a bit like
using tables for layout. And actually conceptually,
and certainly when I first came to grid
layout, that’s very much how I thought about it. In fact I already had
that model in my head because I built
sites with tables. But there are some
differences, good doesn’t rely on your content
being in a particular order in the source. If you did develop for
tables you remember how we had to fragment
our designs across lots of different table cells often
in strange order in order to get the layout
that we wanted, you don’t have to
do that with grid. And, because things are
entirely described in CSS, our layout is in the CSS. We can easily move
things around the grid at different breakpoints. We can introduce a
grid, or redefine a grid at any break point. So as a quick example of that,
if I keep the same layout I got before, but this time I’m
going to start mobile first, creating a simple grid
as a sort of one column grid for mobile devices. I’m actually using
grids here just to reorder some of
the content visually. So I end up with something
like this for narrow widths. Within my media queries
I just redefine the grid, and I go back to my two column
track grid that I had before. So Grid makes it very easy
just to move things around based on media queries
if you want to do that. We have these named lines we’ve
been working with line numbers so far, and especially
once you get into more complex
responsive layouts, you probably want to start
to give some of your lines at least names to make
it easier to remember where to position things. So staying with
that same layout. When I defined my single
column for the mobile layout, I’m just naming
some of those lines. And the value there, in
this case you’ve got auto, so you want our trucks to be
auto, that comes after the line that I’m naming. We’re actually naming the
line, and not the truck that’s important to remember. Instead of having these line
numbers we can use the names, and you could take that out
then to your wider layout, and names of the lines
as you define the track. If you’re careful you can keep
the names exactly the same between different breakpoints. You know that
content always comes after the line named content. So, that’s lines,
and you’ve always got lines when you grid it. It doesn’t matter which
positioning method you use, and you’ll always have
lines to use if you want to, but we also have
these names areas. So once again, staying
with the same markup. The first thing I do
outside of any major queries is I give the areas
on the grid and name, and that’s a name
that I choose, it can be anything really it’s
just an identifier for the area. We’re using the
grid area property for this, which is the same
property for the very short one line shorthand that we used
for the line based positioning. When I set up my grid, this
is for the mobile layout, I just describe how the layout
should look actually in my CSS. So, say I want the header,
then I want the content, then I want the sidebar,
then I want the footer. I get out my narrow
layout like this, and there it is with
the areas overlaid. And then within
the media queries. Now that you can see this sort
of ASCII art taking shape here, we’ve got the header,
and the sidebar, and the content, and the footer. And so we end up with this. For straightforward layouts this
is a really, really nice way to work. I’ve been working with Grid
for about four years now, and I’ve been prototyping
things, just prototyping stuff that I need to build
using this method because it’s so easy just to
move things around on the grid. So, actually using new
stuff for prototyping is quite a nice tip because it
never can never get out there on the web until grid
it actually ships, but you can use as a
prototyping technique, and you get this
kind of side benefit that you learn this
new specification. This technique is fantastic
for just playing around with layout. A couple of things you
might want to note. If we repeat the
name of an area, it causes that to span
over the grid cells. So, here we’re saying that
what the header and footer to span across both cells. You can have multiple white
space characters between those, so you can line up your ASCII
art, we’ve thought of that. If you want to
leave a cell empty, use a full stop
period, character, or multiple full stops again, in
order to line up the ASCII art. If we’ve put a dot there
underneath sidebar, then what happens is
the footer now just sits underneath the
content, it doesn’t span all the way across,
it leaves that cell empty. There’s kind of
some magic in here. We get these implicit named
grid lines when we do this. This is our layout as before,
and we’ve got this named grid area called content. grid creates for us content
start, and content end for rows and columns. Which means if I create
an area called test, or a I’ve of tests
here, and I’ve given you a background
color so we can see it, and I’m using those named lines,
which are not defined anywhere, but gets created for us,
to position that item. And so, we get this. And what this also
demonstrates is that you can layer items on the Grid. So, you can stack things
up any way you like , and for that you use the index
just like absolute positioning. So, you can layer
things on your grid, and there’s all sorts of
interesting possibilities just in that fact. That’s a very simple
kind of layout that we’ve created there,
a very simple Grid layout. I think when we’re
thinking about grids today, we’re probably mostly thinking
about these kind of 12 column grid frameworks, 16 calling
good frameworks, or perhaps an unusual number of
columns, but some kind of multiple column
grid that we create, and then we use that to
layout our pages with. We see that in frameworks
such as bootstrap, which I of the speak
because I’ve already bar shot so I’ll just join in. I’m not a framework hater. I think that they have served a
very, very good purpose for us. Layout is hard, it is fragile. I have a business to run. You all work for businesses,
you have to do these things, and you have to
do things quickly, and these frameworks
have helped us do that. I use them sometimes
in my own work because I have to get
things out of the door. It’s not that these
things are to be terrible, you should never ever use
them, not at all, however, as you can see in
this markup we’ve got an awful lot
of stuff in here which is essentially
describing our layout. We’re describing
layout in markup, and conceptually that’s
a very heavy thing to do. Even if you abstract
that out using SAS you’ve still got this kind
of vulnerable relationship between your markup, and your
content, and the display of it. As you get more and
more break points, as you’re adding enormous
televisions, and tiny watches and things, how
much of this stuff do you want to sort of
jam in to your markup, or even if it is abstracted
one level with SAS. It’s a kind of
difficult way to work, and it starts to fall down
if that content is always tied together with a display. The thing with CSS
Grid Layout, we’re describing the
layer in CSS, which means that we can just add
those break points if we need to if we see that
something isn’t displaying so well on some new
device that has shipped. We can think, well we could
make a little optimization just there in the
CSS, we don’t need to touch any of our
documents to do that. The other thing about replacing
layout frameworks with Grid, is that you really need
to shift your mindset to be able to do that, because
we’re talking about something which is conceptually quite
different when we’re starting to actually describe
layout in CSS rather than have it tied
directly to our markup. So, let’s have a
little look at that, I’ve been playing around
with some examples. The typographic in
the earlier example came from a framework
called Skeleton, which is a kind of
lightweight CSS framework, very similar though to
something like Bootstrap. It’s a little bit cleaner
though, it is a bit simpler to use as a demo. This is the markup
for the Skeleton grid, and there’s an example
of their website. You can see again,
we’ve got this same idea that you get with Bootstrap. You’ve got divs
that make up rows, and then inside those
rows we create some divs for the different columns. And this is a little
example layout, and you end up with something
that looks a bit like this. So, that’s just the
default Skeleton grid. I thought, well maybe I can try
and make this using Grid Layout and see if that works. First, I removed all
of those row divs, because I don’t think we
need those when we we’re using a Grid Layout. And I’ve also removed
any description of how the Grid works from the markup. So, I’ve added classes, I
haven’t got anything semantic to call these areas, so I’m
just calling them box 1 to 11. What I’ve done, is I’ve removed
any description of the layout from the markup. I then create my
grid, and you can see I’m using that
repeats keyword here, and I’m repeating
the pattern 12 times, and I’m naming the one
function unit track. I’m naming it, call. That means I’m going to have
repeated lines named call, which is something we
can use to our ends in a bit, most in the same
with rows calling them row. I’ve got multiple
column, and row lines. I now place the
items on the grid, and I’m using the
named line syntax here. Here I’m saying,
box one I’d like to start on the first line
named calls, should I say call, and I say span four
on grid row, row, which would be the
first line named row. But, if we go down
to box 8, I’d like that to start on grid column
called seven and span three on grid row, row three. So if you notice,
this span keyword’s quite useful
because it means you can sort of place components,
and say that I just want this component to always
span three tracks of my grid, even if you don’t know which
line it’s going to start on. That’s quite a handy
thing to be able to do. If we work through,
we end up with this, which is pretty much the
same as the Skeleton example, so that’s quite neat. I can replace a grid framework
like that with Grid Layout. We can actually go a step
further with good layout because it allows
us to do something that these frameworks
really can’t do, and that that’s to span rows. We can span rows in
exactly the same way that we can span columns. So, we can set some of
those up to span rows, and we end up with
the third example here where I’m not just
just putting things into single rows, I’m actually
spanning over road tracks. And the heights go to
the gutter no matter how much content is in there. Behavior very similar
to that of Flexbox. You can have a play around
with that, at this URL. Once you’ve created
a grid framework, or we’re using CSS Grid
as a grid framework, we then can lay out a
design using that framework. This is a more
realistic example, I’m going back to that earlier
design, that simple page layout, but this
time I’m laying it out on the grid that
I’ve just created. So, to ascend the main header,
we want to start on call, and span 12, and
it goes into row, and you see the content there
is spanning eight columns, and the panel is spanning full. There’s the layout,
we go back to this, and you can have a look at that. URL. And, It’s really easy to
play around with this layout. If we decide things want to span
different numbers of tracks, if we want to add a little bit
of less symmetry to our design, or so on, we can just change
those lines very easily. Perhaps I don’t want the
photo to stretch right across the bottom. I’d like the panel to go
all the way to the bottom, and the first to sit
underneath the content. Well that’s quite
simple to do I can just change where those tracks end. And then, we get this. Again, it’s all defined
there in the CSS. We don’t needs to
change anything about our markup to change how
elements lay out on the page. So that’s it, that’s the entire
series CSS defining our layout. There’s no linked stylesheet,
there’s no framework linked in, there’s nothing that I’ve had
to pull in to create my grid. The grid is created by
CSS itself, natively And ya, as Jen said
yesterday, just slight Flexbox we’re going to see
everyone posting their Grid Layout based grid
framework on GitHub and everyone tweeting about
it, far more than they tweet about the actual specification. If you are thinking
about creating one of these abstractions,
or in a year’s time you’re thinking about using
one, what value does it add? What value does it add
to the actual spec, or are you just adding some
sort of weird convenience? Which doesn’t really
help anything at all, rather learning how
to use the spec. We really don’t need a Grid
Layout based grid framework because it is a grid framework. Please take that away from
here, and tell your friends. Back at the start
of this talk, I showed examples of creating
a grid with a set of boxes that kind of position
themselves on the grid without doing anything. The rules around this auto
placement of grid items are defined by the grid
item placement algorithm. If you like to
read specifications you can read exactly
what that means. There’s a lot of stuff in
the spec as in all specs. Their really for
browser engines, how should a browser a deal with
getting a bunch of stuff thrown at the grid and laying it out. So, that’s what’s in the spec. If you like reading those things
it can be quite interesting. You can learn an awful lot by
picking apart that process. So I’m gonna show you a little
bit about how this works. So now, a simple
example, you can see that Grid laid out
the items before we started positioning anything. We got things one
in each grid cell, and that’s not
really what we want. With some kinds of
layouts it’s quite handy to be able to play with
this item placement. I’ve got a list here and it’s
basically an image gallery, so an ordered list, and inside
there’s some list items, and we’ve got some
images in there. So I’m creating a grid, I’ve
got four equal column tracks on the URL element. And that, without me
doing anything else, would give me this. So, the items are
laid out, and you can see how taller items,
the portrait images, are quite tall, and
then the landscape ones look a bit squashed because
they’re unfortunately different. It’d be quite nice if those
landscape ones spanned two tracks of the grid, which
would kind of bring them more into proportion with the
others, and we can do this. If I give the landscape
images a class of landscape, I can just say grid
column end, span two. So, if Grid comes
across anything with a class of landscape, it
should make the end line span two. And, that gives us this. So the order placement
algorithm lays out the items and it moves along, it lays
out item one, item two, well that’s got a
class of landscape that needs to go over
two tracks, and then item three that needs two tracks
to, it can’t fit in that gap can it. OK, next line, and
so we carry along. So, we’re keeping the
elements here in source order. If we add that
property of grid order flow with a value of dense,
Grid now back fills the gaps. As it moves through the
items and it leaves that gap, and then it places item three,
and it comes across item four, and it’s like, oh great
I’ve got a space for that, and it picks it up, and it
takes it out of source order, and it puts it into
the space which is great for your image gallery,
not so much for your phone. I’ll come back to that later. But first. I get this question asked to
me an awful lot, like almost every talk I do
someone will say, is Grid a competitor to Flexbox? As if the CSS working
group are going around creating some sort of
CSS specification death match. Which one will win? Let’s see, but no. These two things
are very different. They’ve got some similarities,
and intentional similarities, because it’s much easier for
us all to learn these things if they share common features. But, they’re for too
kind of different tasks. I’d like to talk about
the similarities first. We’ve got this module called the
Box Alignment Module Level 3. Where we’ve seen things
stretching in Grid, and going to the heights
of the content, and so on, I’ve said that’s a
bit like Flexbox, and that’s because both of these
things are using box alignment. In fact what box
alignment is, it’s all those neat features of
Flexbox, all the alignment, and space distribution,
and so on, taken out and put
into a new module. By being in a new module
it means that other modules can then use them. So at the moment
that’s Grid Layout, what it could be other
things in the future. So this is basically the
vertical centering module. If you’ve used Flexbox,
this is a flex layout, so I’m saying display flex,
and I’ve got some items. If I was to create that
same layout with Grid, I’d say display grid. And I’ve got those items that
are just laying themselves out on the grid. Now in both cases the
default alignment is stretch, so items stretch the
height of the tallest. So the first item there
is a portrait image, and it is defining either
the height of the grid area there, of the grid
row track, or it’s defining the height
of the flex container. So with Flexbox, I
would center an item in that space with line
self-censored, that’s the second item there. And, we’ve got a line cell
flex start for the third one, and a line cell flex
end for the fourth one. Now if we look at Grid,
it’s pretty much the same, except we don’t mention
flex start and flex end, we just got start, and end. But they’re going to behave
in pretty much the same way. When you’re working
with Grid you’re aligning inside the grid area
that you’re dealing with. So that’s an example of
where those things are, they’re pretty much the same. You could use either Grid or
Flexbox to create that layout. When should you use
Grid instead of Flexbox? Now here’s the key
thing to remember, If you’re laying things out
as a column, or as a row, then Flexbox is
going to be fine. The row might wrap, but each new
row is essentially a new flex container. So that’s what we mean
by one dimensional. You’re either a
row, or a column, you’re not both at once. If you want to control
both columns, and rows, that’s where you need Grid. And, here’s an example of that. Here I’ve got a set of items
that are using Flexbox. My flex bases here is
200 pixels and the items can grow, and shrink. And, that gives us this. So, I’ve got too
many items to fit into my row there, 200 pixels. So, what happens is, as
Flexbox lays out the items, it’s like, oh I’ve
got too many items we’re allowed to wrap,
goes on to the next row, and then we’ve
only got two items, so they’re sharing the
space because that’s how Flexbox works. Each of those rows is its own
flex container essentially. So, the space distribution
happens row by row. It would be the same. if
you’re working by columns, and if it wrapped onto
a new column which would set the height. The space distribution
would work column by column. So, when I teach
Flexbox to people, and I show them
something like this, the very next question
is, what happens if I want to have
Card 4 and Card 5 lining up under
Card 1 and card 2? And that, is where
you need Grid. That’s where you need
to control both rows and columns at the same time. Here we have Grid, and
I’m using that auto fill. So I’m saying as many columns
with a minimum of 200 pixels with a max of one fraction
unit which gives us something like the flex layout. I’m saying that so I won’t
have the same kind of Grid. I don’t need to
position the items, or add anything to the items,
they’ll just flow into it. Auto placement fills the
content into cells of the grid, and arranges them in
rows, and columns. So, unless we specify a
span of more than one track, things are just going
to go into one track. They’re going to line up in
their rows, and their columns as well. In practice, there
are going to be lots of times where you
could use one or the other, and it probably wouldn’t matter. It’s just going to be up to you. You think, oh well. I like this better. I’m gonna to use this here, or
I’m using it for more things, so I’ll carry on using it. This is the big difference. Do you want to
control the layout in one dimension, or two? Another way of
thinking about it, is that Flexbox kind of
works from the content out. So, you’ve got some stuff, maybe
a list of navigation points, and you just want them
spaced out evenly. That’s a Flexbox thing
because the browser is looking at the content,
you’ve got, and it’s spacing it out along that row. Grid works the other way around. So, with Grid, you say this is
my grid, content fit into it. You’re kind of working
from the outside, and you’re defining a grid. This is why Grid
is gonna perform much better than Flexbox does. I don’t know if people might
have spotted some of the things around Flexbox,
people are saying don’t use it for
full page layout, and that’s because you get
this content shifting effect. As a complicated
layout loads in, Flexbox is just
looking at the content to work out what the
spacing should be. So you get this kind of jiggling
as all the content shifts as it moves in. You don’t get that with
Grid because Grid’s saying, what have I got here? I need to create a Grid
that’s going to fit this, and then you create the Grid,
and then the stuff goes in. So, you’ve already
kind of got the grid before the items
start to flow into it. You avoid a lot of
this content shifting that you’d get with
Flexbox So, that’s another way of looking
at it, is that, do you want to actually
define an overall grid and place your items
into it, or do you want to let the content decide. I think there are different
kinds of things in your UI that you’re gonna make
those decisions around. When I was thinking about
this, I came across an example out there on the web that
I thought we could probably do better with Grid. This is the envatotuts+ website,
and they’ve got one of these sort of panels there on
the homepage which is used as navigation. There’s a whole bunch
of blocks in the panel. The only way to do this
with floated layout, really, at the moment, is
to fix the height of things. You might use JavaScript
to kind of fudge that a bit if you need to. But, you essentially have to
fix the height of the blocks to get this kind
of layout to work, and as you can see if you add
some more content as I did using the browser console,
that added too much content into the boxes,
and it just overflowed. It’s got nowhere to go because
that box is fixed height, so you either gonna have to cut
it off, or just let it overflow if that happens. Absolute heights don’t really
work that well on the web. You can kind of fudge
it for something like this, which just got
a little bit of content in, but the minute someone
goes into your CMS and adds a whole bunch of
content you didn’t expect, the whole thing falls apart. So, I wanted to see if I can
make this better, really, with Grid. And, I can. So, here’s the last
I created, and I went for the different
responsive break point. We’ve got a narrow
layout, and then we’ve got this sort of two column wide
one, and then the wider one. So, the mirrors what
they’ve got on their side. This is a thing to note, I’ve
added a lot of extra content to the box they’re about angry
people at balloon fiestas, I’ve gone crazy
with my news story, and added far too much stuff. So that box is expanded, and
it’s made room for the content. It’s made room by making the
boxes to the side of it also taller because they’re all
in the same row on the grid. So, they’ve also expanded
and stretched down to allow space for that content. That’s something that’s
really very difficult to do at the moment,
you’d probably have to invoke some
JavaScript to get that to, work and recalculate based on
how much content had ended up there. This works by using that minmax
function again that you briefly saw before, so
minmax let’s us say, I’d like this to be a minimum
size, and a maximum size. They could be two absolute
values if you wanted, but what I’m doing
here is I’m saying make it a minimum
of 150 pixels tall. So, I what my rows to
always be 150 pixels, which mirrors what they were
doing with their fixed heights. But, if it all goes wrong, and
there is more than 150 pixels worth of content in here, then
I want the maximum to be auto, and auto means essentially
content sized in this basis, so it will just
stretch, and it will grow to take whatever
content got put into the box. We can have our
fixed height look, and hopefully if all
the content editors know not to put too
much stuff in there, that’s what you’ll get. But, if it goes wrong,
it’s going to stretch, and it’s not going
to fall apart. Then I chose to use
Flexbox inside the areas, because some of the
captions and things needed pushing down to
the bottom of the box. So, I’m just using
Flexbox, and set the margin type of
auto just to get that effect inside my boxes. And again, I could
have used Grid, I could created a grid
in there, but Flexbox seemed to be ideal
because it just deals with pushing
the content around. Again, in the real
world it’s contents going to be added
using a CMS, and not all CMS’s are great
at stopping people adding more content
where they should not. So, if you had the sort of thing
where people could add boxes to this, and you had no way of
restricting the number of boxes that got added, you
know that one day you’re gonna look at the
web site, and there’s going to be some content
that just kind of appeared. And, who knows where
it’s gonna end up because it’s not being
positioned anywhere. Grid copes with that
really nicely for us. This box on the
bottom, that’s just been added as another
child element, so there’s another
box on the Grid, and no we’ve not got a
background image for it because we haven’t
sorted all that out. But, things aren’t broken. That looks OK. The content’s not overlapping
because Grid has just created an implicit track,
and it’s taken that content and put it in there for us. We can then sort it out. I think this is
how Grid is really reacting to the real world
of content on the web. That’s really interesting
to me because my day job, I’m a CMS vendor, I’ve got
a content management system product. So, I see the real sort
of problems of people using content, and working
with content editors, I see that every day. It’s that, that makes me so
excited about this stuff. I think Grid is really
reacting to the sort of stuff that we actually do these
days as opposed to coming from a past where people were
laying out academic documents. I’m really excited about
Grid, as I’m sure you can see. I think it raises some
interesting questions around accessibility,
as does specs Flexbox. Because we’ve got this ability
to completely separate source and the design which
should be great, it should be a very good
thing, but this ability for the kind of
display in the source to end very much out of sync
could cause real problems. Particularly for people
who can see the display, but are perhaps tabbing
around the document, using the keyboard to
navigate for example. Ideally, they should allow us
to create the most accessible source documents. So, we should be able
to create fantastic, really well organized
source documents, really good content that we
can reuse all over the place. And then use Grid and Flexbox to
create the best visual display for different devices,
for different breakpoints. Considering how people are
using assistive technology, and so on, are going to be able
to actually access this stuff. So, it should be great,
should be fantastic. It could be pretty
bad though if people use Grid and
Flexbox as an excuse to forget about the source. Well, it doesn’t matter does it,
doesn’t matter because, well we can just move things around. It doesn’t matter where it
is in the document anymore. That would be pretty bad. What would be even
worse would be if people started to strip
out semantic elements to make everything a
Grid or flex action. And what I mean by that, is
things only become grid items if they are a direct child
of the grid container. So, I say display grid, I
create my 12 column grid, I can only position direct
children on that grid. I can’t sort of go right
down into some form element that is deep down
nested right down there. I think there’s a real and
present danger that, possibly not individuals because
you’d know you are doing it, and you should feel very bad if
you are, but perhaps authoring tools. I mentioned Dreamweaver
back at the start, I’ve worked with
authoring tools before. Perhaps they might just decide
to flatten out the source a bit to make it easier, or
JavaScript frameworks. That could just remove some
elements, make everything flat. Really easy then to position
everything, isn’t it? That would not be a good thing. So, we don’t want to be
flattening out the source, and this sort of
stuff worries me. The spec does warn against all
sorts of accessibility issues. It warns against things
like moving things out of source order. Source order’s important
for sequential navigation, and non-CSS user user agents . It’s warning is that
grid placement effects the visual presentation. It doesn’t change anything
about your source. If logically you’re
reordering things, if you’ll be ordering
things to make a different sense
of that document, you should be doing
that in the source as well as in the display. There’s a few examples
out there from people who know far more about
accessibility than I do. [INAUDIBLE], Miceli, some
good examples without Grid and other layout methods
work with tab order. There’s currently a difference
between how Chrome and Firefox work with tab order. It’s actually a bug
in Firefox that it is following the visual display,
but some people say actually that’s a better use case. So, these things aren’t
solved problems yet. If you’re interested, I
hope everybody is interested because I think
this is something we need to care about. This is a really fantastic
video from Leonie Watson. She talks about CSS
accessibility particularly around layout, and she
explains how this all works with screen readers, and so on. Really, really worth having
a look, and also the article there, the keyboard
navigation disconnect. That’s a really useful article
to understand a bit more about these issues. I think as a community, we
need to be having discussions now about how we
deal with this stuff, and make sure that the
accessibility is carried through as we all get excited
about these new methods, and that we don’t just
create a big mess. As for that flattening
of markup issue, I’m very concerned about
that because I can see that that is likely to happen. There is in the specs
something to mitigate this. It’s perfectly valid
for an item on the grid to have a grid declared upon. Just like with Flexbox,
you can have a flex item, and you can say display
flex on that flex item, and then create sub
items as flex items. The same works exactly
the same with Grid. Here I’ve got an
example of that. So, here I’ve got a div
with a class of wrapper, and inside I’ve got some
boxes, I’ve got some divs. As you can see box D actually
has three other divs nest inside it. So E, F, and G are
children of box D. So, I say display grid on my
wrapper, and I create my grid. And I’m laying out A, B,
C, and D on that grid. So, what I get is this. To those light boxes
there inside D, and their not laid
out in the grade, and there’s no auto placement
taking effect on them, because they’re not direct
children of that grid element. So they’re just inside. If I wanted to make
those items a grid layout I’d need
to declare display grid on their parent
which is box D. So, we declare a grid on D, and
give me a gap, and so on. I’m just going to create
a two column grid here, and then I can position
the F and G on that grid. So, I’ve now got nested grids. So, that’s useful. We can nest grids
one inside the other. You could also nest flex items
inside a great, or whatever. You can go as far
down as you want. If you had this kind of multiple
column grid system, what would be really neat
would be if actually you could declare that
on the parent, and then things down
the tree could also use the same grid
that was set up, not having to sort of create
grids all the way down and manage those. That would be really neat. It would make creating sort of
lined of layouts an awful lot more simple. The level one spec actually
includes a subgrid value for the display property. However, it’s not been
implemented in any browsers yet. How this would work is,
in this layout’s box D which we had before where
we’ve created this grid, we’ve said display grid, and
we’ve set up some columns. Instead of setting up
the columns, and rows if you wanted, you could
say display subgrid. And that would be it, because
the subgrid would then use the parent grid sort
of grid columns, and rows. The problem with this not
being implemented anywhere, even in an experimental
way, is that it’s marked as at risk in
the specification. Now, what at risk means is
that, as the specifications kind of getting close to being
made into a recommendation, to make something
a recommendation we need to have at least
two implementations of each feature. So, we need to have two
browsers in this case to have implemented subgrid. So, we can say, yes,
this feature works, and it works in
interoperably It works across more than one browser,
and this is a good thing because what we don’t
want is one browser to do a whole lot of stuff, and that
not end up in other browsers. We want things that
are recommendations to be implemented crossed
browser, that’s a good thing. I think we’d all
agree with that. In order to make that
happen, and for the spec not to forever be
stuck in limbo, things that as seen as possibly
very difficult to implement are marked as at risk. What that means is that could
be dropped from the spec without needing to
kind of take the spec through a whole big process
again to make a recommendation. The status of subgrid
is somewhat uncertain. I think it’s really
important, we can see how it would be
helpful in terms of our layouts because we would like to be
able to create grids, and just use them even further
down the tree. But, I think the biggest
issue is that then that leads to this accessibility issue. At least this issue of people
flattening out their grids, flattening out their markup
in order to use Grid. I’m not the only person to
be thinking in this way, and Eric’s written his own
thoughts about the matter. As I also said, that he hopes
that they’ll be implemented. I very much imagine
at this point that Grid will be pushed
into public news channels without subgrid. I would very much like
other web developers to make a noise about this
particular feature in order that it does get in, and into
implementation sooner rather than later, and isn’t
forgotten about. And so on that note, what is
the status of Grid Layout? So Jen showed you a browser
support slides, and I’d like to just unpack where we
are with Grid a little bit more for you. Last Thursday, the spec moved
to candidate recommendation status, and that means
that the working group feel that the spec is
pretty much complete, and people should
implement against it. So browsers should
be able to implement, and they already
are implementing, but they should be
pretty safe to do that. So, what happens now
is we need to make sure that those features are
work, that they are’ interoperable implementations
of the features, and there will be a lot
of testing going on. If you go to Can I use, you’ll
see something like this. They have no data
to show that it’s counted as a recommendation
yet, and you’ll notice this really weird,
and this IE Only thing. Jen mentioned this yesterday,
and how strange is that? Because we like to bash IA,
they don’t do anything good, they held the web
back, don’t they? But this specification, it
came from Internet Explorer. It was first
implemented in IE 10. I wrote about it back
then at the end of 2012. There’s an article in 24 ways
that I wrote when I saw this, and I was really
excited about it. So, you can say thank you
to Microsoft and the IE team that we have Grid at all. I very much doubt we’d
be in the position we are in if they
hadn’t implemented, if they hadn’t built
something and said, look this is pretty cool. And then there was a
draft to work from, something that
could be built upon. So yeah, that IE
implementation is different. You dig out the article
of mine and read about it, and see the differences,
it’s a lot more limited because it was that
was the first attempt, it was the first draft. So, Edge have
updated and bridged the new spec mark as high
priority in the backlog, but I’d encourage you
to go and vote and say that you definitely want
that very, very soon. I assume that they
will ship at some point an updated version into Edge. You can see all the little
flags on the other browsers, so most things have got this
flagged behind a browser flag. A lot of that work,
the work in Blink, and also in WebKit, that’s
been done by an open source consultants he called
igalia, but not actually sort of people of Google
themselves, or whatever, it’s actually been done by this
open source and consultancy, and interestingly the work
was funded by Bloomberg. Which is an interesting
story in itself I think. An organization
coming in funding a huge part of the CSS spec
Into a browser implementation. So, they’ve been doing,
for about the last three years, the Blink
implementations, so that’s Chrome and Oprah. It’s also been
going into WebKit, and so it’s in Safari
and [? 10 ?] preview. So that’s interesting. We’ve got this specification
being built that Mozilla have got a really
great implementation. They caught up very
quickly with Blink, and at this point
what tends to happen is if you’re using say Chrome
Canary, and Firefox nighties, you’ll find that things sort
of leapfrog from each other. Sometimes one of them works,
and then the next one will work, and then someone will
implement a bit more. So, I’m kind of testing
things as we go, and seeing them work
in one of the other. But, all the time this is a– there’s a massive bug there
on Bugzilla for Mozilla. You’re seeing things
being fixed all the time, work is really happening
quite at a pace on these. To keep all this up to date,
because it’s a changing scene, this is a page of my
site Grid by Example. Browsers I link to
the browser meta bugs, and let you know how you change
the flags on your browsers to support Grid. And just any general
browser related information that comes my
way I stick onto that page. So, that’s a
reasonable place to go, I’ll try and keep that as
up to date as possible. So this is really interesting. I know as Jen mentioned
yesterday this is all happening behind browser flags. Browsers are kind
of working together, and you see on the mailing
lists, and on issues on GitHub, you see them talking
on working together to get this specification
out there into our hands. This is inter-op. This is what we asked for when
I was part of the web standards project. Get these new specs, and
they’re worked on together by all the browser
manufacturers and other people in order to get something that
really solves the problems that we have today. It’s very, very cool. And I’m sure some of you
thinking why are we spending all this time looking at
something I cannot use yet. And, here’s why. Once specifications now are
sort of out there and live, making changes to them are
almost impossible because it will break production websites. Jen spoke a bit
about the mess that was left by Flexbox coming
out behind vendor prefixes, which we were never supposed
to use on production web sites. But, we were all like yay,
new CSS and it kind of works. And, so we used it, and
then it changed, and then we’re like bad
browser vendors, you have a broken implementation. And, it wasn’t their
fault. The spec changed they implemented
thinking yeah, this is the spec, you know,
we put it behind of a vendor prefix so people know
they shouldn’t be using it in production websites,
and of course people use it in production
websites, and then we end it with three lots
of Flexbox out there. This is not a good
thing, and so yet, that’s why new features are happening
behind these experimental web platform features flags,
or specific feature flags in Mozilla. So, we have to take the
initiative ourselves to toggle those flags , and go and look at
these things because it’s only while they’re behind flags
that we, as web developers, get a chance to
make a difference to the specification. Once they get out
there in to the world, once they’re out there
in browsers, once they’re used in production
websites, that’s it it’s very hard to make changes. You can add things, you
can’t change things. Behold the list of things
that the CSS working group are going to change once
we’ve invented a time machine. A lot of this stuff
is really old, it goes back a long, long way. A lot of those things that
when you’re developing, your like, why did those
people who make CSS, why have they done this, why
do they called this this? Why is this so weird? It’s because of this, because
things came from a time where we’d had no idea what
we’d be using the web for. So you get this chance
by toppling flags by going back, and
looking at things that are new that
you cant use yet, you get this chance to take part. And, you get this chance
to make things better. And, you get this chance to
make things better for you in the future. So, please do look
at this stuff. Look at the new things
that people talk about. Have a play around
with examples. There’s a fair
few of us who love poking around at stuff
that’s hidden behind flags and create examples. You can just go and look
at those things and think, does it solve the
problems that I have? Or, do I see some
big issue with this? Because actually at
the working group people would love to
hear that feedback. Because otherwise
you kind of get CSS that’s developed
by browser vendors, as opposed to CSS that
developed by people who use CSS. And, as someone who
uses CSS and as one of the few representatives
on the CSS working group who is just a web developer,
who isn’t tied to a browser, vendor I’m very keen to have
the voice of far more officers, as we call them, involved in
the process to make sure the CSS that we get is the
CSS that we want. So please do have a
look at these things while they’re coming out,
because once browsers ship you lose that chance. CSS spec issues, they’re
all now on GitHub. We’re all on GitHub. You can go, and you can
have a look at the drafts. Have a look at the things
people are saying, a lot of it isn’t just in perfectly
normal language. It’s people saying, oh what
should we call this feature, or should we allow percentages
in gaps, or is simple stuff, and you can come up with things,
yes I’ve got use case for that, I need this. So do have a look, it’s
really worthwhile doing. Your essentially doing a
good deed for your future web developing self to take
a look at this stuff, because if you don’t you’re
really leaving your future in the hands of the very, very
few of us who are doing this. So, there’s more code, lots
and lots of code over at Grid by Example. This is actually
the last time I’m going to be doing this
talk in this form, and so what I’m doing is I’m
taking a lot of these examples and ideas, and making a load of
free video tutorials out of it. So, you’ll be able to go to
Grid by Example I’ve, already put seven of those up. There’s lots of little
short videos just explaining different things about the
spec, as well as example code. Please go have a look,
[INAUDIBLE] my code [? pen ?] examples, have a play around. Drop me a line on Twitter if
you want to ask any questions. I love, love, love
talking about this stuff. I’ll be around for the rest
of the day, and tomorrow. And thank you very,
very much for listening.

1 thought on ““CSS Grid Layout” by Rachel Andrew—An Event Apart Orlando 2016”

Leave a Reply

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