- In Europe, in the 1920's, 30's, and the teens,
there were a bunch of different people doing some amazing
experiments in graphic design.
Really pushing the edge of what was possible,
with the technology that they had,
both figuring out ways to take metal type
and do really interesting things with it.
And later, taking phototype setting,
paste-up kind of material,
inventing whole new ways to do layout
using the new techniques.
Some of the stuff that happened at very end
of the metal type era, I find so beautiful.
This work by Piet Zwart and
Jan Tschichold and a bunch of other people,
there's a lot of examples where you can clearly see
that these folks were influencing each other
and just messing around to see what was possible.
I think this is one of my favourites.
There's no text in this, it's just all the lines
and pieces and bits and bobs that you have
in the drawer of metal type when you're doing lock-up
that they thought, "well what can we do with that?"
So last year, as I was building labs.jensimmons.com,
I wanted to kind of come up with something interesting for
the top of the page and figure out something...I don't know,
borrow from the past and do some sort of design.
So I did a design a lot like theirs.
This, what you're seeing right now, is the fallback layout.
So the layout that's interesting and looks like
the early 20th Century only works if you have Grid.
People who don't have Grid, which last year was basically
a hundred percent of people, or a hundred
percent of people using normal browsers and not
the experimental browsers with flags turned on,
they would just get this layout.
They'd just get, like a regular flow layout.
I didn't have to do anything to make this happen,
it just happens.
But then this is the layout that folks who
have a browser who sees Grid, this is what they get to see.
Very much taking from that era,
same kind of colouring, same kind of fonts, same typography,
but the challenge for us in the early 21st Century
is to figure out how to do a layout that is responsive.
How does it morph and change when
the browser window's a different size?
Or in another situation where there's more content
than you originally realise there might be, or less content.
So I thought, let's dig into this example
and I'll show you how it is that I built this.
So this is a copy of it. Different text.
But basically the same code running this, little simpler,
so it's easier for you to see it. There's the design.
So, let's go ahead and say, "Inspect Element"
I'm here in Firefox, I'm in Firefox Nightly because
I want to use some of the Grid tools that are only available
at the moment in Nightly, July 2017.
They may now actually be in Firefox
or maybe they're on their way but
if you open up your copy of Firefox and you don't see them,
you can always just open up Nightly and find them there.
So, one thing I can go over to the Layout panel
and I can click this...I can see that in fact,
there is a grid on the page, there's one grid
and I'm gonna turn it on by checking this box.
I can also click this target and that's gonna jump me
in the HTML to the place where `display: grid;` is.
I can click back over to the Rules
and I can see, `display: grid;`
I can also turn the Inspector on and off here.
So one of the things that's happening is that there's this
`transform: rotate(-45deg);` being applied,
but it's only being applied at a certain viewport width
so at smaller viewports it doesn't exist
at bigger viewports it does, once there's
space, basically, for the rotation.
We can inspect this, we can just turn this off
for the rest of the demo just so that we can
see things a little less complicated without the rotation.
And you can see here that I've got
line 1, 2, 3, 4, 5, 6.
We can see that line 1 and line 2 are sort of
on top of each other although there is a gap between them,
and then the row lines: 1, 2, 3, 4,
5 and 6 down here. And then we can dig in.
So this is our grid container,
we can dig into our grid items.
So here's an H1, here's an H1,
here's a box that has content in it.
The whole box can be placed on the grid
the bits inside cannot be placed separately on the grid
so we'll just ignore those for now,
we'll just look at what happens to the box that
those things are inside.
There's this paragraph here where, just as more examples,
you can see what's going on inside. But again,
it's just the paragraph that gets placed.
And then I also have this B. So what's the deal with this B?
There's nothing in it, it's an empty element on the page.
I could use a div. A lof of folks use empty div's.
Rachel Andrew has a lot of empty divs in her grid examples.
It's a quick way just to have
kind of a nothing element to place it.
The thing is, there's no way to
directly style anything that's part of the grid.
The grid itself is a construct in CSS
and the only way to style things at the moment
is to have an element, to place that element on the grid
and to style that element.
So I want to have a big red, thick
line at the bottom of this layout.
I don't have anything down there to put it.
I don't have...you know, none of these other boxes,
the H1's, the paragraph; those are not gonna be
a good place to put that red box.
So I need an empty element.
And rather than having an empty div,
I chose to use a B element.
B is for bold.
It's one of the early html elements
that really isn't recommended anymore, it is kind of,
not officially part of the HTML specification anymore.
If you want something to be bold,
it's much better to use emphasis or something else
because it has semantic meaning and you can say,
"this is supposed to be, this part
is supposed to have emphasis to it."
So, like, when a screen reader comes through and reads it,
it reads it like it's bold.
So bold is not...don't use it, except...
I think this is a situation where it's
kind of a good idea to use it because here we are,
we're using an element that's clearly
not semantic, that clearly doesn't have any other use cases,
that is only about visual styling,
and maybe some day in the future,
we'll be able to style the grid directly.
I've been advocating for that at the CSS working group,
seeing if we can get some things into the
level two version of the grid specification
to give us the ability to style cells
without having elements on them.
But we don't have that yet so maybe in the future
I'll want to find and replace and remove some of these B's
and they sort of stand out as being,
you know, visual things only and not being semantic and..
so anyway, that's my current thinking.
It's what I've done in a lot of examples.
So I put this B here so that I can place it on the grid
and then I can give it styling, so this border is on the B
and then you can see here, I've got grid column
three slash six, which means I want you to go
from grid column line three to grid column line six,
which is why it runs all the way across these three columns,
and I said grid row five, which means
I would like you to start on line five.
And you don't have to give it an end number.
If you don't, it always just increments by one
so we say we're gonna start on the sixth line,
it just assumes we are gonna end at the...
I mean, we're gonna start at the five line
it assumes we're gonna end at the six line.
And then I get a big, huge, thick border.
And I put on here lines, self and justify content
just to make sure that if for some reason that row
gets taller because of other content that's in the layout
that that line is still always gonna be at the bottom.
Just for some robustness to make sure it's not fragile.
The other thing that's interesting, you know, of course
you can look at any one of these things and you can
look at numbers and you can see,
okay it goes grid column one to four
so it's starting at line one and it's going to line four
I didn't say anything about the rows
which means it's just going to go according to the
auto-placement algorithm so it's gonna start
in the upper left corner in this case
because it's the very first thing on the page
or there's more examples, we can look and see,
you know, grid row three means I want you to start on
row line three and I want you to go
grid column four to six so it runs from
column line four to column line six.
You can see that it's in this particular
two cell area, but it's at the bottom.
That's because I'm using align self
and I'm telling it to go to the bottom.
One of the big differences between Grid and some of
the mental models we have before is that
the content and the columns, and in this case also the rows,
the columns and rows, the area
might actually be bigger than the content
and so the content could be at the top or the bottom
or centred, right or left or centred
unlike, say, using a tool like Bootstrap or 960.gs or
all of the different frameworks
that we had between those two points.
Those were, like you put something in the column, but
the content was always the full width of the column,
like the width of the column and the fact that there
was sort of even a column at all was,
were all mashed together conceptually, so
you never had content that was smaller than the column
but in Grid, you can totally have that.
You can have content that's actually smaller
than the column or smaller than the row
and then you can use the alignment principles
to place it inside the larger area.
It's a big part of what we're gonna wanna do with CSS Grid.
The other thing that's super interesting here is this
Grid-in writing mode's being turned 90 degrees.
Now, I could have used transforms perhaps
like I used transforms over here,
transform rotate negative 45 degrees, is gonna rotate this.
The problem with transforms though, is that
transforms don't alter the calculations of the layout.
They don't actually take up more space.
So if I applied a transform to the writing mode,
the Grid-in writing mode's phrase, this H1,
it wouldn't affect the rest of the layout
and I do want it to affect the rest of the layout.
I want the height of these three rows
to add up to the length of this block of text.
I don't want the things that are lower down
on the page to end up higher up.
So you could see, like, this is the layout
if I take off the CSS that I am using
and then I add a transform:
rotate 90 degrees, it's gonna
turn it 90 degrees but it doesn't
change any of the rest of the layout.
It's not actually accomplishing what I need.
So I'm not gonna use the transform here.
What I'm gonna do instead is use this
property called "writing mode."
Writing modes are for supporting many different
kinds of scripts and languages.
There are a lot of languages around the world, of course,
there's many different ways that writing works.
Some writing works in a left to right, horizontal fashion,
other writing scripts work in a right to left
horizontal fashion, and then yet others
flow vertically either right to left
or left to right; they do both.
So the writing mode specification was written in CSS.
It came along...it really became
fully implemented about two years ago.
It came along to support the full range of scripts
that are in modern use around the world.
But, you can also use it to do graphic design effects
so here, English...this is an English example,
English is a horizontal language that runs left to right,
but I'm gonna go ahead and use writing mode
in order to get this effect that I want.
So here I'm using writing mode vertical R L,
which is gonna give me the opportunity to
turn it and if there are multiple lines of text here,
the lines are gonna run from the right to the left
so the second line would go here
and the third line would go here
and the fourth line would go here, which makes sense
in this particular way of rotating the text.
So that's all I have to do is just say
"vertical R L" and I get text that's rotated 90 degrees.
You'll also see that the cursor...
See that cursor? That cursor actually changes directions.
Up here the cursor is for horizontal text
and here the cursor is for vertical text
or really, perhaps I should describe this as sideway text.
Very simple thing in the CSS but, you can use it
to do some kind of amazing graphic design effects.
So that's the whole thing. It's a responsive, squishy box.
We can see here how I've defined it.
I defined my columns: auto 1FR, 1FR, 1FR,
point 5FR for my columns.
My rows are auto 1FR, 1FR, auto, auto.
These two rows are the same height and these
three rows are whatever height they need to be
for the content that's inside of them.
And same thing here: this first column is auto,
which in this case, is kind of collapsing down to nothing
and then there's three columns that are set to be
the same width as each other and then this column
is set to be half the width of these other columns.
That's probably the most complicated thing about CSS Grid
is to kind of figure out, when do I want to use FR's,
when do I want to use auto, when do I want to use
something like min content, max content?
I'll talk about some of those options in other videos.
But this example, just looking at one example at a time,
is kind of using a mix of those units to get
a layout that is gonna work in a lot of different contexts
and be very flexible and squishy,
always allow the content to not overlap, to be fully itself,
so it doesn't ever break at any particular viewpoints,
and does something kind of interesting all the way long.
And you can see here, at different breakpoints
I've changed where everything where everything gets placed.
You can dig into the code yourself
and see exactly how it is that I did that.