Let's move on to the project grid.
Something that we see a lot of in websites, whether it's an image gallery or a list of your portfolio
projects, grid systems are very important and very common.
And as we know, we learned the perfect way to create a grid success grid.
Right.
So let's see how this would look like and my ideal implementation.
First, I want to go to the e-mail page.
And now let's make this a little bit bigger.
In our Project Grid div, I know I want to use CSFs Grid, so I'm going to create a wrapper around this
project grid.
So I'm going to have a div.
And this debate will have a class of some properties that will access to you and just to keep things
blue the way they are.
I'm going to give it that zone blue class that we have below, but we're going to make it access grid.
So I'm going to just say grid.
And we can just remove the project grid.
And in here, add a couple of sample little projects, if you remember in our solution file, I left
for you a couple of images that you can just add.
Like this, so that we have some sort of a project grid.
I'm not going to bore you with me typing all that out, because that's something that we've done before,
just going to copy and paste a diff here with Box Zohn boxes, a class that we haven't added yet.
But we're going to create these are going to be the great items.
We have zone, which, again, something that we've already defined before, and our images, that's
it.
So if I save this and refresh.
And let's refresh again, all right, this is absolutely hideous.
Does not look pretty at all, but at least we have the images provided, but no employer is going to
be impressed if they see this right.
So let's actually make this into a grid system.
If we go back to the style to let's add our.
Grid here.
And obviously, as the name suggests, when it comes to grades, success grades is the way to go and
there's many ways that we can lay things out.
And it's something that we've already talked about in our sixth grade videos.
So we're going to keep things simple.
First is, we want to actually say, hey, we're going to use the script.
So we're going to use the grid wrapper class that we created, which was this div that wraps all our
projects.
And we'll say display grid, we'll say that we want the grid gap.
To be 20 pixels.
And then finally, the our favorite property, that is grid template columns.
And so everything is responsive, we'll say repeat.
And we'll say that the min max.
We'll be, let's say, three hundred and fifty pixels, so that is the minimum and the maximum will
be one F.R. so that it fills the entire page when it's really, really small.
So that if I say this and refresh.
Right, that still looks pretty hideous, doesn't it?
And that's because our images are, well, they're pretty massive and you see that they're also not
all the same size or they have different padding.
So the way to just fix that quickly and something that you'll see a lot with images.
Is to give them a width of one hundred percent.
In our case that we can just say box, because, remember, each div has a box class that we haven't
really said anything about and then an image.
So using our success selector knowledge, I can just say all children of box that are images.
To be one hundred percent save and refresh.
Right, that's perfect.
Now you see that each image has one hundred percent with that is it fills in the entire piece of the
card.
And if I make this bigger and smaller, you see that it adjusts.
Very, very cool, but still pretty ugly.
But we have the sixth grade working, as you can see, as soon as it's less than 350 pixels.
It changes the grid system.
So next, we want to work on the individual cards, that is, we want to have our box.
And here, we don't really need to add any extra grid properties.
I mean, we could if we want, but I like the way things look.
I like everything being symmetrical.
I want to all the items in the grid to be the same.
So in here, we can just add our simple access properties like, let's say background color.
And we'll just give it a color of, let's say for four for so that we have this dark color and we definitely
don't want these images to be this big.
So we'll give it a padding of one hundred and thirty pixels and maybe some margin as well of 20 pixels
by save and refresh.
That's a lot better and remember, because we said that the width of the image is one hundred percent,
it's going to try and fill the entire box.
But because the box now has padding of one 30, both of the top, the bottom and to the left and right,
the width is now just this part.
So that looks a lot better.
And if we look over here, we now have a completely.
Responsive.
Grid system, how cool is that and how simple was that using CSFs Grid?
Luckily for us, the last thing we need to do is this footer.
And because the footer is at the very bottom, it just going to stay at the very bottom.
The only thing that we might want to do is to make sure that the text is centered.
So in our case, we can just say footer.
And as you guessed, yes, it's text line, our best friend center, if I refresh and make sure that
I spell properly, if I save and refresh.
Well, that's not going to work because we should change our footer, which is d'Hiv, to more of a
semantic HTML tag of footer.
Now, if I save and refresh, this is in the center, it looks great.
Let's say zero to mastery because our layout is looking really nice.
And there you have it, that wasn't that bad, was it?
I mean, sure, the first time around, that's kind of difficult, but the principles that I've showed
you here can be transferred to a lot of websites.
I mean, this looks pretty ugly.
You're not going to want to visit a website that looks like this.
But when it comes to layout, everything is responsive and nice.
Right.
And you can imagine yourself expanding on this and building a beautiful website.
I wanted to show you this layout system, because this is what I would use if I was building a website,
I would start off with the HTML and create the layout that is responsive, because after this, all
I really need to do is add text images and colors, maybe some styles to make it pretty so that you
can turn something like this that doesn't look good.
But has the layout implemented into something like this, which I mean doesn't look that great yet.
But in the next video, I want to show you how, because we have the layout setup, we can convert our
base layout project into something like this and less than five minutes.
So let's do that in the next video.