All right, guys, it's time to use what we've learned about CSS grid to create a masterpiece. 1
I want to introduce you to somebody who loves CSS grid probably more than anyone. 2
And that is Piet Mondrian. 3
He is a Dutch painter who has created masterpieces that you might have seen before. 4
And they look like this one composition number three with red, blue, yellow and black, which is not 5
a very creative name, but it is a beautiful painting, especially if you're really into grids, which 6
he is. 7
But also it seems like a lot of other people are, because this piece was auctioned off for a whopping 8
$50.6 million. 9
So I hope you're glad that you started this section and learn about CSS Grid too. 10
Now, I've created a graphic that breaks down all of the dimensions of each of the elements in this 11
grid. 12
And I've measured it everything up with a ruler so that we can create a realistic to-scale version of 13
this painting using CSS grid. 14
If you want to create a different painting because he's created lots of these compositions and you don't 15
want to use my measurements, that's totally cool as well. 16
You can simply Google Image Search: "Mondrian compositions" and if you look in the images tab, you'll 17
see a whole bunch of different ones that he created and you can pick one that you like. 18
There are ones which are super complicated and there are ones which are really, really simple. 19
But if you're doing it this way, then you'll probably have to judge by eye the sizes of the tracks, 20
for example, the rows and the columns. 21
But remember, this is a project, so it's totally up to you whether if you want to do the version that 22
I've measured up for you or do a completely separate one or do both, or make lots and lots of different 23
paintings, it's totally up to you. 24
Go ahead and download the starting files for the Mondrian Project, and if you take a look inside the 25
index.html, you'll see that I've added some of the hex codes for the colors in this image, and that 26
way you can actually get a more realistic version of the painting. 27
So everything should be pixel-perfect measured colors, 28
and this is what you would end up with if you followed all of the colors in here and the dimensions 29
in this 30
dimensions.png. 31
Using what you've learned about grid, either use my dimensions and colors to create this final goal 32
website, which you'll notice is actually even centered on screen. 33
So think about how you might do that. 34
Or you can pick one of the other paintings, any of his paintings, and use CSS grid to see if you can 35
figure out how to recreate it, 36
but in a website. 37
Pause the video now and give this project a go. 38
All right. 39
So the first thing you'll notice is that there's no HTML written for you and there's no CSS. 40
So you're going to have to write everything completely yourself. 41
If we take a look at our solution, you can see that we've created as many divs as there are squares 42
on the painting. 43
If I go ahead and Show Preview and I open this up as a website, you'll see this is our final solution 44
code masterpiece, which I actually think looks really, really pleasant. 45
I may just print out a copy and put it on my wall because it is really beautiful. 46
If we look at this, there's one, two, three, four, five, six, seven, eight, nine divs in total. 47
And that's exactly how many I've added into the CSS grid container. 48
Now, because some of them are different colors, I've added some classes onto them, but most of the 49
layout actually occurs in the container class. 50
I specified a height and width according to the dimensions in the dimensions image and then set it to 51
display grid. 52
Now I gave the whole thing a background color because remember I said we can't actually change the color 53
of the lines, but we can create a gap so that the background actually shows up. 54
That's a little trick that I figured out. 55
There's probably other ways of doing this, but hopefully you've seen that hint from me, 56
and if you didn't, maybe you've worked it out yourself. 57
Next, I created the columns and the rows and specified fixed sizes because these dimensions are super 58
crazy 59
and basically I looked at all of the different columns. 60
So this is column Number one's width. 61
This is column Number 2, Number 3 and Number 4, four columns in total, because these are 62
actually going to be two different items. 63
So I had to split this into two columns. 64
And this spans two columns and this spans three columns. 65
That's how I figured it out. Row-wise, 66
we've got one row here, another one here, another one here, and finally the last one here. 67
So four rows and four columns. 68
And then I specified a gap of 9px, which will show up as the black lines. 69
And then I gave everything by default, the background color of the white and each individual item, 70
if they were colored differently, I would give them the colors that they needed. Based on the positioning 71
of some of these, 72
for example, this big white block actually needs to span three columns, 73
so these 3 columns and I use the grid-column property to create that look. 74
And then the second white one, spans 2rows vertically because we have these 4 rows. Taking up these 75
two is a grid-row: span 2 job. For the third white cube, 76
I decided to use a grid area because it seemed easier to define, but you might have used something 77
else. 78
And the rest of the solution code should be pretty straightforward. 79
Now hopefully you managed to achieve this. 80
This involved a little bit of remembering how we size our grid tracks, how we lay out and position 81
our items in our grid container, 82
and finally, how to center an item inside the middle of the screen using Flexbox. 83
Hopefully you managed to figure out all of these things. 84
If not, be sure to review the relevant pieces of content in this section. 85
And now you should know how to use Flexbox, how to use grid and how to use them together in order to 86
create beautiful masterpieces, but also complex web layouts. 87
So hope you had fun in this section and I'll see you in the next one.