Learn CSS Subgrid in 14 minutes

imagine you had a designer bring to you a design like this where each box had the exact same filler content we see all of these boxes have the exact same paragraph and after you're done building the layout you replace the filler content with the actual content that goes inside of these boxes and then of course this happens with the content inside each box now different you hear back from the design team complaining that the images are all supposed to line up with each other this layout was built with CSS grid and when you add a display of grid to a wrapper only the direct children become grid items and can then be placed on the grid you created the children of these items are not part of the grid and instead they display a normal flow which makes it difficult for elements inside of each item to line up with each other instead of normal flow you could also make each item its own grid by giving all of them a display of grid when your grid items are also grids these are called nested grids these grids however are independent of the parent grid and therefore they all have their own rows and columns which again makes it difficult for elements inside of each item to line up with each other however in September of 2023 subgrid a new CSS feature gained official support across all of the major browsers allowing grid items with their own grid to inherit the rows and columns from the parent grid this is very powerful because now looking at our design we see nothing is aligned and nothing is aligned because each one of our items has its own set of independent rows and columns but after using subgrid on our items instead of each one of them having their own independent set of rows and columns with subgrid they all now share the same rows and columns because they're all inheriting them from the parent grid and we see with each item now sharing the rows and Columns of the parent grid everything is perfectly aligned let's actually rebuild this entire layout to better learn how to use subgrid all I have is an index at HTML with an empty body element a styles.css file that I'm already importing in the head of my HTML and an images folder with one random image inside of it in my index. HTML inside my empty body element I want to create a grid wrapper with some boxes inside of it so I'll add a div with a class called wrapper and inside of it I'll add a div and I'll give it a class called box our box needs a heading a paragraph and an image so I'll add an H2 element that displays hello [Music] world I'll add a paragraph that displays some filler text and finally I'll add an image tag for the source attribute I'll add the route to our image the route to it is/ images SL image. JPEG and for the alt attribute I'll just say yellow flowers this is all we need for one box however I want four boxes so I'll copy my div with the class of box and I'll paste it three more times I'll head over to my styles.css and we see I already have three rule sets defined inside the first I'm resetting the Box sizing on all elements on the second I'm resizing the margin on all elements and on the third rule set I'm resetting the default font family to system UI these styles are just CSS resets and they have nothing to do with subgrid I'll open my live server vs code extension and we see all our elements are just stacked up on top of one another you'll also notice that my images are so big that they're overflowing creating a horizontal scroll bar to fix this I'll actually add a fourth CSS reset on image elements so back in my CSS I'll select the image element and I'll give it a Max width of 100% and a display of block when I save and look at my life server we see the horizontal scroll bar bar is gone and our images are fitting within the viewport another thing that's bothering me is looking at our elements we see they're all touching the edges of the viewport to fix this we need to add gutters to add gutters I'll go back to my CSS and on my body element I'll give it a width of 90% and a margin inline of Auto when I save and look at my life server we see this added gutters on both ends and now our page looks a lot better we're now ready to create our grid in my CSS I'll select our parent div by its class name of wrapper and I'll give it a display of grid a grid template Columns of repeat for one FR and I'll add a gap of one ram and I'll also add a margin top of five Ram just to add some space above our wrapper when I save and look at my live server we see our items were automatically moved inside our grid and to better see our grid I'll open my developer tools I'll find my wrapper and besides it I'll click on this little grid button when I do we see the Chrome def tools visually draws our grid as an overlay and this makes understanding our grid much easier now back in my CSS I'll select our Boxes by their class name of box and I'll give them a border of one pixel solid # CCC a border radius of six pixels a padding of two RAM and a text line of Center when I save and look at my life server we see this looks a lot better looking at our boxes everything is perfectly aligned and of course everything is perfectly aligned because each box has the same content however this is unrealistic so I'll head over to my index.html and on my first box I'll make the paragraph smaller then on my second box I'll leave the paragraph As is on my third box I'll make the paragraph slightly smaller and finally on my last box I'll make the paragraph much much smaller when I save and look at my live server we see Chrome changed the color of the overlay Chrome does this whenever you make a change to your HTML and actually on my def tools I'll head over to the layout panel under grid overlay I can change the color of the overlay to whatever I want by clicking on this little box I'll keep it as is because it doesn't matter anyways looking at our layout we see nothing is aligned and nothing is aligned because now the content inside each box is different and the reason this is a problem is because when you add a display of grid to a wrapper only the direct children of that wrapper becomes grid items the children of these items are not part of the grid and instead they display a normal flow so we created a grid on our wrapper inside our wrapper we added four boxes these four boxes are direct Children of the rapper and therefore our boxes became grid items however the elements inside our boxes are not direct Children of the wrapper and as a result they're not part of the grid they're not grid items so with the elements inside our boxes not part of the grid they're instead displaying a normal flow which makes it difficult for elements inside each box to line up with each other this is a common problem when using grid to fix this you would usually need to hack your way into a solution with HTML nesting and maybe flexbox however now we have a built-in solution called subgrid I'll head over to my CSS and to use subgrid we need to define a display of grid on our grid items our grid items are our boxes and our boxes are grid items because they are direct Children of the rapper however to use subgrid we actually need to give our grid items their own grid so on our box rule set I'll add a display of grid to give them their own grid now as it is our four boxes now have their own independent grids with their own independent rows and columns we can see this by going to our live server and on my developer tools I'll find my boxes and click on the little grid button besides each box we see we gave each box its own grid however they're all independent from each other and none of their rows or columns align with each other this is not what we want we need to tell the display of grid that instead of creating a new grid with independent rows and columns for each box it needs to instead be part of the parent grid this is exactly what subgrid does and subgrid is actually a value given to the grid template rows and grid template columns property so I'll add the grid template rows property and I'll set it to sub grid when I save and look at my life server we see this broke the layout of our Boxes by the way looking at our def tools besides our boxes we still see the grid buttons despite the fact that we're now using sub grid this is happening because we need to reload the page and when I do we see now besides our boxes is a subg grid button they're all already toggled on so I won't touch it the reason adding a grid template rows of sub grid broke the layout is because when you use subgrid it doesn't create the rows or columns implicitly in my CSS we see we never def finded a grid template rolls property on our wrapper and then we never told our boxes how many of these rows to occupy we need to explicitly Define our tracks when using subgrid because it doesn't do so implicitly so on my wrapper I'll add a grid template rolls property and because each box has three elements I'll set it to Auto auto auto then in my Box's R set I'll add the grid row property and I'll set it to one sl4 now that we're being EXP explicit when I save and look at my live server we see this fixed our boxes and because of subgrid making sure our boxes are inheriting the rows and columns from the parent grid everything is perfectly aligned I'll close my developer tools and we see this looks perfect now back in my CSS on my wrapper rule set I can actually remove the grid template rows of Auto auto auto because this is redundant when you don't Define the grid template RS proper property of Auto yourself the browser defines it by default for you and it knows how many Autos to add based on how many elements are inside your grid since we're using sub grid on our box and we're telling it how many rows to occupy the browser automatically knows how many Autos to Define on the grid template rolls property making it completely redundant to Define ourselves with it removed we see on my live server everything still works perfectly fine the last thing I want to show you is how subgrid behaves when you use the famous autofit hack that automatically makes your grid responsive without any media ques so back in my CSS on my wrapper on the grid template columns property instead of a repeat 4 1fr I'll replace four with autofit and I'll replace 1fr with the min max function I'll set the minimum to 350 pixels and the maximum to 1fr now I'll head over to my live server I'll open the developer tools and I'll toggle on the device toolbar on the bottom left corner with it toggled on I can resize my page and with our autofit CSS hack you would expect our grid to be automatically responsive however when I resize the page we see it's not working and our grid is not being responsive to fix this all we need to do is in my CSS instead of explicitly defining the rows our boxes occupy like this we can instead be more implicit by saying span tree and now when I save and try resizing my browser we see this fixed our problem and our grid including our subgrid behaves as intended and is responsive this was everything you needed to know about subgrid and to quickly recap what subgrid allows you to do is make nested grids inherit the rows and columns from the parent grid and when each and every grid item inherits its rows and columns from the parent grid they all get to share the same rows and columns allowing in this case for perfect alignment if you enjoyed this video make sure you like And subscribe thanks for watching

Channel: Slaying The Dragon

Views: 62,212

Keywords: CSS, subgrid, grid, css grid, learn css grid, learn css subgrid, learn subgrid, align grid

Id: Yl8hg2FG20Q

Length: 14min 19sec (859 seconds)

Published: Sat May 04 2024