Now what we're going to do in this guide specifically is set up the base architecture. Kind of like what we did when we were building out the navbar. So before we can actually implement the final solution, we need to decide on certain things such as are we gonna use flexbox or CSS Grid? How are we going to nest our columns? And different things like that.

So let's do that in this guide, we're not gonna see a large number of visual changes and the reason for that is gonna become evident and it's because these images are so big, they're gonna kinda be overwriting anything that we implement in this guide. And so later on in one of the next few lessons, we'll walk through how we can style the images and do it dynamically to give this really cool kind of fade in behavior and have them take up only the percent of the card we want them to take up.

So let's start off, let's first get rid of this text, that's gonna be something we're not gonna need anyway. So let's go to our home component and I'm gonna get rid of where it says homepage right here, I'm gonna hit save and then it still says welcome to my portfolio, we'll clean that up here in a little bit.

So the very first thing that I want to do because this guide is all about architecture, I want to create a container class. So this container class is gonna give us the ability to very quickly implement CSS Grid anytime that we need it and it's gonna be very abstract, it's only gonna have a couple of rules, But I think it makes sense to put this inside of the base file because we're gonna be using this container class quite a bit.

So I'm gonna say container and then I want this to be display grid and it's just gonna be a basic one. So we're not gonna get into how to have these three columns or anything like that yet, we'll do that here shortly. For right now, I just wanna set up my grid template columns to be 1fr.

base.scss

.container {
    display: grid;
    grid-template-columns: 1fr;
}

Then let's call this, and I'm gonna call it from the app component. So this is from our root component by default it says app is the className, let's get rid of that and let's put it all inside of a container.

So now if I hit save, everything is still working properly, this is simply an abstract type of container class that is going to now establish everything on the page as being a CSS Grid component. If you inspect this, you'll actually see if I come up to this container right here, you can see that this is display grid and if we're only dealing with a couple of divs like we are here, it means our navigation component is going to be the first element inside of that CSS Grid and then everything else below it's going to be the second one, so that's pretty basic.

So now that we have that, let's go into our portfolio container, let's close out those files, go into your portfolio-container.js and now let's see how we want to wrap this up. So if I come all the way down and actually look at our JSX code you can see that we have these portfolio items and these are rendered out and if we scroll up just a little bit you can see that those are iterating over and returning a single portfolio item component.

Well, I think this is a great spot right here to place a wrapper class. So I'm going to create a class here inside of a div, so I'll say div className and then I think it makes sense to just call this portfolio-items-wrapper, 'cause that's exactly what it is, hit save, and that's all we need to do right there.

Now let's go into the portfolio item component, and then here let's add a class of portfolio-item-wrapper just like that. Remember this is a different className. This was portfolio items, so it's plural, this one is portfolio-item-wrapper.

Now with that in place let's create a new import statement here and this is gonna be portfolio and then make sure you create the file. And I always create the file before saving, because if I save it right now this is going to throw an error because that file doesn't exist. So let me come and create a new file there called portfolio.scss, and now you can save that and it won't throw an error.

And now we have these two classNames. So I have portfolio-items-wrapper and inside of here, this is where we want those three columns. So anytime that we wanna have a layout like this, this is a perfect example of when to use CSS Grid. So this is going to be a grid container and then we're going to have three columns.

So I'll set up grid-template-columns, and then 1fr, 1fr, 1fr, which will give us that nice set of three columns that are all right next to each other and then any other post that we have, any other portfolio items will simply slide underneath that.

portfolio.scss

.portfolio-tiems-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

So now that we have that, there's only one other item I wanna do which is that portfolio-item-wrapper and I'm gonna nest that inside of the container and now I'm just gonna say position relative and that's not gonna change anything right now, but it is necessary to get what we're looking to do later on. So I'm just gonna place it here now so that that's done.

Now if you come back and hit refresh, right now you're still not gonna see anything. But when you hit refresh for a second, do you notice how you do see those three columns right before the image comes in and it blows everything out of proportion?

But we're actually getting what we're looking for and we can test this out right now if you'd like to see it. Let me close out portfolio items and if I wanna hide these thumb images, I can just delete them temporarily. Hit save and now when you hit refresh, you're going to see that we do have the type of grid that we're looking for.

Now it's still pretty ugly, 'cause we haven't added the cool images or the hover effects or anything like that, but we are getting the type of structure that we were looking for which is exactly what our goal was in this guide. So I'm gonna add those images back in, hit save, and we're back to having those gigantic images, but at least we know our structure is working.

So in the next guide, let's see what we can do to shrink those images and start adding them as background images for each one of the portfolio items.

Resources

• Source Code