So, we're gonna make room for all of our form elements, and then on the right-hand side, we're gonna have this sidebar that goes all the way down that will contain all of our portfolio items. So let's build that out in this guide. And everything we're gonna be doing right now is pretty much review, so I definitely recommend, if you have any interest in trying it yourself, pause the video, try to build out this layout.

You don't have to worry about the forms or even pulling in the portfolio items, just try to build a grid that is larger on the left-hand side, and then slightly smaller, or quite a bit smaller, on the right-hand side, and come back and you can see how I built it out.

I'm going to start here in Visual Studio Code in the portfolio manager. I'm going to add a class to this wrapper div, and so I'm gonna call it className is gonna be portfolio-manager-wrapper, and then this is gonna have two columns. So the very first column is going to be a div, and I will give it a className of left-column.

And then inside of there, I'll keep this h1 and then close off the div, and I can even, just to make sure we're looking at the right thing, I'll say Portfolio form, that's gonna go there. And then we're gonna do pretty much the same thing on the right column, except this is going to be called right-column, and it's gonna be the Portfolio sidebar, and that's all we need to do on the JSX side.

portfolio-manager.js

<div className="portfolio-manager-wrapper">
  <div className="left-column">
    <h1>Portfolio form....</h1>
  </div>

  <div className="right-column">
    <h1>Portfolio sidebar....</h1>
  </div>
</div>

Now let's open up our main.scss file and I'm going to create a portfolio manager dedicated-style file, so I'm gonna duplicate that line six and say portfolio-manager, and then before saving, I'm going to create that file. So inside of your style directory, click New File, portfolio-manager.scss, and then inside of here, we are gonna have a portfolio-manager-wrapper class, and you can also hit Save in your main file.

So portfolio-manager-wrapper, and this is going to be of display grid, with grid-template-columns of a three fractional unit, and then a one. So if you remember back to our discussion, and our course, really, on CSS grid, remember that when we say something is 3fr, this is going to be three times, or it's gonna take up the proportion of three, and this is gonna be one. So this is gonna be the normal size, but this is gonna be three times that, so that's how we're gonna get that much larger left-hand column.

And then from there, let's add some background colors. So we'll say left-column, and this is nested inside of the portfolio-manager-wrapper, and here we'll just say background-color, let's say that this one is that off white, and remember here because I'm using $offwhite, this is pulling from our variable file, and then let's create a right column, and for this one, let's pull in our charcoal color.

And we may change this later on, but for right now, this will at least give us a really nice distinction, and we'll be able to make sure that our grid's set up properly.

portfolio-manager.scss

.portfolio-manager-wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr;

  .left-column {
    background-color: $offwhite;
  }

  .right-column {
    background-color: $charcoal;
  }
}

So with all of that in place, let's go check this out. Open up Google Chrome, and you can see that that is giving us exactly what we're looking for.

So the reason why it's not going top-to-bottom is because we don't have any data in it. Right now we only have those h1's, and so, for right now this is fine, this is giving us our two-column grid. This portfolio form is gonna be all of the space we need for our form and our image uploaders, and then on the right-hand side, this is where our sidebar is going to go.

So, with all of this in place, in the next guide, we are going to start populating our sidebar with our actual portfolio items.

Resources

• Source Code