- In the research I've been doing
over the last two years studying graphic design,
trying to figure out what is happening
with the evolution of web design,
one day I opened up this book,
and saw this poster,
Jazz at Lincoln Centre Spring of 2007.
And I immediately thought, wow!
Could I do that with CSS Grid?
So the first step in implementing anything in CSS Grid,
is to figure out what is the HTML.
What is this content?
And you can see here, that there are a bunch of events.
Each of these events are in these pink boxes.
There's a title, Jazz at Lincoln Centre,
and arguably, a subtitle, Spring 2007.
There's also this little bit about tickets,
and how to get tickets, where to buy them,
where to call for them.
There's a logo in the bottom left hand corner.
Of course, for the web,
you don't want logos to be in the bottom left hand corner,
but for this exercise,
I just wanted to implement the poster identically.
Here it is, marked-up in HTML.
I start with a body and a main element,
and I've got an image,
a header with the Jazz at Lincoln Centre Spring 2007,
and then, really those events are a list.
A list of events.
So they really should be marked-up
with unordered list items.
And there's also if you couldn't see the poster,
if you didn't see the layout of the poster,
it might be confusing to know what is going on.
What this list, or what this content is.
So, I put here in h1, schedule of events,
with the intention of making it visually invisible
for anyone who's experiencing the webpage with CSS,
but get it in there for everybody
who's experiencing this webpage without CSS.
Because it's really helpful,
it's helpful to have that header,
schedule of events.
And so I wrapped that h1 in the UL into a section,
that's my mark-up.
Here it is all the way at the bottom,
you can see the rest of this list,
and then after I close the section
that is the list of events,
I started a new section called a ticket info,
and put my information about my tickets in there.
So that's our mark-up.
Then I looked at this without any CSS at all.
Which you can do by just not having a CSS file,
you can also do that by,
if there is a CSS file,
like if you wanna go inspect this example,
you can just go into the inspector and erase the CSS,
or edit the URL to the CSS file,
and change it so that it's wrong,
and the CSS doesn't load,
but here it is.
You can kinda see what our source order is getting us,
with the default styling that a browser comes with.
Logos first, then this h1 and h2,
schedule of events with its own header,
you get the idea.
So now let's start thinking about our CSS.
I want to create a layout
that's gonna work for every browser
and not just only browsers that have Grid.
So what I'm gonna do is write a pretty simple layout
for browsers that don't support Grid,
and then I'm gonna override it
with a layout that does support Grid.
That requires Grid, for browsers that do support Grid.
And I'm gonna take that layout,
and I'm gonna wrap it in this feature query
of the @supports statement.
So we can see here, this code,
the basic layout for non supporting,
non-Grid supporting browsers,
I don't have very much, actually.
I've put some widths on those list items,
the ticket info section, I put a width on it as well,
and then I took each of those items,
each of the events and the ticket info,
and I just put a float on all of them,
I put some margins on those,
and you can see the result here.
A basic float base layout.
Now, for those of us who've been doing
float base layouts for the last ten years,
you might immediately think, oh gosh, there's a bug.
There's a float drop problem.
All the boxes have different heights,
and because of that you need to clear your floats,
but then I thought, you know, I like it like this.
Even thought it kinda goes against the grain,
it makes sense.
It's a bit like our jazz poster,
and it's you know, showing jazz events.
It's fine.
It's good enough, you know, not a huge number of people
maybe, are gonna get this version.
30% of my audience, not all 70%.
I could spend, not all 100%,
I could spend more time on this if I wanted to,
but especially for this demo, it's fine.
They get a layout, everybody gets a layout,
this is a pretty good layout.
Then, in the CSS,
I wrap, you can see that very first line
on the top of the screen, @supports display grid,
and this is the code that's going to run
just for the browsers that have Grid.
The first thing I need to do
is remove a little bit of the code
that was for the browsers that don't support Grid.
So here I've got width auto, and margin zero.
Just take out some of those margins,
set the widths back to auto,
get rid of the set numbers for the widths,
that's gonna basically undo the previous layout.
You don't even need to take the floats off,
because if a grid item has a float applied,
it just ignores the float.
And then I get into the code
for implementing the Grid layout.
And this is the result.
The browsers that support Grid get this layout.
And you can compare the two,
some browsers are gonna get the layout on the left,
some browsers are gonna get the layout on the right.
Works great.
I can ship Grid today.
So let's dig into the code.
Let me show you how it is that I used Grid.
Here I am, I'm in Firefox Nightly because I wanna use
some of the newest CSS Grid inspector tools,
and they're only available in Nightly.
I'm gonna hit Inspect Element,
and dig into my code.
You can see here,
here's all the HTML that I just talked about.
This UL is one of my Grids.
I've got a Grid applied on this UL,
and then up here on the main,
as well, I have Grid applied.
And if you didn't already know that,
you could find that out by going in Firefox
to this Layout panel, right here.
So on this layout panel, I can see here,
that I've got a main and I've got a UL,
and these are the two Grids.
The two places that I'm using display Grid.
And I can turn them on from here,
so there's our unordered list grid,
but let me change the colour,
'cause that colour is pretty hard to see.
I'll make it a darker purple colour.
And maybe we'll change this one to be more blue,
to make it really obvious which one is which,
and we can see,
so there you can see that I've got
a four column grid for my unordered list,
and a six column grid for my overall main layout.
And here I've turned on the line numbers,
so that helps us out.
So let's look at how I did the layout
on this particular grid.
We can see here the UL,
I've got display grid,
and I've said grid template columns
repeat four, 14 VW,
so this will make a repeated pattern
of four times of one column of 14 VW.
So each column is going to be 14 VW,
which means 14 view port units wide,
and that pattern of one column
is gonna get repeated four times,
which will give us four columns total.
I also have your grid gap of one VW,
one view port width unit,
which is basically 1% of the overall space that's available.
Because of the width of the view port.
Yeah, so fairly simple definition of the grid.
The rows are gonna be calculated
automatically by the browser.
And then, this is a good example of a layout
where I've explicitly placed each of the grid items.
So here, you can see this particular item,
I've said grid-row, 1 / 2,
grid-column 3 / 4.
So what does that mean?
That means, I would like you, browser,
to take this particular item,
and put it between grid row line one,
and grid row line two,
and also put it between grid column line three,
and grid column line four.
This syntax 3 / 4 means,
I want the start line to be line three,
and I want the end line to be line four.
So it puts it right here.
Between line three and line four.
That's how we place this particular item
in this particular cell.
And then we can look at this one,
and it goes from grid row two to three,
see from two to three,
and it goes from grid column four to five,
here, four to five.
So let's look at this one.
We would expect this to go,
it's gonna go from column one to two,
row three to four.
Let's click and look.
Yup, column one to two,
row three to four.
Look, happening what we think.
And we can move this around.
Like we could say we want this to start on two,
and it's gonna move it up.
And we could say we want it to end on three,
we could say we want this one to start on two,
and we want it to end on three,
right, there's all kinds of ways.
There's different ways to write this syntax,
but this is one way,
this is one of my favourites,
it's the way that I chose to learn first.
You can always get into the deeper complexity
or all the other options later,
but this is a pretty good way to start learning Grid.
So then I've got,
so all of these events are placed on this particular grid,
but what's going on with the rest of the page?
So I've got this logo,
which is all the way down at the bottom of the page,
I've got this title,
this header here,
I've got my h1 and my h2,
and then I've got,
this ticket information.
So if we look at the ticket information, for example,
the h4 and the paragraph
are not being explicitly placed on the grid.
What's being placed is this particular section.
The way Grid works,
because we have a display grid on this main element,
that anything that's a direct child
of the main can be placed on the grid.
So the image is being placed on the this grid.
Here let's go turn it on in the correct one
so we can see the correct colours.
This, here I am,
I'm talking about the blue grid.
So here, I'll just make it green.
This green grid.
So here we're talking about the green grid.
We're not talking about the grid
where the events are being placed.
We're talking about the grid
where these other things are being placed.
So the main grid,
the green, this teal grid,
we've got this image,
we've got this header,
we've got the list of all the images,
and we've got this event section down here.
Things that are grandchildren,
that are two levels down from the main element,
you can't place those on the grid.
Not using display grid.
In the future, we're gonna have a tool
called display sub grid,
that would let us, kind of,
take a grid from one level in the DOM,
and suck it down into a different level,
and push it back up to the first to level,
and get it from a parent to a grandchild,
or great-grandchild.
But we don't have display sub-grid yet,
at least not in the summer of 2017.
Hopefully it will come soon.
But until we do have that tool,
we need to do what we're doing here.
Which is to have to separate grids,
and nest them, one inside of another.
Now, I really wish I had sub-grid.
I could make a much more flexible,
responsive, fluid design, by having,
kind of, one grid that's applied
to multiple places in the DOM,
but without that tool,
my only choices are to either really mess up my mark-up,
and get rid of all of those list items around the events,
and flatten everything out,
which would screw it up for screen readers.
It would make no sense for SEO purposes.
It would make no sense if, in the future,
we decide to restyle this,
and we wanna use the same HTML
coming out of our content management system,
and simply adjust the CSS.
That's a bad idea.
So, what's most important is to set the HTML,
keep that HTML locked down,
and then do the layout,
whatever, using whatever technique we need to.
So, that's why I have two separate grids,
one nested inside of another.
It's also why I'm using view port units to size my grid,
because I want these two grids
to be identically on top of each other,
and using view port units
seem to be the best way to do that.
I'm still exploring to see
if there might be another possibility,
another way to get everything to just keep its size,
but without using view port units,
I wasn't really, I didn't have,
I couldn't find a way yet, to do it.
So that's why I'm using view port units.
And you can see here then,
so for example, let's look at this header.
This is getting applied to grid column one to four,
which means, you know, it's going from one to four,
and it's doing grid row two to three,
and that's, you can see that it's in three cells,
it's not in once cell,
it's in these three separate cells.
I also have an align self centre applied,
where I could say align self start,
in which case it'd end up at the top of that space.
Or I could say align self end,
where it ends up at the bottom of that space.
The reason that we have vertical centering here,
and it's being centred in this space,
is because of this alignment property being applied,
align centre.
Alignment, in the world of Grid,
always goes in the block direction,
and justify, like justify content, justify self,
always goes in the inline direction.
So, here we wanted to go in the vertical direction,
and that's the block direction,
in this particular writing mode,
so we're gonna use align self.
So check this out,
you can go to labs.jensimmons.com
and inspect this example yourself.
Use the Firefox Grid Inspector to really get in there
and see how I put it together.
If you have a different version,
a different way that you think the CSS could be better,
I'd love to see it.
Post it somewhere, and send me a link.
And maybe you'll give me good ideas
about how to make this example better.