- 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.
