Auto-generated transcript all right welcome back boys um today's video is going to be very short i just want to cover a very simple concept here don't use more space than necessary so let me explain i have i have a login form over here this is very basic just a basic example to illustrate what i mean and the main thing you want to focus on is you don't want to use too much space here so a lot of designers or a lot of developers, what they do is they try to fill up the screen, right? And sometimes you just don't have enough content to fill up the screen, right? Sometimes you just can't fill up the screen no matter what you do. But they try to fill up the screen and they kind of just force it, force the content that they do have to just stretch until it fills up the screen. And that's bad. That's bad practice, all right? Every single element, every single component on your page has a best width an ideal width right an ideal width where it looks best so don't ruin that pick the ideal width and just stick with it and do not feel forced to fill up the screen with content right like as you can see over here this is a very simple login form it's it's constrained to about this much width and as for the rest of the page i'm not filling it with any kind of content right in in a production setting you could probably have like a navigation bar up here on the top but that's about it right maybe a footer and yeah that's it as for the rest of the page you would just fill it with this login form right so that's gonna be the main topic for this video don't use more space than necessary and don't feel forced to fill up the page with content if you want to see an example of what I mean over here then let me show you what I'm going to do is I'm going to let this remove the max width from this login card and just let it stretch to the page size right so let me show you what that looks like so here you can see that I'm constraining it to a max width of 576 pixels if I just remove this right and then I save it see how terrible that looks it's hideous right because it's taking up so much space We don't need it to take this much space, right? So this just looks horrible, right? So let me switch back to what we had before. Let me constrain it to a max width of 576 pixels. Save that and then go back. And now it looks great, right? So what you want to do is you want to use the ideal width where the component that you're using looks best, right? So every component, again, every component has a width where it looks best. So pick that and just stick with it. And really if there no other content for you to fill up the page then that fine Just center the component just like I have done over here and just use that right it completely fine to have like an empty background an empty page like that you don't need to design so much and just fill the page with noise like as long as you have your main content on the page you don't need to fill up the rest of the page with extra noise and whatever right you don't need to over design anything so yeah that's the main thing i want to teach you today and on a related note i want to show you another example we're going to talk about css grids now all right so let me comment out this example and uncomment this one a dark sidebar and let's go back so you may have seen this um this design in a previous video of mine i made video like a couple videos back on how to create dark mode interfaces which if you're interested in that and go check that out as well but basically this is a like a to-do list app over here and all I want to show you is the sidebar over here so you can see this is a pretty good design in terms of spacing and layout right like I would I would say so myself this is a pretty good design in terms of spacing and layout you can see that the sidebar here doesn't take up too much space, right? And the main content area takes up as much space as it can. That's how you want to do these things. That's exactly how you want to design a page like this. And the reason it works so well is because I'm, if I go in here, I'm constraining the sidebar to a width of 256 pixels. Not max width, but just the exact width, alright? So the sidebar will always be 256 pixels over here now the problem with grid system let's recap how grids work in css a grid system if you're using like a 12 column grid then it's going to divide your screen into equal columns like 12 columns each of 8.33 percent width right or whatever the math is i don't know but around 8 percent per per column right now this can look fine on your screen but there's always larger and larger screens and smaller screens right and on those screens that 8% can be really small or really like large right. So what I'm going to do here is I'm going to show you how to use a grid system over here and why it's such a bad practice alright. So let me just decrease my screen size over here first by just dragging this window over here. Now you can see it still looks fine right. still looks pretty good but if I go over here and I change this from that change the whole layout from flex to grid and I also give it let say four columns right I give it four columns I remove this width from the sidebar and just give it a column of one all right so we have four total columns and the sidebar will take up one column that means that the sidebar is going to take up 25 percent of the screen that doesn't sound like a lot right but let me show you what happens and over here instead of grow I'm going to have called span 3 right There we go, which means that the main content area is going to take up 75% of the screen alright, so 25% of the screen goes to the sidebar and 75% goes to the main area and Again, this doesn't sound like a lot right and you can see over here. It looks pretty decent right like I mean I mean yeah, this looks great right the spacing looks fine. The layout looks fine. There's no real apparent issues over here, right? It seems fine that the sidebar should take up 25% of the screen It doesn't sound like a lot right the content still gets 75% of the screen which sounds like a lot which you know It makes sense right, but if I just full screen this See that see how large the sidebar gets that's the problem over here That's the problem with grid systems if you're designing your page on your own normal sized screen it's it might look good on your screen right but on a larger screen is just going to look horrible right because because grid systems are based on relative width right again in a four column grid like this one 25% of the screen is going to become very large on large screens obviously right so again don't use more space than necessary and the way to fix this is to only use the ideal width and no more and no less alright so I'll just undo all of these changes save back and there we go now it looks fine right so in this example the sidebar doesn't really need to take up any more space than let's say 256 pixels that I have set over here right the sidebar doesn't need any more space than this so I make sure to just set it to that width no more no less right and then no matter what the screen size is even if I have the largest screen in the world right even if I have NASA screen it doesn't matter right because the sidebar is only going to be 256 pixels exactly the width where it looks best and then the content can take up the main area over here right and even in the content area you can see that I'm not really stretching this tasks element over here right this entire tasks list over here I'm not stretching it to tip to fill up the entire screen right I centering it I giving it the exact amount of width that it needs in order to look in order to look good and then as for all of this empty background area I don do anything over there I just keep it empty right And it still looks amazing, right? So don't stretch your elements needlessly. Use the best width for them, alright? Use the ideal width where they look best. And do not feel the need to fill up the screen with extra noise or stretch elements forcefully to fill up the screen, alright? You don't need to do any of those things. It's perfectly fine to have empty area like this, all right? In fact, it even looks clean, right? It looks like a clean, minimalist, like well-designed page even then, right? You don't need to fill it with extra noise. That's what I'm trying to teach you. So for all of your elements in your design, use the appropriate amount of width. Don't stretch them forcefully. Don't feel forced to fill up the screen with extra noise just to have some content lying around. be perfectly okay with using a lot of white space using a lot of like empty areas like this in the background it's perfectly fine to do that and be very very careful with using grid systems all right because when you're designing when you're designing a page using a grid system issues like this sidebar that i showed you over here they don't really become apparent on your screen right but on a larger screen they become really fucking horrible right so be very very careful with how you use grid systems and be just be vigilant about where you're using grid systems and just like just if an element if an element has an appropriate width right where you don't want it to go past a certain amount of width then just set a max width on it right just set a width or a max width and just don't let it get any bigger than that right you don't have to use grids to style everything right you don't have to use grids to build your entire layout right you can just use width and max width all right like just remember that grids are based on like css grid it's based on relative width right so on larger screens it's going to look really really large all right so just be careful of that issues like that don't really become apparent on your regular screen sizes but on a larger screen like i just showed you here it can get weird right so just be careful with that. Use the appropriate amount of space that each element needs, no more than that. Don't feel forced to fill up the screen and be very careful with using CSS grid. That is all. That is my recap of everything we discussed in this video. Yeah, that's the end of the video guys. Like, subscribe, do all of those things, drive up the algorithm for me and all that and thank you for watching. And lastly, if you want to work with me or something, then my website will be link below as always so go send me a message say hi whatever and thank you so much for watching bye bye i love you all