CSS Grid Course: Template areas

Key Takeaways

heyyyyyy in this screencast you're going to learn really cool feature of CSS grid called template areas which allows you to change an experiment with layouts much more easily than with the techniques you learned in the previous cost this feature is ideal for creating prototypes of layouts quickly we're using more or less the same example from the previous screencast our grid has 12 columns and 3 rows the columns are just as they were in the previous screencast however for the rows I've changed the second one from 200 pixels to Ottawa that means it'll take up whatever available space there is left in the height and combining that with setting the height of the grid container itself to a hundred percent this will result in the grid being responsive in the height as well as you can see if we make it taller the second row grows with the grid now we're still using the grid column property to adjust the position and size of the items what we rather want to do in this screencast is used something called grid area and to be able to do that we're going to have to give the container a grid template areas property and the syntax you're about to see now might seem a bit weird it'll be a visual representation of the grid and the way it works is that we'll create a string for each of the rows and in those strings we'll create a cell for each of the columns so let's add letter H 12 times in the first string we have to give it exactly 12 characters that has to match the amount of columns so we're not actually defining the columns or rows here we've already done that up here we're just naming them so that we can refer them using these names later on in the second row Ladd 1m and elevenses I thought in the third row rad twelve f's what you have here is a visual representation of how we want our grid to look like unless you might have understood the age M C and F refer to header menu content and footer so now let's remove the old way of positioning the items like that and build up the grid over again we'll give the header a grid area of age as you can see as a result the header takes up the entire top row just as we've defined here we'll give the menu a grid area of M content grid area see footer grid area of s as you can see our layout is just the way we want it to be and it's responsive now the reason this technique is brilliant for creating mock-ups is because now I wanna make the menu span all the way to the top like we did in the previous screencast we can just replace this edge here with an M and as you can see automatically the menu popped up to the top if you want to make it span all the way to the bottom let's do the same thing here as well and just as easy as that we have changed layouts without having to fiddle around with the values in the item classes you can also use dots which will result in blank cells like that there there there now we have this weird experimental layout where all the corners are blank now one thing you need to be aware of is that the areas will only be valid if they are rectangled try and manage this to an F so that the F footer goes like that and then up you can see it breaks the entire layout so you have to use rectangles as you understand this is a super simple way of experimenting with the layout so I'd recommend you to play around with these values here so that you make sure that you properly understand it and once you've done that you have finished the first section of this course so congratulations you now know quite a lot about CSS grid however there's still a lot of stuff to learn so in the next section I'm gonna teach you some more advanced stuff and we're gonna create even more responsive grids that'll be super cool so I'll see you there