Simplify your CSS with these 3 grid layout solutions

Key Takeaways

CSS grid is often seen as this tool to create these big pieces of layouts with different pieces that can move around really easily and stuff like that and it is fantastic for that but there are very simple layout solutions that you can use it for as well so today we're going to be looking at three very awesome use cases for grid that are very simple and easy to set up and so let's jump right into it with this first example which is I will admit it's a bit of a bigger layout piece but it's something that I often see people coming up with more complex solutions for which is when we have a really short page and you need to have the footer stuck to the bottom I've seen people try all sorts of stuff for this and get frustrated by it so if we have the head the main and the footer right there and we want the footer to be on the bottom we could do this directly on the body but I know some people don't like putting grid directly on there so one solution for that is to have a div that just wraps all of the content in there and then you can choose that class could also put this directly on the body whatever approach you prefer now on the main layout I've given it a border right now just so we can visualize where it is on the page and as we can see it doesn't actually take up the full space that we need it to if we want to get that footer on the bottom one solution for that is to give a Min height of 100 VH people will say that VH is problematic which it can be on mobile so one alternative is to use dvh instead which is a newer unit that is a dynamic viewport height that will adjust automatically for those UI elements that can slide in and out on mobile because browser support isn't perfect for that one fallback is to do this where you'd have it with VH and dvh so browsers that don't understand dvh can use the VH browsers that do understand evh will use that instead the next step is to put a display grid on there and as you can see it now stretches all the elements out to fill up all the available space but it does leave us with the problem of the top of our header and footer being way too big we can solve this problem by using grid template rows Auto 1fr auto so the top row and the bottom row will match the height of the header end of our footer and the middle row gets 1fr to use up the rest of the available space and push that footer all the way to the bottom we can turn off our border now and we can see that it's working in this situation and if ever you're on a page that has a lot of content it's still going to work perfectly fine because we used a Min height rather than setting it at a fixed height another great use case for grid is stacking content so in my primary header I have this image here and we also have this H1 right here and I want to Stack these on top of each other and you might be thinking Kevin you could use a background image for that and you would be completely right but we'll look at one of the benefits of using grid to create Stacks like this the first thing we're going to do is take that primary header give it that display of grid and then give it a single grid template area I can then select all the direct children and place them on that grid area and as you can see the text is now on top of the image one problem is my text is sort of stuck at the top but we can fix that nice and easily with a place items Center one of the benefits of doing this is the image is actually in the markup meaning we can give it alt text which helps with accessibility and it also opens up more layout possibilities if we want to change things at different screen sizes for example if we remove our grid template areas and then replace the grid area here with a grid template columns then we can replace the grid area with a grid row and grid column that are just spanning the full size this has the exact same effect that we had before so you're probably asking what's the point by setting things up this way it's a little bit easier to set up a media query to change our layout at larger screen sizes so now it's small screen sizes it's stacked and then at larger screen sizes we can break into a two column layout now switching over to a new layout one place that I do see people using grid 4 regularly is on forms because it's a perfect use case for them but we can use grid within grid which is something that I don't see people doing as often as I think they could and one thing that's important here is in my form you can see I have labels and I have inputs and each one of those is wrapped inside of a form group jumping over to the CSS we can see the simple grid that I have set up for the Forum right now and just using my Dev tools I can turn on the visualizer for the grid and we can see just it's nice and simple to go from a 1 and 2 column grid and make things responsive but then inside each one of these cells we want to take advantage of the space that's there but then if we turn our attention inside those to the form groups we can use grid within there instead of the regular solution that I see because often what people do is on the label use a display block to get the consistency of having the label on the top and having the input on the bottom but we also have the problem now of the input not taking up all of the available space to it now we can solve that problem by using a width 100 and then it will fill up all the available space and of course we could add the text area at the bottom to have the same Solution on the bottom and then this does work well when we go between our different sizes but then we also have to worry about maybe the space in between and adding a margin somewhere and maybe there's other tweaks that you want to make as well so in my opinion it's very nice to delete all of that and then take advantage of the fact that we have a form group set up by putting a display grid on the form group we can do this where we get the exact same result we had before but we don't have to worry about the fact that we have different elements inside of them you can see my text area stretch the full width as well as my inputs and anything else that's in there would and the items are stacking on top of each other it's still nice and responsive and this is just happening because of the way that grid works on the children where they're now stretching to fill up that entire space the form group is taking up the whole cell and now the items inside are taking up all of the space within the form group now let's turn off that grid and we can turn on this visualizer for the one that's inside there and the reason I'm doing that is because now we can come in and add a gap to add spacing in between the elements if we need to add that space there instead of worrying about where we might be placing our margins or doing other things and of course it would open up the possibility of creating columns Within These if ever you needed to so using grid for these little micro layouts just to add a little bit of spacing to me is really handy and since we are looking at this form which is using a grid we might as well make it look a little bit better so in the HTML if we look at our form group that has our text area inside of it we can go and have something like a form group full width class added on there that we can then use to our advantage so now if I take a look at that that form group is taking up the entire thing because we're starting at grid line number one and going all the way to the negative one we saw the solution before with our stacked layout as well and just in case you're wondering what those numbers are referring to we can see that we have a one here a 2 here and a three here but at the bottom those numbers are reversed and we actually count in reverse order so a 1 over negative one just means go from the start to the end of our grid and so from Big layouts to small little layouts grid is fantastic at a lot of things and we can come up with very nice elegant Simple Solutions that give us a lot of control over our layouts and why I love grid a lot but that does not mean that we should discount flexbox both layout tools are very useful in different use cases and if you have trouble knowing which one you should use in which use case I have covered that in a previous video that you can check out right here and with that I'd like to thank my enablers of Awesome on patreon Jan Johnny Michael Patrick Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome