- CSS Grid is pretty exciting
but, to me, what's exciting isn't just the code
it's what we're gonna do with this code.
It's gonna be how this changes graphic design
forever on the web and in order to really dig into that
and figure out what is going on,
I've been doing a lot of studies,
a lot of experiments and I wanted to show you one of them.
I took a Mondrian painting and made into
a responsive website.
So, this is a Mondrian painting.
There are many of them, of course.
Pete Mondrian did many over and over
and over and over again.
Really, he was doing a study of what does it mean
to have a bunch of boxes on a grid?
What happens if you do it like this?
What happens if you do it like that?
What happens if you have a giant red one
that's bigger than the others and there's kind of
this diagonal line with this blue box?
What does that feel like?
It's funny these Mondrian paintings,
these are the kinds of paintings
that people go to a modern art museum
and they see them and they go home thinking,
"I could draw that, what's the big deal about that?
"I don't understand why that's worth X bazillion dollars."
It helps to understand this Mondrian painting
in context, so what was going on graphic design wise
in the rest of the world when Pete Mondrian
showed up and started doing this kind of work
and other modernists.
Well, a lot of it was Victorian graphic design.
And Victorian graphic design had lots and lots
of, like, ornamentation and heavily decorated
and just so extremely symmetrical,
everything was symmetrical.
And on the web today we don't, we're not really into
this kind of ornamentation, we used to be
more ornamented, we've gotten into flat design.
Kinda getting rid of ornamentation
in much the way the modernists kinda got rid
of ornamentation of Victorians
but the thing that we continue to do
that the Victorians did
is make everything completely symmetrical.
You could take most websites today
and fold them in half and they would be the same
on each half of that fold
but there's not really a reason
that we have to do it this way.
We could easily start to do asymmetrical designs
and break out of this totally symmetrical thing
and I see these Mondrian paintings
and I'm like, "What would it be, you know,
"what if there's like a landing page
"for a lot of content on something like
"The New York Times homepage or some other
"kind of such website where the layout was done
"in more of a Mondrian shape rather
"than in a, kinda, the symmetrical shapes
"we keep using today?"
So, I wanted to do this as a webpage.
The first thing to decide is
how do I represent this in HTML?
And this is what I came up with, so,
I thought about making all of those
different colours be background colours
or I thought about using CSS to create the colour
and I ended up deciding that I really wanted
to keep the brush strokes from the original paintings.
So, I took the painting and I chopped it up into pieces
and I didn't make them background images,
I made them foreground images, I made them content images,
'cause I feel like if you look at this painting,
you're thinking, "What is it, what's the content
"that's here, what's the interface that's here?
"What is it that I need to convey to my users?
"What is it that the browser needs to see
"or the search engine or the screen reader
"or how do I give something
"to all of those different things?"
I don't want to do this in a 100% CSS,
so, by giving HTML images and doing a bunch of
separate images, that, to me, is the best way
to represent this painting
and then, it gives me the opportunity
to put alt text on every single one of those images,
so, that if someone is using a screen reader, for instance,
the experience that they have,
is this poem, "White, white, yellow, white, white, red,
"yellow, white, white, white, black,
"white, white, yellow."
Like, that makes me laugh, I find that hilarious
and I'm like, "Yes, that is this experience
"if you were to hear it, that would be a good way
"to hear this painting."
Okay, good, alright, we got that HTML.
It's important to me to always lock down that HTML first.
Make the HTML be what it is,
the essence of the content or of the interface,
the essences of what it is we need to convey
then add CSS to figure out the styling.
So, I added a little bit of CSS
to make the black lines, are all in CSS,
and here I've done a super basic layout
just so you can see all of these separate images
in a flow layout before I've applied grid,
this is what you get, this is kinda the flow layout
version of it and then, I've applied CSS Grid to it
and you can see here,
I've got a responsive Mondrian painting.
The blocks of colour are actually rearranging themselves
at different widths of the view port
to reconfigure into a different kind of Mondrian painting,
right, I don't have any media queries in this code.
CSS Grid lets us do a layout like this
with much less code than you would need
in order to do this with something like Afloat.
So, let's look at the code.
That list, if you remember the HTML,
I had an unordered list and bunch of list items.
So, the unordered list is gonna become our grid container
and the list items are each going to be grid items.
So, the first thing we wanna do
is define our grid on the grid container,
in this case the ul, and then we're going to
add a little bit of code to some of the LIs
in order to do some specific stuff,
I'll show you in a minute, to each of the items.
But first looking at the grid on the ul,
we put display grid, grid template columns,
grid auto rows, and grid auto flow.
So, grid template columns is gonna define
the columns on our grid and here I've defined them
as repeat auto fit minmax 80 pixels to 1fr.
I have another video where I explain in detail
how and why that piece of syntax works.
So, I'm not gonna do that here
but in general, this repeat auto fit minmax 80 pixels to 1fr
is telling the browser, "I would like you
"to make a bunch of columns, I'm not gonna tell you
"how many to make, you decide how many to make.
"I want each of those columns to be a minimum of 80 pixels
"and a maximum of 1fr."
80 pixels, then, is the minimum.
So, the moment that there's space
to have another 80 pixel column, it adds another column
or the moment that there's not enough space
to have 80 pixel columns, it subtracts a column.
That's why we don't need any media queries.
The browser's deciding how many columns to make
based on this minmax syntax.
And then the 1fr is saying, "Hey, don't just stay at 80,
"I do want you to grow and be flexible
"and I want each of those columns to have the same
"as everything else, one fraction, one fraction,
"one fraction, one fraction,
"you're all gonna be the same as each other."
So, that's all we need, we don't need any media queries.
We don't have to change the number of columns.
This one line of text is gonna make these columns range
from 80 pixels to whatever it is
right before there's room for another 80 pixel column.
Grid auto rows is defining our rows.
If we did nothing, it would automatically make rows
but they'd be all kinds of different heights
and I'm not really sure, I don't remember what I did
at first how it worked out, but by saying grid auto rows 80,
we're basically saying, "You automatically figure out
"how many rows to make, when you do make a row,
"make it 80 pixels."
So, the rows are always 80 pixels tall.
And grid auto flow dense is another bit of code
that makes this work, part of the magic that we need
to get this responsive Mondrian painting.
I'm gonna explain that to you in a minute.
But here on the ul we've defined our grid
then we're going to on, not all but many of the list items,
we're going to give them dimensions.
We're gonna tell them how wide to be
or we're gonna tell them how tall to be.
What we're not doing is telling them where to go on the grid
we're just gonna let the auto placement algorithm
place everything and replace, move things around,
change the placement of things
as the number of columns changes
but we do need to tell the browser
how big to make each of these items.
So, here in this code you can see
that the fourth item is getting a grid row of span six.
The fifth item is getting a grid row of span two.
The sixth item is getting grid column span four,
grid row span four.
The span with a number is basically saying,
"I want you to span this many rows
"or this many columns."
This diagram is of a different kind of example
but it does the similar principle I wanted to show you.
So, here item one and two are simply
the size of one cell.
By default if you don't tell the browser,
"I want this particular item to be bigger
"or I want it to span."
If you don't tell it, "I want this to span,"
it will automatically take that content,
however big that content is,
and put it into one cell, one by one.
So, the first one, the second one,
are each one by one, the third one, I'm saying,
grid column span two and so now it spans two columns.
The fourth one I've said grid column span two
so it spans two columns and I've said grid row span two
and it spans two rows, which is why it's bigger.
You'll also see in this diagram,
this is an illustration of what happens
when you're not using grid auto flow dense
when by default you end up with a sparse state,
which is grid auto flow or in this case grid auto flow rows
which means I want you to pour the content into
row by row by row.
By default, and also if you say grid auto flow row,
it's just gonna go row by row and it's gonna do it
in the sparse kind of way.
So, it's taken the first item and put it in the first cell.
The second item in the second cell.
The third item in the third cell
and it would put the fourth item in that fourth,
well, now the fifth, in the upper right hand corner
but number four doesn't fit into that little white space
in the corner, so, it's going to skip that space
and go down on the next row, make a new row,
start it on the next row, put number four,
then five, six, seven, eight, nine, 10, 11, right?
So, any time it can put, like, it takes number five
and it puts number five after number four.
It doesn't put it back up in that space,
so, it's just gonna go in the order
of the numbers in this case, but what this is
is the order in the HTML, so,
it follows the order in the HTML.
It puts each item into a space.
If there's not enough space, it just skips it
and puts it in the next space.
So, you can end up with these empty spaces.
If we apply grid auto flow dense,
the browser will actually
rearrange the order of the content.
It will start by using the source order in the HTML
but in this case, it puts number four
into the bigger space that it needs
and then it gets to number five and it says,
"Hmmm, you know number five will fit
"in that upper right hand corner,
"I'm just gonna go ahead and backfill it.
"I'm gonna take that number five
"and stick it up in that corner."
So, in that way, you end up with this dense layout
where things slightly rearrange themselves,
the order gets rearranged in order
to fill in as many gaps as possible.
Here's another example you can see
where I have a bunch of photographs
and I've put numbers on these photos
and you can see that they're not in fact
completely in the number order,
in the source order in the HTML.
They've rearranged themselves in order to make
this dense layout and you can see,
I'm using the same principle of the repeat auto fill
minmax syntax to change the number of columns
based on the size of the view port
and the photos rearrange themselves
and make themselves dense, into a dense layout.
It's an amazing way to do a kinda layout.
So, back to our Mondrian painting,
here's the code again, on the ul I've defined the grid
and then the list items, I've defined the size.
I've said grid auto flow dense
to get us that dense packing
and that's it, I didn't tell the list items where to go.
And, this is the result.
Those colour blocks will rearrange themselves
in order to create the densest layout that they can
and the number of columns changes
based on the amount of space that's available.
You can go to my website labs.jensimmons.com
and check it out, I have a couple different variations
I'm messing around with, what would it mean
to make it so that the size of the rectangle doesn't change?
What kind of code do I need in order
to maintain the aspect ratio of each one of those blocks?
I'm still experimenting trying to see what is it
that I could do to most authentically represent
this Mondrian painting and not because I care
about this Mondrian painting (chuckles)
but because it's an opportunity to really learn something
about grid, I learn a lot from doing this experiments.
Even though, they're completely unpractical, impractical,
they're still interesting and I learn things
about grid that I find very surprising.
I think this is my favourite one.
This diamond Mondrian where I'm using clip path
to clip the rest of the painting
and I think about Pete Mondrian
and all the many, many, many paintings
that he did in order to experiment
with what does it feel like, what does it look like
to have different kinds of lines
and different kinds of shapes
and different blocks of colour?
Here we are using a computer to explore
some of the same questions and get
many, many, many variations very, very, very quickly.
So, I hope you enjoy, check it out.
Dig into the code yourself and see how it is
you might use these kinds of principles
in a situation that's much more practical.