STOP The CSS Grid Confusion - 2 Ways to GRID!

today I'm gonna help end the confusion of structuring your layouts with the CSS grid and I'm show you multiple ways to do it everybody what's up Gary Simon here so today we're going to take a look at the CSS grid I messed with it a few times on this channel but really I wanted to talk about a specific topic and that means setting up the actual layouts and the rows and the columns I in using two different methods for doing so and that is implicit and explicit so I'm going to switch over here and I I'm going to walk you through shortly once the actual real tutorial begins I'm gonna walk you through creating this layout and how to look at it in terms of rows and columns and grid areas and naming them in grid lines and all that good stuff so as always make sure to subscribe if you haven't yet and let's get it started let's take a minute to talk about the sponsor this video dot online domain extension we all need a platform to help showcase our creative work in the very best light the thing about being a designer or developer is that you need to make sure you get the details right and one of the ways you can do that is to build your portfolio on a dot online domain extension so if you're planning to build your own website you should definitely begin your search with dot online it's new it's trendy and you're likely to find the choice of your name on dot online go to WWE online or click on the link in the description below to get your dot online domain now okay so right here we have this layout that I created in Adobe XD and we're not going to fill in the contents of these blocks I you know with this type based content I really this is just to show you how to structure it using different CSS grid techniques so I just wanted to get rid of all this stuff just so we can see the blocks container and then also the borders here that are going to define the CSS grid and really when you think about it before we start to actually define these grid areas I you have to think of your layout in terms of columns and rows alright so we have three columns here and we have four rows and so we can see it like this completely getting ready to rid of the entire UI and just overlaying with the UI to see how it works as we could see for instance some of these I like this section this whole section will span one you'll spend two columns you know this first column in the second and then it also span two rows I write here the first and second and like this image over here will span three columns I and it's our job as front-end developers to define these areas I'm going to show you a couple approaches to different ways of doing that all right so this is that same I setup that we have going for the layout and when we're using the approach of explicit naming of a CSS grid columns and rows I the columns start up here and the first column this line right here is defined as being number 1 then 2 and then 3 and then 4 so we have three columns but we have four vertical lines here so they're named 1 2 3 or 4 same thing with I your rows this line up here is number 1 and 2 3 4 5 as we could see and that's still true we saw four rows but nonetheless we have five lines here so they're all named and we can use this as you'll see shortly in order to define these different grid blocks so if you're a little bit confused at this point don't worry I you'll you'll start to understand it there's also negative values which have certain purposes that you can use we're not going to use any negative values do you find our grid areas but they do have certain advantages in certain situations that you can use I'm not going to cover here I think that could be a different tutorials a little bit more of an ambience concept all right so I what we're gonna do I'm gonna minimize this we're gonna come back actually to this and this will start to make sense I in a little bit so what I'm gonna do is go over to our HTML we're gonna start creating the HTML necessary I based on the mock-up that we have all right so get rid of that all we see it's half happen here by the way just boilerplate HTML empty body tag we're referencing a main CSS we're gonna use a sass in here although we're not using any sass specific function so you can just have a CSS file if you wish and we'll get to this CSS after we create the necessary HTML elements that we want so when it comes to a grid I container you want to have an overall container that defines the grid itself so I'm just you sometimes that could be the body tag itself I'm gonna choose to create a grid container class here and what we'll do is inside I just start from top to bottom so if we bring back that element here I especially let me let me go back to my Adobe XD template really what I'm looking at this point when I'm trying to define the HTML elements which we're about to do I'm not looking at this one I'm not looking at these I that's for the CSS portion I'm looking at the blocks that we see here so really it's this section and it's it's this right here so we need context though so I'm bringing back the whole full high fidelity prototype what section is this well the HTML semantic element for this could possibly be main alright so we're gonna put for this block we're gonna call it main so coming back here we'll just say main and I'm just gonna say main I'm not putting any content inside of it the next section I don't know why my a var is not showing up for me the next section could be we can call this Nam so right when you're using the CSS grid the order of your HTML elements isn't all that important I in terms of like which comes first like header or whatever because we use the CSS grid to position those play these these elements on the grid container so what would be next its said to me reverting back and forth the next section would be like this right here then this then this then this and then this or here alright so we essentially have one two three four five six items that we need to place on that grid container so we can see them here one two three four five six all right so hopefully that makes sense at this point so we're gonna have a section I guess we'll call it a section we'll give this a class because we have two of them that are styled the same this will be Nam as in Nam Nam whatever and then this one will be yum and again going back to our template really quickly I want to lose people not that one we'll go back just show you here that's the Nam section this is the yum section we'll call this one diabetes get diabetes in one week with our candies are so good so we'll do that this will be another section this will be a header this is just going to be a div span of some sort alright so next up it'll be diabeetus all right next up after that will be the header and then finally I was going to use an image for this but I decided use CSS background property so I can use the the background position cover property for this so we're just going to call this class of candy div class candy alright and just leave it blank alright and that's it that's all we need to do at this point now we're gonna head to the CSS and so just to get the body stuff out of the way all right now we're going to target a grid container which is the parent I HTML element here so what we want to do is first display grid all right this in and of itself doesn't really do anything I in fact if I right click open with live server so we can see what's happening here so I will go ahead and check this out check it out in Firefox not Chrome and that's because Firefox here's the page I opened with a live server over there get the live server extension for a visual studio code by the way I mean simply just right click open with live server so go to the plugins I and install the live server I also have live sass compilation and so I'm using Firefox here specifically because I if you control shift I you get out the inspector and then it'll show you the grid that you currently have going on here now just because we have CSS are the display grid property we still we don't have enough to work off you can see these little tabs here if you turn on the display in line numbers you'll see how this works here in a second though so continuing on we want to think about I our we'll think about our columns first how many columns do we actually have so we have we don't have four columns remember we have three one two three all right and we also have to think about the spacing between them they're all almost the same size although this is like a little bit larger I'm going to use fraction units I for defining these so the first column will just call 1fr the second column slightly larger so we'll say that's like 1.2 and then this one will stay is like 1.5 all right so grid template columns will be one if our 1.2 fr in 1.5 fr and that's it you just separate these with spaces so the next up is grid template rows so going back to our mock-up here we'll see we have one two three four rows and you know keeping in mind the distance between or the size of each of these we could think about how to just set up those fraction units this parts pretty big so we'll choose one F R for the first one in relation to that we'll say the next one is like four times the size three and then two fr so let's save this and we're going to go back to our Firefox and now it's a little bit more structured out although it's still really screwed up but that's fine what we can see here if we display the the display line numbers we can see that we have up here they're kind of hard to see still in fact before I try to get to this let's define a little bit more CSS in this area for instance we'll say height is 100 viewport height margin to e/m just so we could push it away from the sides so we save that we'll go back there we go it's a little bit easier to read so we can see on the columns itself it says one two three and four that's the name of those grid column lines same thing with the rows one two three four and then all the way down here is five all right so it's set up just like my little mock-up that I had here same thing same concept so now let's go ahead and use these grid columns I lie our numbers and rows to define the areas of our layout so here's how this works the first one we'll tackle we'll just tackle the order right here so you don't have to but I'm just going to go from top to bottom so main what is main well main is this section in our mock-up so if I come back over here main is this whole section main main main and main and so what we ask ourselves when we're defining this next next set of properties great column start well it's it starts up one this column right here right and then grip call an end it starts on this one three so it starts at one and ends at three so we're gonna try those two CSS properties alright first so we target main and we say grid column start one grid column and is three alright now we define the columns here by the way I'm going to show you two other methods and shorthand methods for doing this this is a little bit I verbose as its referred to as we have to define the rows of this section as well so going back to our XD template it starts at row line 1 this line right here and it ends at row line 3 alright so it's almost the same thing except we change this to row alright now let's give it a background color just so that we can see the actual block pretty easily now if we go back to our template there we go we've down just to find it says main and here it's kind of hard to see but we can see this is a has been defined so if we show grid area names I'm not sure where this one is exactly showing up we'll say well it'll we'll see it in a second I think once we get all the other properties so I this is the main block alright so now let's I'm going to show you a shorter shorthand method for this what you could say instead of all of those we could say grid column so we omit the start and end we could just include it in the property now so the start is one alright right here the end is three so you put a slash a forward slash three so now we can get rid of these two properties and we'll see that we go back to our example still works same thing with row so grid row it's the same thing I so let's hit save come back there we go very good so now what we can do there's even a shorter method of defining these four values and that's just simply using grid - area so we could say it starts with one our grid row start that's the first column then it starts with grid column start so that would be this one right here this next one would be grid row end which is 3 and grid column end which is 3 so if I delete all these just get this a little bit more organized we'll see now it still works just the same freaking awesome right alright so now it's just a matter of doing that same process for all the other elements so if we come out here let's tackle Lee Nam one because that's the next one just looking at our template real quickly we have main main main main we have Nam now okay so we'll do not so Nam starts I we're gonna do the row first it starts on I let's see three four the row ends on four for the column it starts on one and ends at two alright so we are going to target section Nam and grid area ear here is three and then it starts on the column one and at the row four and ends at the column three so that's good it gets a load confusing I'm gonna show you what I think isn't even easier method than all this stuff afterwards so that's our section Nam that happens to have the color code so we can see it three three three three so now if I go back here to our example there we go I think actually I think that could be potentially off I this is probably supposed to be two right because we only want it looking at our mock-up and sometimes also happen our mock-up is just going for one two two for Nam so yeah we need to fix that my my reference code was wrong what am i doing so again this is the row and the column this should be two so now going back here we go awesome so you can see right here header is sitting and that's completely not the yum is actually showing up right here right now so that's the power of placing these items so let's do the UM section now so yum we're gonna go back to our little template here so um is right here so it starts on three and set for just the same as you Nam so those values going to be the same but it starts at two and it's at three in terms of the columns so three for the same two three we increase those I'm let's change the background color this is one was slightly different with - OH - OH - OH color code so now we go back there we go we got that one alright so next up after that is the diabeetus section which is under here so again this starts at one no it starts at four on the row front and then ends at five and then it starts at one here on the column front and ends at 3 all right hopefully this is making sense so far so section diabeetus let's just Caucasus so this here starts at four ends at 5 for the rows and then goes from one two three and let's see here oh this is diabeetus okay I have my colors mixed up I think this Nam is supposed to beat this color this is supposed to be three three three three three three there we go all right now let's check this back out hopefully it's working correctly there we go so notice how Nam or diabetes down here now now we have the header and then the image all right so the header portion is going to start at one because that's where a the row and then it ends at two and then the column is three and then ends at four alright so hopefully this is all clicking now again I think this personally an easier way that I like to use so header is no background colors just white so again it was one to two correct yep and then three to four all right so I think it was already in place anyhow which may happen sometimes but yeah there it is it's up here now we define the image which is a class of candy so copy this the grid area for that one final time we start on two for the row and ends at five so it's to five and then the column is three four so two five three four all right I so now let's also I'm gonna give it a background here I have a candy or I didn't have a candy let me open that up in my other folder here dry candy in there there you go okay so now if we save this and we go back there we go so now if I toggle all this stuff off you could then put all the rest of the content that you need to in those actual selectors in order to get this working so I'm going to show you a different way of setting all this stuff up so I'm going to go ahead and we're going to get rid of I the values that we currently have specified here we're gonna use different values coming up here in a bit so just get rid of all these alright so I want to show you one last time this section right here so what we can do is just give these names instead of having to refer to them so this would be implicit I'm instead of explicit where you specify the grid numbers of the column and row numbers this will be specifying these elements and defining these blocks by names all right so right now I just have the selectors or at HTML elements in here so we can see this is main main main main simply because if we go back to our design that's the block of this section right so we're going to basically type this all out in a CSS properly for property rather in this order so you'll see what I mean here in a second so we add a grid template areas property and then we it makes it easier to visualize this puts us on multiple lines here and we basically just type out that same thing so here's the first row okay in terms of columns so we have a main column a main column we'll call it and header you can give these whatever names you want I'm just choosing to name it based on that template that I have set up right here okay so that's main main header next row would be main main candy so we'll do that so main main candy what's up after that well we have our nom yum candy okay so nomnom candy and then finally we also have our footer footer candy okay so footer alright so we can space these out a little bit more to make it a little bit more easier to understand what's happening here it won't break the code or anything oh I should have done that there we go start with the other columns first alright and then we end it with a semicolon so this is it this is how we define our grid template areas you can see that the sections of our our layout are now named alright so now all we have to do is type in main here all right so that's the grid area it's gonna be associated with the blocks defined here so it's gonna take two columns and two rows and then we're also going to for nom just name that nom yum I diabetes I named foot her instead um header it's gonna be header up what is that why do I have multiple I okay well we can just um oh this one was supposed to be oh I screwed that up from the previous one candy there we go alright so candy that will be candy I think right yep and then grid area is header here okay so we save this we go back to our Firefox and guess what it still works so if I go out to our inspector alright and then we we do the grid overlay option and then it would display the named areas there we go so footer footer nom yum main main main main header candy candy candy hopefully now you have a pretty solid grasp of the different ways that you can structure your layouts using implicit and explicit CSS grid methods alright so hopefully you enjoyed that and now you have a much more solid understanding of how to use the CSS grid which has a good amount of support now to structure your layouts alright so as always make sure to subscribe and I'll see you guys soon goodbye

Channel: DesignCourse

Views: 144,432

Rating: 4.9459643 out of 5

Keywords: css grid, grid, css grid tutorial, css grid implicit, css grid explicit, implicit, explicit, css grid named, grid-template-columns, grid-areas, grid-area, grid-template-rows, grid-template-areas, css grid 2020

Id: YNB-JD7iPoQ

Length: 26min 9sec (1569 seconds)

Published: Wed Jan 15 2020