YouTube Transcript:
COMM 672 3-13-25
Skip watching entire videos - get the full transcript, search for keywords, and copy with one click.
Share:
Video Transcript
right can you guys see my screen I can't see you guys so hold on all right can I get a thumbs up so we'll go ahead and um let's um let's download today's today's lab so we gets all set up so if you go into courses modules and we are on module seven wow already and you go to lab and S beginning let's go ahead and download the zip file okay and I'm going to put my zip file into my desktop and then I'm going to start a visual studio code so here I have Visual Studio code I'm going to go to file open folder and uh desktop I have it on my desktop so have my lab beginning and go ahead and open and so I have this all set up so can I get a thumbs up when you guys are all set up and ready to go see one two couple more all right great okay all right so today we are going to learn about uh the CSS grid layout this is different from the grid when we talk about design and stuff this is the actual CSS grid display grid um this is our agenda for today uh we're going to learn the grid terminology uh grid containers and grid items and then we're start creating our first CSS grid and then we're going to go through a couple different uh the grid properties to discuss you know how to work in the grid and stuff so um if you guys liked Flex box Flex box as you might remember is more onedimensional right so in Flex box we either had the flex direction of row or Flex direction of column um but in the grid uh the grid is a two-dimensional layout so now we got to be able to do both um we do both columns and we do rows so CSS always had to has been used to lay out web pages but it's always been not really good at it as you know we learned using floats and stuff um at first table were used uh so you see those really old school um but you know table's not responsive um and it was very limited and then we used floats like what we did in this class floats with the you know absolute positioning relative positioning um and also inline block block um all of these methods they're kind of like hacks in a way um and it left out a lot of important functionality so grid is the first CSS module created specifically to solve a lot of the layout problems um developers have been hacking their way around for years so the Grid it's a two-dimensional grid based layout system that aims to do nothing less than completely change the way we design grid based user interfaces is two-dimensional which means in the grid itself we can handle both the columns and the rows um kind of like a HTML table uh but you'll find it way more flexible than a HTML table um you work with grid layout by applying CSS rules to both a parent element which becomes the grid container and to the element's children which become grid items so kind of like how we talked about Flex right when we um set a container to flex um then that container you know becomes the flex f parent Flex container and then you have the flex items this the same thing for grid we have a grid container which becomes the grid items so let's do some basic terminology so when we set the parent container to Grid or inline grid um the that becomes uh the grid container so as you can see here with the yellow line we have the grid container um the direct Children of the grid container um it's called grid items uh the horizontal lines that divide the grid and separate the columns and rows are um are are called grid lines um so you have your horizontal lines and then you have your vertical lines and just not this this is a 3X two grid however with the lines it has one more um than the actual number of column rows and this is how you would number them so this is position one starting on the left hand side then two then three then four for three col uh three column grid uh for the two row grid then you have starting from top to bottom and that is a typo right there that should be three let me change it okay so you have the and then going from Top top to bottom put uh one two and three and you'll see why numbering these like this are important later on but just understand that you know this is called grid lines we have a grid track is a space between two grid lines forming either a grid row this is a horizontal track or grid columns this is a vertical track so for instance there's three grid columns here and there's two grid rows here pretty simple uh grid cell it's a single unit in the grid where a grid item can be placed so these are grid items and this is a grid cell kind of like if you think like a table cell uh grid Gap grid Gap is the gap in between so just like Flex we have gaps and grid as well so we have the gap which is the shorthand for grow and columns um and then we have the row Gap and then the column Gap you can separate them as well uh and a grid area so a grid area just means uh the multiple sections of a grid so if I chose um so for instance here these four make up a the grid area and you could Define it using grid area um specifically and we'll talk about a little bit later how this works but that is just a basic terminology um and that's it uh these are all of the properties that we can use and we're going to go through um I believe every single one of these um later as we go through this lecture but this is just an overview so these are the properties for the grid container and these are the properties for the grid item we're going to go through all of these as well so the container a grid container is set by the clearing GD or display inline grid and can use display sub grid on the container element so um we're going to use an example um to create a grid and you can see in the what it's going to happen is uh we will create a grid and then the items inside the grid will become grid items uh the contents comprise a grid with grid lines forming boundaries around each grid area uh please note that when we do create a grid these won't work on anything in the grid container float clear or vertical line uh and margins won't collapse inside a grid container just like Flex all right let me see okay so um before we do this let's start by um braing our grid so if we can pull up um the visual studio code so what I'm going to do this time is when I um show you preview I'm going to take this and I'm going to copy it and put it into um um Chrome the reason I'm going to do that today is um is because I want to show you guys uh inspect element and what happens when we do in ECT the elements I'm going to pull this into to the side just like the side by side okay all right so you can see here um in this first index we have a container a general container and there's four items in my container this container has a class of C1 and I'm going to use Grid in here so if you open the if you double click this to stick the index Tab and I'm going to open Styles so the first thing I'm going to do is Target this do C1 and I'm going to display grid okay um and you can see right off the B um there's no change in here okay I'm going to pull this out but if I right click in Chrome and go to inspect this is my inspect elements and close this so you have a little bit and I go into here where it says layout right under grid um I'm going to toggle the grid overlay right so here you can see that this is now grid container right so if I take this and I take it off you can see that there's no grid right but the moment I set this grid okay suddenly it has it shows I have a grid right it shows my uh grid lines right here's a one two three four five five grid lines um and then one two grid lights so you could see it automatically uh this container has now become a grid all right so I want to show you guys also um we're going to uncomment this one now so you can see here that when I have this grid overlay you can see that this one's a grid and this one's not a grid right and I'm going to go ahead and in this item I'm going to add a margin 10 PX and this is to show you guys that when you're in a regular block display the margin collapses right so you can see here that there's 10 PX on around each one of these but since these two both have margins they collapse within each other however inside a grid key here as you can see your margin doesn't collapse so just understand margin does not collapse when you're using grid I'm going to go back to the lecture um so how a grid works is that we need to define the rows and the columns so there's several ways to Define rows and columns so for our first grid we're going to use the grid template columns and grid template rows to to uh Define the size of the rows and the columns for our grid so these are all different examples of how we can use grid template columns um we're going to start off with something really simple but for here um you could oops let me go back here you can see that um we're creating a 3X3 grid um and we are telling it to be 10 pixel 10 pixel 10 pixel for the column um and 10 by uh 10 pixel 10 pixel 10 pixels for the rows um and then we're going to go through each of these but these are some other examples where we could use a repeat function um here and here and it just in this slide it just shows you that we could use pixels we could use a percentages and we can use you know text like Auto all right so what we're going to do is um let's go back to here we go side by side and I'm going to take my grid here and I'm going to add uh I'm going to create a 2 by two grid so I'm going to go ahead and uh do grid template columns and I want the First Column to two be 200 pixels so see it only made one column here right but if I want two columns I just to space and I could tell it to um do a second column here 200 by 300 right and if I want to um change the size of the rows I do temp grid template rows uh I'm just going to do 120 for the top one and 200 for the bottom so you can see right here I created um my 2 by two grid and I to it that I want the columns to be the first column to be 200 the second column to be 300 I did the same thing with the rows I want the rows the top one to be 120 and then the bottom one to be 200 it's pretty cool right ahead and save that all right so with um any questions so that's pretty simple I think uh just creating the grid container in the grid we lost you guys so if anyone don't say something put in the chat for some reason I I did what you did right now and uh it looks like the boxes are all together there's no space between so let's take a look um okay oops there's no space between yeah is it because did you lose the margin oh yeah I missed that I added a margin 10 but you can remove it and we could just you could take a look that's what happens when you remove the margin all right so with grid comes something called the FR FR unit and this is really really cool in a way um FR unit stands for fraction units so it basically tells you um basically um it's input that automatically calculates the layout divisions while adjusting for gaps inside the grid so you can see that what we did before we actually tow the grid you know 200 pixel to 500 and 500 pixel but what if you have like you know you want something more responsive so that's where the FR unit comes in so you can see that FR unit it's basic basically saying one fraction right so if I only have one FR unit that's a whole if I have one one FR it becomes two halves if I do 1R and 1R and 1R it becomes 1/3 um so here's some other examples so if I do uh one you know one of R 1fr 2fr so what it means is if you let's say you add all of these that's 4 2 over 4 is half 1 over 4 is a quar and 1 over 4 is another quarter um here you could think of it more like so if we add them together that's five so one over five is a 1 um and this is here 25 and two5 and again if they're all the same um then you have 1/3 of each okay so let's uh let's pull this in and let's take a look at the FR FR unit can like to show the preview and then actually copy this into Google all right let's take take a look at what's going on here so here we have uh six items let's close out all these okay um and then you can see that in these containers I've already set grid to them so that these two are already grids so um let's take a look what happens if we take the first first one right so you can see that we could set um let's choose C1 and then let's just set the number of rows so grid template rows um 85 PX 160 PX and uh see let's do C2 gr template columns 20% 50 PX 120 P oops okay um so here you can see right so see so here as you can see we um we set these based off of uh pixels so we set uh set them uh 20% of the size 50 pixels and 120 pixels uh so but you can see there's a bunch of leftover space here and so let's see this 20% is flexible but these two are not flexible you see as I open the page wide and open the page smaller so if I want this one to take uh one fraction of the rest let's see what happens here so you can see that it Tak takes up the rest of the space here so open and you close so the fraction takes up one fraction of the rest of the page um so for the first one I think it will make more sense if we do columns and Let's do let's try different FR methods right so if we do one so that just say we're making one column that takes up one fraction so what if we want to make two columns but equally do half and half so we add one more F FR you can see it equally uh takes up half of the space and it will adjust based off of the size it's really cool here no matter how big or how small my screen is it will take up exactly half and half so if I do um one F again you see it will divide you up into three equal spaces n is also equally spaced out and it takes up 1/3 equally um so if I want to change one of this uh to two FRS then you can see uh you could think of this will take up half of the space here um and then these will be uh one qu fourth no matter how big my screen is or how small my screen is so that's a really simple way to use fractions to adjust the size of adjust the size of your grid all right so also Let's uh so for the bottom let's set a grid templates rows oops to one F FR and let's set a column so you can see that they're a little bit smaller here so you can see um so you can see one of our it basically because we didn't set a height to our grid it only will take up as much space as this grid height so let's go ahead and set a height to our container so if I set a height of 800 um you can see what happens is because I only set the template roll one so let's do it three times right you can see It'll equally divide up the height as well it's pretty cool right here so that's kind of what FR does it just divides it um divides it in the grid equally so no matter how tall or how short your height is so I have 800 here let's put it at 400 you can see even my height is 400 I'll go ahead and just adjust it to take up um exactly 1/3 of the height here so that is the unit so any questions on the unit and you you can also mix up FR units of other types of units here so if I take this right now I have three of units but let's say I want to set the first one to 20% you can see it automatically will adjust and I set the middle one to maybe 200 pixels for some reason it's not working I guess I can't do pixels and fractions should be able to see what's going on here looks like we're not able to but we can mix percentages and fractions I think um but yeah doesn't look like we could do pixels yeah but we could mix different fractions percentages to create these grids um the size that you want or need them to be all right any questions on the FR unit it's a so you know if you think about it it's just a really great way to CU you know with these days you don't know if your screen size are going to be super large or super small the fraction um unit allows you to just create like I want this to be exactly one page all the time um and I want these all to be equal size or want this to be this much bigger than this it just allows you to adjust um the grid C uh the grid sizes um based on like fractional values okay um so let's talk a little bit about uh the other um CSS grid function so there are Developer function helpers and this just makes your coding easier and far more efficient ient so there is one called a repeat function uh is used to repeat the number of columns and rows in the grid layout and also the min max function which defines a range between a minimum size and a maximum size so we'll go ahead and take a look at each one um what they mean so the repeat function it allows you to Define grid columns or rows efficiently without manually specifying each value so how it works the syntax is you go uh you have your template con or great template rows and you repeat and you count and then the size and then the same for the rows count ins sides um so for instance you know this as an example is if I have a grid template columns and instead of writing out 100 PX 100 PX 100 PX 100 PX um I could write the repeat function which means repeat four * 100 PX so let's take a look how that looks in the lab smaller for me okay so I'll go ahead and save this and I'm going to open up the repeat and Minimax three uh let's close out all of these too and uh Show preview I like to just copy this just so I can put it in all right go ahead and close out of this for now so you guys can see it better um all right so let's do the very basic one so if I open the CSS into two Styles and we're going to do number one right we're going to we're going to um we're going to start with this this is C1 so go ahead and select C1 and I'm going to do grid template column so I'm going to tell the number of columns I want it to be four Columns of 100 PX so I'm going to do 100 PX four times and so you can see now I created a four column grid and each one is 100 pixels wide but you know sometimes you don't want to type out 100 PX four times so another way we could do this is by typing out repeat and we're going to say we want four times 100 PX and so you can see this is exactly the same thing and it will show you um exactly same as the top um I'm going to go ahead and show you a repeat function with flexible units right so right here if we select C2 and we do grid temp The Columns and we repeat three times * 1fr this I'm going to repeat 3 * 1fr and so this is the equivalent of writing out 1fr three times right so we'll have um we'll have these columns that equally take up oneir of the space in this uh in this container no matter if I'm this y or ifine this small okay let's take a look what happens if we do a repeat uh with different values right so let's just take this and see what it does we temp The Columns repeat so what we're telling is we want to repeat twice 100 PX okay so right now it creates two columns at 100 PX and then we want to do a space and then we do 31 F so let's take a look and see what's going on here right so what we're saying here is we want the first two columns to be 100 PX and then we want three columns at one so these last three columns it's going to take up 1/3 of the space each um you can see it just fills out the rest of these as these grid as well so you could use repeat with different sizes okay so you have two fixed columns at 100 pixel each and then you have three flexible columns let's take a look at the next one so can we use repeat with multiple sizes so let's take a look at what that's going to do so we're going to choose uh C4 and we're going to do the column we're going to say repeat twice 50 and one a far so let's take a look at what this that does so we want to do twice 50 pixels 1 F okay so what's happening here is we're saying 50 PX 1fr that's two column but you want to repeat that two columns twice right that's why you have four columns across so we take this and we repeat it twice so you have four columns and then it fills in the rest of the grid like the last one it looks like I have this I'm going to delete that for now okay so another thing you could do is you can use repeat to define a pattern for part of your grid and then we added extra columns outside of the repeat function yes Angel could you repeat um what does it mean the last part you you you explained yeah that part yeah yeah so if we take off this repeat right so think of it this way we take off this repeat essentially what we're telling it is we're making a two column grid right one that's fixed at 5050 pixel and one one FR does that make sense this that okay but we're telling them to repeat this one twice so if if I go back so essentially what I'm saying is repeat the fixed 50 pixel 1R repeat it one more time 50 pixel 1R so think of it as a group we're repeating this group twice oh okay okay yeah I know I had I first time I saw that I was a little confused too but that's um so basically you could create uh you could say repeat you could create your group here and then this is how many times repeat that group oh I see okay um so we're going to do uh for C5 we're going to see what happens if we uh do this repeat and then we add one extra to the end of it so we're going to repeat twice this group The 50px 1fr okay so we're we're it's the same as the top but also this time we want to add a 20% at the end so now it becomes a five column grid so and you know this could be anything you want it could be I believe it could be in pixels too yeah so that's that's and pixels is fixed uh if you use percentage or fractions those will be uh responsive so this is how we could create sorry so here what essentially is saying we're repeating this group twice 51f 51f R and then at the end of the repeating twice we're going to add another column at 20% pix uh 20% so that's what happened here okay before we do number six I'm going to go back to lecture slide and talk about mid Max but does anyone have any questions on this and of course right now we're just using columns um just because it's column has kind of like a whiff set to it um with the row you could just imagine it does it's pretty much the similar except we'll have to set a height to our to our grid that's why we were doing the columns okay so that is the repeat function it's just a a kind of a shorthand and a way to think about um creating columns or rows and just uh putting them together all right so the next one is a min max function so the min max function tells you like the minim so you know how right now we're working with kind of uh a fluid grid right but what if you don't want the grid to be smaller than a certain size or you don't want the grid to be um larger than a certain size so that's where the minmax function comes in um and you you can set a minimum and a maximum size for the grid columns or rows so this ensures that the elements remain responsive but they don't get too small below certain size uh or you know too large and so the syntax here is uh for both The Columns and the rows you write min max and then you Min is the minimum size that you want and Max is the maximum size uh you want so um can see here for instance uh if we were to do columns and we were to do two columns here we have a the First Column we want it to be a minim um we don't want it to shrink smaller than 200 pixel uh we don't want it to be bigger than 1fr um and then the second column you don't want it to be um 150 P smaller than 150 or larger than 2fr so let's take a look at this what that actually means um so here so let's go ahead and let's go ahead and actually take this example here right so if we target C6 oops wrong one and we go grid template columns and we do min max 200f uh PX 1fr we do space Max 150 X comma 2R let's take a look if I was correct all right so you can see here so as you can see the First Column we're telling it we don't want it to be smaller than 200 pixel and here we don't want it to be uh smaller than 150 right so when I stretch big enough it will be this will be um so let's see what do we have it so we had uh so there's three F so this will be 1/3 and this will be 2/3 right and it will be responsive all the way down until you hit 200 pixels after that this will no longer get smaller than 200 pixels so it's going to take the extra space from here and it Go small until it hits 100 pixels 150 pixels um and then this will refuse to go smaller than 150 pixels so that's what the min max is um so here I have um so I'm going to go ahead and comment this one out so you can also use the minmax in the repeat so what we're going to do here is let's just do what it let's just try this one um you could copy it paste it in okay let's read it and see what it's saying so what is saying is I'm going to create two columns and each column the smallest it could be is 100 pixels and the largest I want it to be uh is one to grow right and then I'm going to add an extra 200 pixel fixed with here so no matter how big or small I get that will be 200 pixel um so let's take a look you can see when I'm big enough this takes up half and half of the remaining space but when I get small um it should stop you know the minimum at 100 which I'm not quite sure if it does but it should um minimum at 100 let's see if I try this I do think that because to see if it's a if if I so it was too small so if I do 50 pixels you see because we force this one at 200 um and this one would say we don't want it to be smaller than 500 pixel that it will just refuse to be smaller than 500 you can see so what happens is then now I overflow because I'm forcing my grid to be larger than the container let me go ahead and make this 100 um but you could go ahead and play around with this and um kind of test out the min max function and the repeat function okay all right so one thing about the grid layout um we want to talk about is the explicit grid and the implicit grid so um this is basically the ex explicit grid is defined by the developer which is us uh with grid template columns and grid template rows and this means you manually set the number of columns and rows however there are when there are extra grid items that doesn't fit into defined explicit grid the browser automatically generate additional rows or columns to accommodate them so let's see what this means so I'll go ahead and save this so we're done with three let's look at the explicit let's close out these so I'm going to go Show preview and then copy this over into here all right let's take a look at it CSS for this one um you can see I've already set a display grid onto the containers so we'll go ahead and let's take a look at implicit and explicit grid right so if I take this first container and I set a grid temp a grid template columns and I want repeat let's do three rows uh three columns at 150 PX okay so what you can see here is I specifically uh oh let's do rows for now so grid template rows and 150 PX so you could see here what happened is I set the grid right so the column is uh one two and three columns so that's explicit I told this grid I want three columns however for the rows I I only set the first row so you can see that this first three they're considered the explicit grid um however these are implicit grids I didn't actually set the row height for them so let's take a look at here so as you can see here right I set the I set these height at uh 150 150 by 150 however these ones um I didn't set the height to them so the the auto height so the but the but I still have these items are in the grid right so what happens is uh um the the browser will fill in these space and then because I didn't set them the height would be uh whatever the content is right so if my content is this high and then I think I have a little bit of padding around uh so my font size 2m and then I do have a little padding around them yes so you can see it will be as tall as whatever my um my content is so if I take away the padding then you know it's only as tall as my um content which is just the numbers and this one it doesn't change because I specifically set the height so it's important to understand that there are explicit grid which is what we said and then these are and then the um the browser will fill in the rest of these is is there any way that we could put the numbers on the on the top boxes in the middle of the boxes I don't actually know these are no I mean I'm not quite sure you're saying can we put these numbers in here right uhuh yeah um I don't see any options to do that okay it's okay but yeah I mean you could search online and see if there's an option to do it but I don't I don't think there is okay but yeah it would be nice if it's in the middle but uh okay so how do we handle the size of the rest of the rows right so rows or colums that we did not specify the height because sometimes you're not going to know how many grid items you have so you can control the size of implicit rows or columns by using grid Auto rows which defines the height of the rows created automatically or grid Auto columns or defines the width of the columns created automatically so uh so again if if these weren't set then they will automatically be the the size of the content like we have here so let's take a look how we can do this so um we have uh this let's say we want to control the rest of these but we don't know how many rows are going to be left over so if we go grid template uh so we'll go grid Auto rows and we're going to set them at 100 and so now you can see what happens is uh no matter how many rows I have here it's going to go ahead and just set 100 to the rest of them so let's say I uh just go ahead and just add a bunch in here you can see that no matter how many rows that are added um they're still going to be the height of 100 so that's what grid Auto uh rows will do so let's see what happens if we take away the first one now it's going to set all of them right so you don't have to set all of the explicit grid then you know this now everything is implicit grid because we didn't set any height to any rows but by using grid Auto auto rows uh we can set the rest of the height of these okay let's see so so there is a short hand for this as well um so there's something called grid autoflow so that's a Shor hand of um how grid items automatic get placed when there are unassigned spaces in the Grid or when items overflow the explicit grid so grid autoflow so instead of you know using the slide before where we did grid Auto rows and grid Auto columns we could just do grid autof flow and it will have the row the column um row dense or column dense and so um here's definition so the row is group items are placed row by row which is left to right then WRA into the next row column items are placed by column by column Row D try to fill all the gaps by back filling smaller items and column dance similar to row dance but fill gaps in the column base layout so we're really just going to uh just use row and column for now um I'm going to show you guys in the second grid so go ahead here and let's uncommon out the C2 okay let's let me close this so you guys can see a little bit better uh okay so C2 if we do grid autoflow column so when we do grid autoflow column it just fills in everything into the column see here and let's set grid template columns to repeat 2 one F grid template rolls okay so what happened here is if we do grid template columns and we're going to repeat where we're going to take up half here um and then the last column you can see but okay so what happened here is let's go grid so we're telling it we're only want two rows like we're so we have uh the first row is 75 pixels and the second row is 100 pixel um and then for the columns um we are do we want two columns where we so this right here is the X a grid and so what it's going on is it fills in the rest of the grid um based off of the grid Auto flow so you can see here what it's doing is uh we explicitly uh put this grid together and because the autof flow is in column it'll flow so here you know it's a one two three which is the default goes by row uh when we change the autof flow it goes up down so one 2 3 4 and it'll fill in the rest of the implicit grid and then let's see if we add in Grid Auto column so if we want to want this column to fill in um not Auto but we want to maybe do 20% um and you can see then the rest of the columns will be 20% so you can see that there are ways for us to to um change you know use these to manipulate how we want the grid to look so so that's grid autoflow which is we're changing how we want the grid to flow um you know normally grid is 1 2 3 4 5 6 now we're going 1 2 3 4 5 6 so let's take a look in our inspector what happen happens when we put the layout on so yeah I mean doesn't really so it's still the same the numbering is still the same 1 2 3 and then we have 1 2 3 4 as the line numbers it does the opposite numbers as well that's G grid autoflow all right so that's different ways on how we can build out our grid um next we're going to talk about grid alignment properties but before we do that do you guys have any questions on the grid I know a lot of this will be um a lot of practice in understanding how each of these can be put together to work for you um but as you can see it's very flexible it allows you a lot more controlled and flex um because you could grow uh build out en higher grid all right great so let's talk about um alignment properties so grid also just like Flex they have alignment properties to control how the grid items and entire grid are positioned within the container so there are four key alignment properties and they might sound very familiar from flx you have the Justified content which aligns the grid as a whole horizontally align content which aligns the grid as a whole vertically justify items align individual items inside the grid cells horizontally and align items which align individual items inside their grid cells vertically um and so let's start with justify content it will align the whole grid horizontally so it controls uh your grid along the x axis uh where your grid as a in general will um will be so it works when the grid container is wider than its grid track so let's just uh pull this in so kind of make more sense what it what we're talking about so uh oops so let's close this one out and let's open this one all right let's take a look at what's going on here in our CSS right so we have our container which we set a height uh first of all it's a grid um and we set a height to it and then what we did was we set a grid template columns in each of these columns are 80 pixels so you can see that there's a lot of leftover space over here um and uh let's see what else we have here okay so that's it that's to note here that we do have a lot of extra space and so let's do this let's see what happens if we take uh the first two containers and we'll set a grid Auto row okay so we're going to set the height of all of these rows because you know we only set the columns but we're going to set the rows all to be 60 pixel height so therefore you can see now there's um Extra Space on the bottom as well so then we're then we can start using the these justify content and see uh if our grid is smaller than our container um how it would work so uh for the first one we're going to use uh justify content so if we justify content Center you can see our entire grid is uh in the middle of of this container so so this works because because we set a certain width to these These Are Fixed WID and there's extra space uh in the container itself so the items if we want them to be centered uh we can use justify content Center and we could try the rest of these so we have start which is your default on the left hand side and which goes to to the end and then you have your um space between is very similar to flex right and then we have space around again very similar to the flex box and we'll do space evenly you can see that it um spreads it evenly so it's the same idea for the line content except it's um it says vertical position so if we go to C2 content and let's do Center you can see it's centers if this is only if the height is larger uh the height of the con the grid is larger than its uh items inside so we C to start which is the default end which we'll put it at the bottom space between space around and space evenly so what if we do space evenly on both sides and you can see we have a grid that space evenly um within our container um both left and right and also top to bottom so that was justify content and also align content which is very similar to X the same similar values so let's talk about justifi items so it aligns items inside each each cell horizontally and it controls the horizontal line of grid items inside your individual grid cells let's take a look here if you go to index could uncommon out these two so let's take a look what's going to happen if we take C3 which is this one and we do uh justify items Center so you can see immediately when I do justify item Center uh my grid item uh now becomes Auto with so but let's see what happened what happened here okay so we are on good container three so you can see if I'm in this container so what happened is my grid is still a certain size however my content inside inside my grid is uh horizontally centered here sorry horizontal centered yes that's right so let's see what happens if we do start so you can see if this is my grid I know it's kind of hard to see let me see if I could choose a different color oh that's much better okay um so you can see here in my grid these grid lines right it's uh the dash lines is the grid and then just defy the items to the start end right to the end of the grid horizontally and I'm and then the default which is stretch it's stretches from take the default all right same thing with the line items is the same idea I'm going to do C4 start let's see now as as the Box becomes as big even though the grid here so let's put in this grid like the grid is uh the size but the content inside now since we did align items it's now the size of your content so start we'll put it on the top Center will Center everything and end we'll put it at the bottom I'm going to leave it at Center and see what happens so stretch will be um the default value here we're going to go ahead and just leave it at Center so that is a way for us to um change the different um positioning of where our grid content is within the main content as well as you know within each cell itself determining how to um position our content within the cell any questions on this okay let's keep moving on all right so we talked about grid lines um so grid lines represent you know uh the start of and the end of between the column and row tracks so each line starting from the start of the track and in the direction of the grid is number incrementally starting from one so like we talked about this is grid uh column one column two column 3 column one column two and column three and uh sorry row row line one row line two row line three row line four um so when we uh view this in our layout we are able to see each of these grid uh number numbering and why is that important because we can actually tell our grid where to start and where to end so um so what we're going to do here is let me see if we're on okay so the next Lab so we're going to um create a grid where we're actually going to tell the grid cell um where to start and then where to end and then there's a shorthand too so instead of writing out grid row start grid row end you could just write grid row start at number two and end at number four or you could use a span which means like I want this grid to span to no matter where it is so let's take a look how that works oh okay so let's close out all of these I'm going to grab this link all right let's take a look at what's going on here um so essentially it looks pretty much like the rest of your grid right um except this time we have six and with just this one uh that's a different color than everything else so that you could take a look that when we target this one right and I'm going to go ahead and turn uh on the container so you can see there's one 2 3 4 and one two 3 turn it off for now so if we target this first item and we want it to start a grid row start two and grid row N three so if we take this container overlay so we're talking these are the row lines right we're telling this we want this to start at row two and end at Row three so if I do that grid row start two uh and then we wanted so you know it's pretty much implied that ends at three but let say we type it out uh end three so you can see what happens is now this will start at two and it will end at three this great column it's great so um what if we want to move uh what if we want it to start at grid column start two and then uh column three so we want to put it in this position so we could also change the column position and again it's implied that the end is at three column and three right so these are implied so if I comment them out it's not going to change where this ends up being we can see that what happens is in the row we're telling to start at the row line two and we're telling to start at the grid column line too so that puts it in this position in our grid um so can we do shorthand yes we can definitely do shorthand so let me comment let's comment all of them out I was wondering how do you comment them again I've totally forgot how to do that um yeah on the Mac I will highlight the ones I want to comment and I choose command slash which is um command plus slash for a Windows I believe your command is control control yeah slash okay so I will highlight it or if you just want it to be just this this line you could just put anywhere on the line and they will do it for you thank you I have a question uhhuh so um I I think I'm I'm getting a little confused with the positioning and so when like the exercise that you just did where the Box wand went like down um it that's why didn't like the rest of them also like start from there if that makes sense from here yeah like why didn't like why wasn't two where six is uh I guess because it has to fill in the implicit grid um okay so if I yeah um because if it's starts here then this will all be empty space but the grid has to be filled in right so what it does is it moves everything else to fill in the rest of the grid okay I think I understand now thank you okay so let's shorthand this grid roll two and uh grid column and let's say I want to move it to between three and four so you can actually do three slash4 and it moves here so these are shorthanded makes it a lot easier to type rather than um what we have up here um so let's say we wanted to span two so I let's change this to two so you can see what happens is um I'm telling it in the grid row I want to start at two and it automatically will end at three and this will also take up just one space unless I tell it specifically where to start so if I wanted to start at two and end at four it will span four um and I didn't see who asked the last question but that was a great question um what happens for the rest of these is that they will fill in the the gaps um the implicit implicit grid so um the browser will automatically fill in this grid um starting from this it always starts from the one one position um and then it'll fill this in this because we only have three columns the six will now be pushed to the bottom go ahead is it sorry no go ahead go ahead oh I'm going to go ahead and comment this out also another thing you could do is use the span um so if you don't tell it where you start um you could so if I do grid row and I do span two this see it automatically spans two rows and I could do grid column span two and automatically span two so this is really cool you could think uh something times um if you know it just makes it so simple for you to take multiple columns um with just a really simple CSS um properties what I was going to ask you is that um grid row and and grid row start are kind of like the same right because I was playing with it and it does the same um action pretty much yeah a grid row is the shorthand so essentially what it's saying is grid row is yeah I guess if you don't put the ending in Grid row so grid row start I don't think you could put an ending number but in Grid row you could put an ending number so like if I were to take this right so right now I'm saying grid roll is two but I can't put it if I do a slash I like a ending number here let's say four right but that's the difference like grid row start so if you don't put an ending number it's imply that you only start at two but if you do put an ending number then you could control the end of it but grid row start does allow like you're not going to be able to do the SL oh okay so essentially the end will allow you to do the grid row like um expand yes so grid row is short hand or [Music] these yeah so it just it's it's more options it's like saying and so it's like it's like saying you could do padding top padding right padding bottom and padding left right um you could write each one of them out or you could use just the short-and padding so it's kind of like the similar idea but you can't you can't do four four like you know padding and if you just choose padding top you can put four values in there got it so yeah it's more selective when you do that yes exactly exactly so this allows you to put in more values um versus like this one it's very just like you have one value to put it's not going to read it you put it St and end okay yeah and so here we have grid column start and grid column end we already talked about it um and then we have the grid area which is actually shorthand for everything right so so essentially um you know we talked about you know you could have each one like grid column uh grid column start grid column end grid row start grid column uh grid row end so that's for values that's a lot of typing or you can you could actually just do uh grid row or grid column that but that's still two values you can actually combine all of them and you could do so you could do something called grid area so how it works is grid area will be row start column start row end and column end so if we were to take go back here and let's comment this one out so let's say we want to do this one right where we want it to span from 2 to 4 and 2 to 4 so what I can do instead of typing all of these out I get to grid area um so we two two right four oops four and that's essentially the exact same thing as this one so we got so let's say we want to go from two uh sorry two to four row and we want to go from 1 to three right so what if we want to take this one so we take a row is 2 to four that's fine so columns one two three so that changes so you could shorthand everything too of just grid area I have here on my notes that you could also shorthand even with span so you could do grid row uh you start at two but you want to span three but that's a cool way of getting the start and it's like you know I'm telling you where to start but I want to span three and then we could do um R column span two it's pretty cool H guys can play around with this and um just see uh what will work for you so this allows you lots of different options for you to you know move your grid the way that you want it to move and you can imagine especially when you're going from um like a desktop to a mobile instead of like moving stuff around or hiding and maybe displaying some things you could just use the grid to move things around to different um different position throughout the grid so it's a lot more powerful as you can tell than the flex box okay um before we move on do you guys want to take a break or do you want to keep going and just put in the chat see how much we have left today um we're pretty much close very close to the end uh I think we're just going to talk uh let's see yeah so grid template area and grid Gap are very simp uh so template areas um be quick and then G app is very simple and then we just have a final example all right I got one person to keep going so so so what I think is I'm going to get through at least all of these and then before the final example if you guys don't want a break we'll take a break um but I think that I really want to get through a little bit more all right so yeah let's do a break before the final example okay so um let's talk about this um the really cool thing about grid is this thing called grid template areas and the grid template Area Property it allows you to assign names to different section of a grid layout and you could use it to organize and Visually structure your design so how it works is uh you have to define the grid area so the grid template Area Property use a stream based layout to find named regions so you can name regions like main nav whatever you want to name it um and then each row is a separate string and each name correspond to a CSS class that is assigned to an element um and number two you assign the grid areas to element use grid area name and CSS to match element to the layout so let's take a look at what this actually means so what is here is um for each section I can name it uh a certain grid area and then I use the grid template areas to um set up that structure right so this could allow me like very complex structure and then I could use you know different grid template properties to uh to assign how big I want either the rows or the columns right so for here um what I'm saying here is I want header to take up four columns nav to take up one main to take up two columns one column aside and then the phoo take up four columns so let's uh let's take a look I think that will make a little bit more sense um once we get into here and see what it means so so we're on number seven let's close out everything show the preview let's see what's going on here all right so I have created like a structure of let's say of a website so you have your header your navigation main aside and footer and right now it just the say um they're all the same height as um whatever the content is inside and let's take a look at the CSS okay so there's nothing really on here other than the body is a display grid which makes everything inside the body as you go into index so here's the body and everything in here are now grid items okay so what we'll do is we'll start um by naming each one of these grid items so I'm just going to name them so the first one I'm going to name grid header um so the area name it could be whatever you want it to be um I like to name it this way um and you could use you know initials if you want but I like to name it this way because it tells me what this area actually is it makes a lot more sense so let's uh just name each one grid area uh this is me red area this name does uh Na side okay so now that I named everything kind of just disappeared on the side because I didn't add it to anywhere in the body um but if I go into the body and I use uh my grid template areas oops so how this works is you do col uh colon and then I do my first row so I want header [Music] header header header so I'm saying I want the header to span um four rows H sorry three uh four columns nap main main side and in [Music] footer okay so I think it's not showing because I didn't set any template rows so grid template rows um one fraction four fraction one fraction oh shoot I put this on the wrong one that's why put it in their body here we go and uh what I'm want to set here is because I didn't set a height to my grid um you can see that it just is as big as um what I set it here so let's set the body to um see 100% will give me anything no so uh let's do 100 V8 which stand for the viewport height which will make my body as high as my viewport you can see if I close this out so what's happening here is so I chose the header and I'm I said I'm going to name this header right and I'm going to name this main section grid main navigation um as nav uh grid area aside as a side and and grid area footer and then what I'm doing is I'm going into the body which has the display grid and I'm using these names to set the columns right so I want the header to span four columns um and then then not to span one column main to uh main to be two columns the side to be one and then further to span four columns and then uh what I did was see what happens if I get rid of these so if I get rid of this it automatically just looks like they're all the same same size but I want this to be uh so what I do is I'll add them all up 1+ 4 + 1 that's six right so uh the first one will be one six of the area uh 4 six will be about 2/3 and then this is one six of the area so you can see and another thing what I did was I had to set the height of the body um otherwise going to it's not going to take up this full width for the height I set 100 of the viewport height here so um you can see what I did was because I uh set these grid areas uh I'm uh I set a name to each one I could use the name to create very complex um complex um templates so let's say like here I want a side to actually take two and Main to only take one and I just um do this and why a side on okay so you know it's because um the problem uh main content is a lot larger than the side so it can't be too much smaller than the actual content inside of it but um it gets smaller um so you can see that this can't get smaller than whatever the content is inside of it so that's kind of a downside to it but if I get big enough you can see that like um this is definitely taking up a lot more space so you could use this method to um to a little bit more complex templex okay all right so the last thing is we do have the Gap property that's very similar to um the flex Gap so um again you have the row Gap the column Gap or just the Gap property itself which is the row and the column and so so let's uh pick this do this last lab and then I will we um do the final lab after this which will kind of put everything that we learned together and uh you'll see it in more of like a final example so let's go ahead and take a look here so let close out of all of these yeah then I'm going to grab this one and this a gap is very similar to flat X um so let's see right so this container as you can see is this display grid already and what I set here is um one column where the where the minimum is 160 and the maximum is 20% and then I'm repeating uh onef so the remaining space I'm taking half and half so this two columns will be equally in size so this is a three column grid they come in and out you can see it doesn't get smaller than 160 over here um and when it gets larger it will get larger than 20% okay so what I want to do here is if I want to add just a gap of 20 pixels so now it adds um oops it adds the gap um one thing to know about the Gap it doesn't add it outside here it only adds it in between each of these similar as Flex box um and so when I do 20 it just automatically does 20 on the column and uh 20 on the row if I want to do I can separate them so I'm going to comment this one out if I want to do roll Gap uh 20 pixels you can see here automatically in my roll add the Gap and you could do column Gap uh P pixels and so you have 20 and 10 or you could [Music] shorthanded right shorthand for this one is the same Gap 20 pixel for the uh roll and 10 oh and that's it for everything and then uh let's take a minute I don't want to take too long of a break with a 10 minute 10 minute break be too much we could do a five minute break and then we'll talk and then we'll come back and do the final example so a little bit more let's come back at 8:20 so um 8:20 we'll come back and um we'll start off again and we'll finish example and then we'll get into our teams all right I'm back guys all back yes yep all right so I wanted to um uh before we start the last one there's a little bit more in the grid that I want to talk to you uh talk about um so uh this is justify self align self and order so it's very similar to flexbox when you justify yourself you're telling um the property itself instead of the entire everything um aligning a certain way you're telling a certain um certain grid it how to align uh specifically the horizontal alignment in the item so that's justify self um and again it's the same as if you do justify item um on the container which is Start Center end and stretch and then we have align self which is the vertical alignment of an item and start Center end and stretch um and the last thing and we will show this in the last example is order so you could tell the gri item where to order to um so for instance a default value for everything is zero so if you uh a higher value will appear later in the grid and a lower value will appear earlier so for instance and you can do a negative also so the default value is zero if you order something that's a negative one it's going to go to the beginning of the grid uh anything higher it's going to go uh later in the grid so um let's do this last and you guys can see my screen right want I make sure awesome okay sometimes I can't tell usually there's a green outline but there's no outline sometimes um all right so let's go to lab n and let's take a look at this lab so I'm going to again hold my my Chrome to the side here and I will uh grab the preview of this close this out um and let's take a look what's going on here right so we have this index and it's very uh simple so we have our section and we have our body and in the body there's one section and this is our container um in the section there's a header which put the H1 horses we have our main uh and in the main we have two figure elements so we have um in the figure we have an image we have a fit caption and then we also have uh a paragraph and we have two of these going on um and then we have our footer right here on the bottom um so in this style you can see we have uh just a header there's a text Aline Center and we put a background color on there um and we added a background color to everything in the main area here so we used Main and then this means Universal so everything under main um as a child uh it's going to have a background color uh the article uh has a font style metallic and a padding of 2 RM um which doesn't look like it's affecting right now but the image has a max width of 300 pixels uh which means it can only be as uh as big as 300 but then 100% to fill in that 300 WID uh and I said aspect ratio of one which means that they're squares uh the figure which is uh let's see here which is this entire area has a padding around it uh and a margin of zero a fit caption which was this we added a background color font weight bold align the center and then we added a height to it uh for the paragraph we added a Max width of 300 margin Auto to center it and then also some padding up and down and then we have our footer where we added a background color a texal line Center and then a padding of one RM so the goal here is we are going to use grid to um to uh set this up in the positions that we want it to be so let's start so we're going to start by taking this main which is this entire middle section uh and then we're going to do display grid which as you can see display grid doesn't do anything except it creates everything in the main the direct children of main will now become um grid items so if I go into inspect and you click main so you can see uh under the layout if I click Main um which is this area you can see then I have my grid here can see the grid lights are very difficult to see here really dark okay so then you can see you have my grid which is uh the first figure here the second figure here and then on the bottom I have my article okay and uh I want to set some uh columns and rows so I'm going to do a grid template columns and I'm going to so what I want is um two columns and I want them to be equal uh with so repeat 2 onef FR so then now you can see suddenly I have my um grid side by side and I want uh three rows great template rows repeat so I'm setting the explicit row but I'm going to set them as Auto height so it will just be the exact height as um the content inside you can see here so the first thing I want to do is um I want this article to span uh my grid uh two columns so I'm going to go here where it says main article and I'm going to set a grid column I wanted to span two columns close this out so you can see because it doesn't live okay so that's great I I C uh my grid and then what I want is I don't want this on the bottom I actually want this at the top so what I'm going to do is I'm going to uh set an order and remember all the order for everything default is zero so if I want it to be above everything else so imagine this is one this is two and this is three if I want three to be above one and two and these are order Z 0 I just do a negative one and that's going to move my article to the top here so what I want to do also is um you could do a grid within the grid so I want these to be grid also so I can go ahead and U manipulate the different um their positioning and stuff inside so uh these are the figures so I'm here in figure I'm also going to change it to display grid so let me show you before and after so if I inspect here right right now I only have one grid and this is on the main there's no grid on this at this moment so if I take the figure and I do display grid you see suddenly and you know I could so I have two figures so let me uh uncheck the name so you can see what's going on here so suddenly these have now become grids as well um and I want all the content to be centered you can see that it's kind of weird that this is uh left the line so I'm just going to do justify content Center so when I do justify content Center um suddenly this this um is only as big as um everything is as big as the largest size item which is the 300 um and that kind of it fixed the issue that we had overflowing with these being bigger than the image and then let's do grid template rows uh I'm going to do auto so we want to set two of them um one so we're going to just set the grid template rows for now um so what I want to do here is I want this um big caption to um overlay this um this image right so I want to Overlay it on top so what I want to do here is I'm going to select both the image and the figure sorry fit caption the image and the Fig so the image and the fit caption so if I come here and I do image comma fit caption and um actually let's take this off for now so if I want them both to be the same uh I could do a grid row starting at one and ending at two for both of them and then I want them both to have the grid column to start at one and end at two and you can see that it overlays here it's great um I added this here to set up the explicit explicit row um so you can see if I didn't set it then um it adds a little Gap here but if I set it in Auto it it I'm telling it I want two rows um you know I don't want them to implicitly add rows um I want this one to be Auto sized and I want this one to take up the rest of the space that's in here and so I have this overlay um except that this fit captions at the top I don't want it to be at the top so I want it to be actually at the bottom here so uh I have here F cap we're going to use the Align celf so we're going to tell align cell because we have we can't use align items because there's two things in the same cell um so we're telling the fit caption to align self and align self remember it's the vertical alignment versus if we do justify self it's the horizontal and we want it to be at the end so you can see that push it to the end overlay here okay so let's see I have also [Music] here see I I have a note to do let's see if we do um main paragraph align self start where is that that doesn't really do anything know why I have that let's see height okay so I think I was having an issue here with um with them being different so I guess that's why I added it okay so you see here that um right now the text are um kind of different heights right because this one has a little bit more text than this one and so you can see the gap between these are different so I wanted them to both be at the top uh of each one so I wanted the paragraph to also be a line self um and so I added a line self to the start to make it at the top of it uh and I had to set a height to the grid cell in order for it to actually align um and so but then I wanted a bit more gap between the top and the [Music] bottom so I added a gap one R oh actually so I added a gap just to um see okay so I wanted to show you guys what the Gap does so if I add a gap inside this Main it added some space in between each of these section here so um you can see here if if you know if these were boxes that were smaller and you wanted to add some space in between the boxes you can add a little Gap there and that's it any questions on this how to use Gap or I mean use uh grid so it's a lot of uh different properties um that you could use to um you know just uh position things and just a lot easier that you know stuff that you use float or you use like negative margins or things like that it's uh it can get to be a lot of cod versus it's a lot simpler this way to be able to adjust um different spacing and how to get these uh grid items to show the way that you want it to show all right so for this week uh we just have um let's take a look what we have this week so uh we are done with layout and positioning starting next week we are doing uh responsive web design uh so we're going to so there's a quiz this week for CSS layout and positioning um there is one assignment and there's two parts to assignment the first one is just a couple different exercises for you to practice the different grid layouts um and there's a couple requirements as well as there is um images of how your grid should end up looking like um so there are three different exercises for you to just practice these grids uh in part two we're going to be building out the community community page um so you are provided uh starting code and the idea is to use grid um to to create this layout specifically um in the community page and again we're not doing responsive design just yet so it just has to look this way on desktop and you don't have to worry about how it looks on mobile any questions
Share:
Paste YouTube URL
Enter any YouTube video link to get the full transcript
Transcript Extraction Form
How It Works
Copy YouTube Link
Grab any YouTube video URL from your browser
Paste & Extract
Paste the URL and we'll fetch the transcript
Use the Text
Search, copy, or save the transcript
Why you need YouTube Transcript?
Extract value from videos without watching every second - save time and work smarter
YouTube videos contain valuable information for learning and entertainment, but watching entire videos is time-consuming. This transcript tool helps you quickly access, search, and repurpose video content in text format.
For Note Takers
- Copy text directly into your study notes
- Get podcast transcripts for better retention
- Translate content to your native language
For Content Creators
- Create blog posts from video content
- Extract quotes for social media posts
- Add SEO-rich descriptions to videos
With AI Tools
- Generate concise summaries instantly
- Create quiz questions from content
- Extract key information automatically
Creative Ways to Use YouTube Transcripts
For Learning & Research
- Generate study guides from educational videos
- Extract key points from lectures and tutorials
- Ask AI tools specific questions about video content
For Content Creation
- Create engaging infographics from video content
- Extract quotes for newsletters and email campaigns
- Create shareable memes using memorable quotes
Power Up with AI Integration
Combine YouTube transcripts with AI tools like ChatGPT for powerful content analysis and creation:
Frequently Asked Questions
Is this tool really free?
Yes! YouTubeToText is completely free. No hidden fees, no registration needed, and no credit card required.
Can I translate the transcript to other languages?
Absolutely! You can translate subtitles to over 125 languages. After generating the transcript, simply select your desired language from the options.
Is there a limit to video length?
Nope, you can transcribe videos of any length - from short clips to multi-hour lectures.
How do I use the transcript with AI tools?
Simply use the one-click copy button to copy the transcript, then paste it into ChatGPT or your favorite AI tool. Ask the AI to summarize content, extract key points, or create notes.
Timestamp Navigation
Soon you'll be able to click any part of the transcript to jump to that exact moment in the video.
Have a feature suggestion? Let me know!Get Our Chrome Extension
Get transcripts instantly without leaving YouTube. Install our Chrome extension for one-click access to any video's transcript directly on the watch page.