As you can see right here, this is what we're looking for.

So we want the image to go from top to bottom and then to center horizontally and vertically the login component. So let's get started on that in this guide. I'm gonna switch to Visual Studio code here and I'm gonna create an auth SCSS file so if you go to main, let's go down to the bottom and we want to import auth, and then we need to, just like normal, create this file.

So I go into style, new file, auth.scss and so now that we have that I can save the main file close it and then we're going to add our styles to this auth.scss file. Now the only class that we have right now for the wrapper is this auth page wrapper and then it has a left column and a right column nested inside of that so let's start with that.

So we have this auth page wrapper class that we're selecting and as you can see on the final version this is a very good spot for CSS grid because we have two columns. We have one on the left, one on the right and we want them to be exactly split in the middle, so that is a perfect scenario for using CSS grid. So I'm going to create a grid container here and then for the grid template columns I wanna use 1fr and 1fr because remember that's what we do whenever we have the situation where you want to evenly split two columns.

Then let's also set a height here, so the height is, this is something that if you've never worked with calculations before this might be new to you but it's very helpful because of some of the margin and padding with like the navbar and some other components on the page. We do not want exactly 100% of the view height. Remember view height represents everything all the way down to the bottom, we also need to subtract out the height of the navbar so what we can do with CSS is say calc which is short for calculation so we wanna do calculation 100 view height minus, 84 pixels.

Now I did not make that number up or guess it. The height of the navbar including the padding and everything like that equals 84 pixels. So all we're saying is that we wanna take the empty space here, so I wanna take all the empty space and then I wanna subtract out the height of the navbar so that's all we need to do there. Let's hit save and come back and you can see that that worked perfectly, this image is going from top to bottom.

It's not fitting in perfectly yet, we'll fix that in a second, and then we now have the login component placeholder is on the right hand side. So our structure, our container is working perfectly.

Now let's add the styles for the left column. All we need to do is add a background-size of cover, you hit save, and now go look at it.

auth.scss

.left-column {
    background-size: cover;
}

Now you'll see that that shrinks the image so that it fits inside of that container.

Now for the right column, we want to make sure everything is centered horizontally and vertically and I think that that is a perfect situation for using flexbox. So I'm gonna say right column and this is gonna be display flex and then want to justify-content, center it, align-items, center those, and let's hit save.

auth.scss

.right-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

And now you can see that that is working perfectly. Now if you go back and look at the final version you'll see that there's one key difference. We have a slightly different background color here, as we do for the navbar, the navbar is perfectly white and then we have this kind of off-white here.

So let's go do the same thing if you open up your variables file you can see that we actually have something called offwhite which is kind of a little bit darker white. So what we can do in this right column is say background color and then dollar offwhite end it with a colon, hit save.

auth.scss

.right-column {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: $offwhite;
}

And now you can see that we have that nice almost gray but really just an off-white color here and now we're in a perfect situation for adding the login form. So great job you should now have a full file for our auth component.

Resources

• Source Code