CSS Grid Basics - Mastering CSS Grid | Daryl Duckmanton | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

CSS Grid Basics - Mastering CSS Grid

teacher avatar Daryl Duckmanton, Experience is our biggest asset

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

45 Lessons (4h 15m)
    • 1. Introduction

      2:25
    • 2. Tools And Resources

      2:46
    • 3. CSS Grid 101

      13:58
    • 4. Creating Grid Containers

      2:28
    • 5. Defining Rows and Columns

      8:38
    • 6. The grid property

      1:44
    • 7. Fixed and Percentage Track Sizing

      3:27
    • 8. Track Sizing based on Font Size

      3:58
    • 9. Track Sizing based on Viewport

      7:59
    • 10. Auto Track Sizes

      5:46
    • 11. The Fraction (fr) Unit

      10:14
    • 12. Auto vs Fractions

      2:45
    • 13. The minmax function

      10:00
    • 14. Minmax function gotchas

      7:05
    • 15. Understanding max-content and min-content

      5:16
    • 16. The fit-content function

      5:49
    • 17. The repeat function

      6:12
    • 18. Managing Grid Gaps

      5:43
    • 19. Nested grids

      1:16
    • 20. Reordering Grid Items

      7:00
    • 21. Moving Grid Items to different columns

      7:55
    • 22. Moving Grid Items to different rows

      7:06
    • 23. Moving Grid Items to non adjacent cells

      9:05
    • 24. Grid Item spanning basics

      9:58
    • 25. The span keyword

      7:58
    • 26. Grid Item spanning gotchas

      4:07
    • 27. Naming Grid Lines

      5:49
    • 28. Spanning Grid Items based on line names

      7:19
    • 29. Using multiple line names

      4:58
    • 30. Lines names and the repeat function

      4:04
    • 31. The grid-column property

      8:02
    • 32. The grid-row property

      5:18
    • 33. Positioning Grid Items using the grid-area property

      10:48
    • 34. Spanning Grid Items using the grid-area property

      6:25
    • 35. The grid property reviewed

      4:53
    • 36. Aligning Row Tracks

      6:08
    • 37. Aligning Column Tracks

      2:29
    • 38. The place-content property

      4:56
    • 39. Vertically Aligning Grid Items

      3:29
    • 40. Horizontally Aligning Grid Items

      2:28
    • 41. The place-items property

      3:41
    • 42. Vertically Aligning an Individual Grid Item

      2:05
    • 43. Horizontally Aligning an Individual Grid Item

      1:37
    • 44. The place-self property

      2:42
    • 45. What's in the project

      7:27
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

125

Students

--

Projects

About This Class

In this class we start looking at CSS Grid for the first time. We will talk about what CSS Grid is and how it is helpful for building layouts.

We then move on to how to configure grid containers and it's associated grid items, including handling alignment.

Meet Your Teacher

Teacher Profile Image

Daryl Duckmanton

Experience is our biggest asset

Teacher

I am a full stack web developer, who has been developing websites for 12 years, both from a back and front end. I have been working in the areas of HTML5, CSS3, Javascript, Typescript, .NET, Windows Azure, AWS and Angular 2-7 in recent years, and also have approximately 12 years in ASP.NET.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction: Hello, everybody, and welcome to your first class for the course. Master insists as grid. So is this class full? Well, I'd say it's for anybody who has reasonable knowledge in high surveillance, A says as a result of this, they're looking to improve their knowledge in this is that spice. They may already have knowledge of that flex box, and they're looking to say at once says, That's Greek and day in comparison to that, and as a result of this, they might have little to no knowledge and all the sets. That's great. And they just want to get a solid on the standing off the basics. Offsets is great. So then you won't be asking what will recover. Well, the first thing we'll cover is what says this grid and how is it beneficial to how implement layouts in the future off Web design? We'll also look at how we can configure something called Griffin Taters, which is basically the overall elements that we can sit out Rows and columns form things of that nature, and along with this woman had a manipulate the great arms that appeared. So these Greek and tightness and then, lastly, we'll look at how we can deal with alignment. It says that's good as well. Now, please note that this class is actually just part one off what has been made as a fully comprehensive course. So have many classes in the future that will teach other parts of sisters grid. This is just the very stop. Okay, now it's a longer top class and you probably getting only here on school shed. But I wanted to make sure I broke it down into distinctive various. That my sense? Yeah, I think I want you to note is that all the tutorial material that accompanies this class is located in the tutorial Starts it fall, which is lengthen the resources section. And then lastly, all the project material that will say lighter in the class is actually contained in the project. That's materials it file in the results section. This well, so lost. I just want to quickly side before in this video is good luck. Have fun, enjoy the material. And hopefully you get a good learning experience at this. And I'll see you the next with you 2. Tools And Resources: how you run in this video. We're just going to quickly talk about the resources and the totally that's used in this class. Okay, so before we get started with material in the courts, I just want to quickly explain how I teach this course and the structure off the Falls faced its Toral's. So, as you can see almost green right now, I have my browser here on the left and I have visual studio code, he on the right. Since this is the I D that I use to basically run throughout my tutorials so you can choose to use this if you want. That's totally up to you. What would that said is pile of my tutorials. I use a plug in that's part off registry, a code which is called lifesaver. Now what happens is if I come into one of my tutorial CIA. That's I click on the High Street, Mel. I mean, come down to the very bottom of Mahdi and I had this girl's life. But when I click on this, it's going to open up the Web page in my bra za. Now it doesn't seem like much at the moment, but if I come in and make a change, let's say I want to change the color of the autumns here. Teoh be read like so as soon as I saved this, the breath is gonna update immediately. Okay, so I don't need to worry about when I make a change. Having the gave and refresh the page, this life saver plug. It does all this for me. Okay. Says the first year I want to talk about that and Robert that back. The second thing I want to talk about is the structure off these files. So for each video, I have a number that starts at the front of the folder. So for the first tutorial that we doing in this class, you'll say it has a number forward to be the fourth video. They're not going to have a description off what the two tour I was gonna be about. Now, once you open that folder, we have HTML fall, which I may refer to from time to time me to the tutorials. So that's what you look to fund that. And inside each of the sisters folders here we have two sisters. False. This based up says says far really just contains the styles to make this thing over here look pretty to make the patient pretty that the other senses fall is well able to s a says good work. So when you come into each fold up look for the name that matches the folder up here And that's where this is this recode God, that's a lot. One to quickly explain. Now let's move on to the actual tutorials, So I'll see you. Thanks, video. 3. CSS Grid 101: Hello, one in this video, we're going to quickly cover someone I won on, says says Grid. So, firstly, what is it? Well, essentially says this grid is a feeling the lab murdered that has been adopted in brass is over the last year old side. So I almost two years it's knows being a two dimensional land mode, making that for a single parent element. We can define both rows and columns, and the result of doing this creates a collection of cells that child elements could be placed into. And that is actually the primary focus of this layout, being able to specify exactly where Children should be placed inside off this new great element. Now Children could be placed inside of this grid layout in a number of different wise, and we'll see more of that in an upcoming slot. It's highly customizable mean that we could actually configure how many columns and rows a Greek can have, as well as the potential widths and heights of thirties, respectively. And configuring these Whitson hearts can be done on a per column and Perot basis. It fixes a lot of lab problems that Flex books could not fix with the main one being the problem of having to nest hace email just to achieve certain layout designs says as great allows us to flatten out HTML and reduce the amount of nesting needed to build these lattes . And we're really assurance is in regards to responsive Web design. We can completely move items around out grid based on the size of the view port of that device, and we could actually achieve this with very little success compared to what we used to need in the past. If we wanted to move elements around the screen, we would have to write, float hacks or change elements from block to in line and vice versa, or, even worse, implement positioning and take elements out of document flow. Now we need to do is redefined our grid system in our media queries, changing the number of rows and columns if needed, and then reposition all the Children in some of that grid exactly what we want them to bay . We'll understand how this works as well in future videos, and lastly, if you read the W three c documentation, CSS grid will be referred to as the CSS grid layout module also understand that the documentation also indicates that this layout murdered is still at the Level one candidate recommendation step, which I will explain exactly what that means, but just basically understand that the publication is in its early days and hasn't been completely finalized. Now this old sounds great in theory, but the best way to truly understand and appreciate what says this group can do for you is by looking at a problem. So what you say in front of your aunt now is my simple 10 application that will be building at some point later in the course. If you've taken my flicks box in depth course before, you may remember this up from there as well. Now before, say, says Grid, we will probably break this app down into two major areas To start off with. You would have the side bar that contains all the conversation features, and then you would have the main Shatt window area that contains all the chat features. Then you would subsequently look at the side by and bright dead down further into three child areas. One for the conversation, search another one for the conversation list area and then finally, one fully at conversation button at the very bottom. You then look at the chat area, and Polly do exactly the same thing, breaking it down into chat, Total Chap message list and chat form, respectively. Now here's the thing. Without any form a grid system, we were most likely perform some form of Nestea here to get all the conversation features into the sidebar and to get all the chat features in the chat area. Then I have to have even done that. We then have to play around with the hearts of all these elements so that everything lines up correctly next to each other. But what if we had the ability to flatten the spiv? Yeah, and implemented similar to how we would design it in, say, fighter shop or some of the Calder designed software designers think about designing you wise using a grid system specifying their own rows and columns. They would then present the light at the individual elements within this grid system. If we take a loose application closely, we could easily define a grid for this and lay out the features exactly what we want them to get a better idea of what I mean. If I show you this, you can easily see these app could be broken into two columns and three rise. And then all we have to worry about is defying these rows and columns. Exactly the size is they need to bay and then just place the items. Therefore, in this case, the features in their appropriate places. So we can say that the search conversation feature could be its spot number one say in the top Left. And then we could have the conversation list area in spot to directly underneath that and then the conversation feature and say Spot free chat title in Spot four chat messages list in Spot five and finally, the chap form in spots. Six. By doing this, ouch application has been reduced to a one parent element and seeks Children, which is much simpler toe work with. Now. This is already cool, but guess what? It gets even better because, as I mentioned earlier that says, this grid is really helpful, responsive Web design. So let's look at an example off this as well. So what I have on my screen right now is a YouTube client application that will also be building later in this course, and this is how it would look on mobile in portrait mode. He's another view of the same application. If we flipped over at my ball envy didn't landscape mode notice? There are two differences? Yeah, the 1st 1 is that the comments section has moved up to be above the related video section. Now this is, in fact, in the original portrait mode view. It's just we can't see it because it's below the related videos. The second thing that's changed is that the related videos is going from shying a single column to showing two columns. Now, if you're watching this, you play saying that's nothing special, because we can do this kind of thing already and you're right. But we see is this grid. We can do this even easier, and I'll show you how we're gonna do that, you know, like a video in this course. Now we move into portrait mode for the tablet, and not much has changed here. We just have the three columns for the related videos now instead of two. So there is a much more point out here. However, when I flipped the tablet both of our and look at the device in landscape mode. You're going to see a significant change in the layout of the application. The related videos has now not only going back to a single column again, but it's also moved completely off to the side as now spans across all the content in the application. Now let's think about what we would have to do without a grid system to get this sort by working exactly as expected, we either have to miss around with positioning, taking the Relais videos, have document flow and then pinning it to the right like this. Well, we could write some fleshy JavaScript to move elements around so that we could create this second column. In either case, we're having the hag to get this to work Now. Once again, let's view this as a designer would you would probably have two different designs for this application represent the change in Layup and for the 1st 3 designs, a designer would poorly have a grid system that contains a single column for lead by five rise to say something like this. Now it's possible that they may have 1/3 template for the change of bringing the comments up. But the point is that the number of rows and columns at the same here and just some of the row heights require just e. Now. For the last design, you would probably have a two column layout with four rows, and the related video section would be placed in the second column and then be told this panel rose in design. So something like this. Now, once again, with a flattened grid system, you can see how much easier it would be to achieve this design compared to how we used to have to do it. So now that we understand what says says grit is and what problem it sells, let's quickly cover some terminology. So it's already mentioned. We start off with one parent element, and this parent element is known as a great container. We tell his Greek container how many rows we want and how many columns would want, and the sizes off these rows and columns there just for simplicity. In the diagram, I have made all rising columns the same size, but just know that is configurable. Now, if you're still not sure what a column or her looks like in this grid. That's a column. And that's a run Now, whether we're talking about columns or rows, if this nature in the 60 s grid world, we refer to these as grid tracks. Now, as you will see in future videos, we don't necessarily talk about the width of a column or the heart of a row. We're more likely to say the size of a grid track, so just keep that in mind. Now on either side of the grid tracks a special virtual lines, and these lines are present birth vertically and horizontally, based on the illustration. We have here these air cold. Yes, you guessed it Grid lines. Good lines are essentially used as guides to the terminal, where elements could be placed inside out grid. Now there's a little bit more to it than that, but for now, let's just leave it at that, and we'll cover more on this later in the course. We then have the concept of an individual cell, which is a result of two great tracks intersecting like this. This is known as once again. You probably guessed it grid cell. Another concept that we talk about as well is the green area. A great area is essentially just a collection of a Jason grid Cells in your grid and grid areas can be of different sizes. In this example, it's three by three, but it could easily have been won by four or two by three. And someone now everything was spoke about so far is about the great container, the element that has been configured. But what about the child elements that actually fitting into the script? Well, firstly, a child element in a grid is known as agreed on it. These grid arms could be placed into a grid in a number of different ways. We can have a great arm that fits into an individual cell like the one you say on screen right now whole. It can span multiple columns. They can span multiple rows. It could just spare all columns, taking up an entire right. You can also spend across all rose and take up an entire column. And as you can see, it can actually float over the top off others as well. And lastly, we could have autumns. Philip Grid area, just like the one you sounds great now, and this is why the city says Good lad is so flexible because we have so many options, then the last thing I want to show before we move on. It's spicy. So here's another grid. As you can see, it has a little space between each good track. This top of spicy is known as a grid gap. Now, as you will see later in the course, these great gaps are configurable for either or columns, all rose or both. You can tell live up configure an individual gap size between two tracks, so that's just something that could be marked. Okay, so now that we know all the terminology, I just want to talk about one more thing in this video. And that is Brad's. A support, basically, except Internet Explorer Sisters Grid seems to work well in most of the morning. Breads is we care about as long as you're using a vision that is being released within the last year or side. So just a quick disclaimer as well. I'm not going to say that all my material in this course works in every single browser, but I will say that it should work on most of them as long as the browser has proper support. I have tested most of my examples in most of the modern browsers, and they said to be fun, but just understand that I might have missed a few things. Also keep in mind that this lamb mode is still evolving, and as a result of that, they may be a chance that some of my examples may no longer work as intended. Anyway. If that's the case and you happen to be watching the video, please let me know. Give me a shed at and I'll do the best I can to fix those problems in the course material. So now that you know all the boring stuff to say, sis Grid, let's do the really cool stuff and get into the coded. So also, you'll in the next video 4. Creating Grid Containers: Hello, everyone. In this video, we're going to be looking at creating Greek in Tinus. So let's get to it. Okay, so we're going to start off with something really simple. And that is how to create your very first great container dance. Is this grid there to agree container types that you can create? One is a block level Greek container, and the other one is an in long green container. And then behave exactly as you would think. One fives, like a bluff of element and the other one behaves like in line element. I came with Children inside of it. So, firstly, before we actually do this, it says for it. Let's understand the minimum hate signal that we lied. So you need at least one parent element on a time. So in this case, I could do for the class container, and then you just leaders many Children that you want to have in your grid. So in this case, I have four numbered 1 to 4. Okay. Pretty simple. Same is the one below. I've done exactly the same thing. The only difference is I've given this class a class name off in long Fontana. right, Cool. So how do we said a grid container for the first time? Well, there's any value on the display property. Learn as grid. And when I saved this, you're going to see that the airport looks pretty much the same. However, this is now, in fact, a grid. It's a grid. There has no rows or columns defined for it. So what Sis's grid does all the brass? It does, I should say, under the hood is created one column and as many rose that is needed for the arms. Okay, and that's the default behavior. If you don't specify any columns, all rise for your grid that this is a block level one, obviously, because it goes all the way across the screen. But what we're about to see now is an inland vision. So if I come down and go display in line grid well, the long cred example, you're going to see the same result as above in terms off one column and four rows. But the difference is is that the width off the container is now only as wide as the content that's inside of it. So, congratulations, you've created your very first group container, and that's all I want to show in this video. So Seo in the next one 5. Defining Rows and Columns: how everyone in this video we're going to be looking at defining rows and columns, so let's get to it. Okay, so creating Greek in tennis is fantastic and everything, but it's not really useful unless you can actually create any columns or rows, right? So as we said by default, we get the one column and as many rises needed for free. However, obviously we want to be out of define these columns and rows ourselves as well as the sizes off those columns and roads. That's what this video is about. So for the first example, what I'm gonna do is I'm going to show you. Hey, we can define two columns inside of our grid that is both 200 pixels insights, uh, so over my selected here, which I've got two column container. What we're going to use is a new property cold grid template columns, and this allows us to define the track sizes for each column that we want. All right, so how we do that is sound Want the first column to be 200 pixels? We talked 200 pixels. Pretty straightforward, right? So if I say this right now, we're going to get one column That's exactly 200 pieces. What have up? We want to calls. So we just put a space between and add that second definition. So now we say we want the first call on track to be 200 pixels wide, and we want the second column track to be 200 pixels. What? And when we do that, we now get two columns, right? And how the items are distributed is they start from the very first column track and they moved towards the 2nd 1 And when there's no columns left, it collapses. Dance. One new rod. Okay. And this new right, we also get Frank. All right, so that's how we can define to Collins for our grids. Now, what if we say we want to keep the one column? However, we want to control the hides off a ride in a grid, right. We can do that using another property cold created template rose. And for this one, I'm gonna define ah, 100 pixels for each individual Roy that we have here. So for entitle. So just like the columns, we just got 100 pixels for the first road track another 100 pixels for the second road track and third and fourth just like that, I'm gonna do that. We now see that the second grid here has the rose at 100 pixels high. There you can open up with the bunion tools and changes for yourself, but I think it's pretty straightforward that it's going to be 100 pixels here now. What if we wanted to find both the column track sizes and the road track sizes at the same time? Well, that's pretty straightforward. We once again just come down and say greed template columns for the columns that we want and we want them to say be once again, 202 100 and then for the Rose. You got it. Great template, rose. But this time, because we have two columns instead of one column, we only need to define. So rise. So this guy's from just great are 100 pixels, 100 pixels all right, because two by two is four, which is the total number of items that we have inside out grid. So what's that say that we now get that two by two behavior? Okay, so that's the quick The unit on the stand is there is serious. We start making multiple definitions for columns and rows. The items will be distributed so in this case will be needed full rose. Once we made a second column, then it halves the number of rows that we need to define. So as a result, we added to the fund to rise pretty straightforward. The next one we're gonna have with, say, a full column definition and one right, Right. So greed Template Colon's. And we got 200 pixels, 200 pixels, 200 pixels, 200 pixels. And for the right, well, got agreed Template Rose, we got one of the pixels, just like side. I'm gonna do this. We get four columns and one right handed. So the full columns of 200 pixels wide and one right, he's 100 pixels. Heart Cool. Now, if we don't specify the rise to say we get the one above like this and we just place this down and we don't specify this individual run, what's gonna happen? What happens is that the road will only go as high as it needs to fill the content. Okay, that's what happens. But default. So we don't get 100 pixels high like we did here because that was explicitly said. We just get the minimum heart that's necessary for the road. Okay, so therefore the road track size is whatever the size of the ornaments. Now, what if instead, we wanted to define more columns than we had items. So we have four minutes here. What if I said I want to have five columns? What happens in this circumstance? So does that again. So the pixels, 200 pixels, 200 pixels, 200 pixels and 200 pixels. I'll just rolled in a little bit. So it's close to the spring Tamils, friend. And now if I check this out, it actually looks exactly the same as the one above it, right. However, if I pull that month of my, uh, the bugger off here on this slide dis across the screen for the moment. If I grab a little error and I come down, you may not be able to see it easily. However, there's actually 1/5 little grid bit there, this 200 pixels wide. So there's actually 1/5 column. The fine even know we don't have 1/5 item. If you look at the one above, you can say that there isn't 1/5 1 Okay, so what this means is that it's still there. So if you ever add a new autumn, that's going to fill that spot. But it's no actually used. The other thing is, if I shrink the window down, it's actually the greatest still gonna collapse, All right? It's gonna collapse because there's no audit inside that slot. It says, Just another thing to point out there is that if you don't have agreed on an inside off a cell than that, so is collapsible, Right? So I thought I'd quickly point that one as well. Now last one. Unnecessary rise. So I say I give this one a heart. Well, say 400 pixels. Imagine bottom. This is just so we can add some spice underneath the grid so we can see where it is. Margin bottom. We'll give grid template Colon's I'll say 200 pixels by 200 pixels. And in for the rose. I'm gonna add an extra arrived just for no reason. This will guy wants to get 200 pixels like so? So I've got you know four autumns. It's two columns, so the first tool fit in the first road, and then another two items will fit in the second road. Always defined 1/3 right that isn't necessary. What happens? So let's quickly check this, and I'm gonna scroll this back because I don't need to. It's a wad if a schooled in it's going to have a 500 people high grid because that's what we asked of it. If I once again open the developer tools and come down and look at it, you can once again see that that definition is there for the extra road. However, the great still collapsed anyway, because there's nothing inside of it. Go. So that's how you can define columns and rows for your grids. So I know in the video there, and I'll see you all in the next one 6. The grid property: Hello, everyone. In this video, we're going to be looking at the grid property. So let's get to it. Okay, so now that we know how to specify our rows and columns and the track sizes for both of those things, what you're going to find alot of the time is that you really wanted to find these two things at exactly the same time. Now the moment we know there's great template Rose and this great tip like columns. But what if we would just want a guy I want to doing by that exactly In the same definition . Can we do that? The answer is yes. We can use the new property called the grid property, to achieve that. Now the good property is extremely powerful, and it doesn't look more than just allow us to define rows and columns and their track sizes. But for now, we're just going to stick with that. So how do we define rows and columns and their track sizes using this new grid property? Well, it's pretty straightforward. So firstly, we just talked grid like so, and then you assume, at least for the moment, than your definetely the road definitions for your grid. So I say, I want to rose and 100 pixels high each. We just talked that at then what you do is you put 1/4 slash the flood slash There says, Now you be the column definitions society. I want to Collins at 200 pixels parts, one pixels, that's all you have to talk. And when you say this now you're going to get the results that I wanted, which waas to rise at 100 pixels hard and to Collins at 200 pixels wide. All right, that's over. When the cover in this video, I don't see you all in the next one. 7. Fixed and Percentage Track Sizing: how everyone in this video we're going to be looking at fixed and percentage track saucy. So let's get to it. Okay, so So file was saying how we can define the number of columns that we want for a grade and the number of rows that we want for our grid. And we had a quick look at how we can specify a track size for those grids. I want to focus more on the track sizing part in this video on where I'm going to start off with is how we define different track sizes, fair columns and rows using pixels and percentages. Okay, So for the first example, I want to show to fix columns where the pixel vase are different. Okay, so to come here on ago grid template columns and I can simply guy I want the 1st 1 to be 200 pixels wide and then the 2nd 1 to be threatening pixels wide. And when I do that, we can see that the second column is slightly bigger than the 1st 1 So supposed to get the the bug a rat, you would find that that's 200. And that story 100. Okay, don't get the butter at. Not for something like that. You can check that for yourself, all right, but I just want to do the same thing. But this time for Rory's. So, firstly, I'm just gonna create greed to like columns, and we're just gonna add some column side after the find as many rose. Because remember now the more columns we have, the list rise. We have to define. So I'm doing that. And then they great template rise and we'll say one is 100 pixels and the other one's 200 people's eyesight. We check that at now. You concede that the first right, he is under pixels high, and the second Roy has a different track size, which is turning people's okay pretty straight forward. Next one, I want to look at how we can do this using percentages. So So I want to columns off different percentage size columns, 40% and 50% right, so it's 9% of roll off the Greek container. I say this. We can now see that we've got a little bit space in the end, which would be the 10% that we didn't include and then The second column is a little bit bigger than the first, because the first ones 40% off the overall size of the container and the second column is 50% pretty straightforward once again that the last one, I'm just gonna do it with Rise so got hot in a specified 600 people's for the height here. Just so we have a fixed size and hide. Once again, I got a great tip like columns instead, 200 pictures by 20 pixels. Just like so And I'll Go Grid template Rose. And for this, one of the 30% for the first road and 50% for the second round when I say that we can now see that if it the full height here. So that's about 20% of remains space that we didn't define for arose. And then the second row Hughes, about 50% high and the first roads about 30%. Okay, so let's say you can define track sizes using pixels and percentages, and that's running in this video, and I'll see you all in the next one 8. Track Sizing based on Font Size: Hello, everyone. In this video, we're going to be looking at track sizing based on font size. So let's get to it. Okay, So I'm not gonna explain what an E. M. Unit is or Aryan Unit is in regards to font sizes and things of that nature, I'm going to assume that you guys already know this. Okay, so no database, my dominant or I'm gonna say is for this particular example for the root of the document. I've got the fun size being 10 pixels. And for each Greek container, I've over written it to be 20 pixels. So when we use the e m examples, it's obviously gonna be based off the 20. If we use the Aryan examples, it's gonna be based off the 10. Okay, sudden with that said, I'm going to create in this first example two columns where the track sizes are 10 p.m. And 5 p.m. Perspectively. So, like this grid template columns 10 a.m. And far be in. So as a result of using AM units 10 times 20 his 205 times 2800. So what's gonna end up happening is we're gonna have to columns where the first column is 200 pixels wide and the second call is 100 pixels. What? So let's see that. And that's kind of what we've got here so far. Now quickly check this and hover. You'll say that now we've got a 200 pixel wide column there, and we've also got a 100 peace Award column. So that's how we can still use an unions to deformed. Yeah, track sizes using on the columns will do the same for Rose here, just to be complaints that greed template columns on the specifies 200 or 200 again, just to just the number of Roy definitions I need to make green template rose and will make this 15 p. M. And 6 p.m. That's what first right being 101 100 pixels high and the 2nd 1 being 120 pixels high. Just six times 20 is 1 20 So save that and now fight quickly check. We can see that the first road is 100 pixels high, and for the second row it's 120 pixels high. Okay, very straightforward. Once again, that's use the Aryan units come down and God agreed to in Play Coghlan's and go for this 1 10 R E M and 20 area. So once again, because the font sizes 10 pickles appeared for the document, it's going to be 100 210 times. 10 is 120 times 10 is 200. And that's exactly what we get. And we can compare that to the 1st 1 at the top. But moreover, River and check that once again you can say the 100 and then the 200 cool. And lastly, just to be complete, we'll do it for the bottom one as well, since grid played alone's 200 pieces toe pixels, grid template rose. We'll go eight room this time, so 80 will be the heart of the fist ride and then 12 are AM, which will be 120 if we check this now, the fish right should be any pixels high, and it is on the second right should be 120 pixels high, and it is so That is how we can control the track sizes off columns and rise using a m an aria. And that's what I'm gonna do in this video. I know catchy in the next one 9. Track Sizing based on Viewport: Hello, everyone. In this video, we're going to be looking at track sizing based on view port. So let's get to it. Okay, so I'm going to assume that you guys already know your viewpoint units. Therefore, you know what a V W unit is? What every hates unit is When I think max unit is every men, I'm not gonna go into what they will laugh if you don't know what they are. You know, look them up yourself, or you can try and raising them through this video because you gonna previous work out what it is from what I'm doing anyway. Probably with that said, Let's get started. So I want to do for the first example is I'm going to create two columns where the track sizes are 10 VW and 30 VW. So grid template poems. 10 VW 30 VW. Just like that. When I saved this, you're going to see that Basically, this is 10% of the width of the window. This is about 30% as I grow the window, just like so you're going to see that the columns. Great with it. All right. Cool. Certainly you can specify two columns with the video unit, you do the same four rows. So for this one to give a heart off 50 VW just so we can see that it's going to grow with it and we'll go grid template columns. And this will just specified 200 people but one pixels and green template rose. I'm going to specify once again 10 VW and 30 VW just like that. If I run this, you can see that basically, the heart off first cone is about 10% of the within the window. And the heart of second column is about 30% with the window. And once again, as I grow our this wind I in terms of with the hard off the rise t t to grow as well as I shrink it once again the heart of the Rose shrink with it. Colchester, VW Unit Next one we're gonna look at is the V hygiene it. So for this, I just got grid 10 plaids alone's and we'll go 10 v hey h and 30 VH just like then scroll down and we'll get this to the top of the screen here. So now if I stopped pulling up the heart of the window. You'll see that the width of the tracks shrink with it. As I pulled back down, you'll see the decries cool. Once again, I'm going to the same thing for Rose is at this time I'm gonna just quickly copy and paste what was above and change it to VH. I said, save this. Come there. The 4th 1 it's going to look similar to the one above it. That once again, as I shrink, the higher the window So to the rose. And as I grow it, you'll sit of gross again. All right, all right. Says the V Hygiene in inaction was check out. ReMax. So for this one, I'm just gonna go greed to play rooms. I will go 10 v max and 30 Freeman, Three men v. Max er if I knew how safe that what you going to say is this will change based on the dimension to the window. So at the moment, the heart is bigger than the wits, so we'll start to shrink a little bit. But after a little while, you say that it will stop shrinking. That's because the winds of the window is now bigger than the heart. Fun answering the went through the window in. You'll see that once again it starts to shrink until it gets to a certain point to which once again, it will stop shrinking. Because thehyperfix them day is that big. Even though is all right. As I pulled back out, you'll say things start to grow again. So at this point, nothing grind is nothing grows nothing. There is nothing graze. So we get to a point where the heart of the window is bigger in the with and about now in the Yeah, that's the connection. At four columns, we do the same thing once again for Rose, so I'm going to grab. The same is above. I sat in change everything to the max, the night's fee max and the next, you know, save that. And yep, so coming down this will now grow and change based on dimensions. So once again, if I with these down, you're going to see it stopped shrink. Now it's gonna have a little bit issues in terms of staying on screen. Here it is a shrink. It you look into a point where it no longer shrinks anymore. because the winds and the window is now bigger. So this points number shrinky as I decrease with the window starts to shrink again. This is basically stuff that already happens with other elements using these units. I'm just demonstrating how they work with grids, says the V Max unit. Then we do exactly the same thing for amen, so just copy and paste. This Dan, judging to be men and they made basically were based on the minimum dimension. So this time come down. The width will be based on the smallest size. Well, the smallest dimension. So this second last one down here. So as I shrink, this has nothing to do anything. It's just going to stay the same size until I reach a certain point, which is a bad there, where the heart is now smaller in the with. So therefore it begins. It's a shrink. All right is a it's more. It's more on smaller. And then it dries. So said Point, where it's now considered bigger than the winds. And then it one growing, he fed up all right, that's four owns, and then once again, we could do the same thing for rise to stop. We have before Angel this to three men, men and, you know, in and save Come there the very lost one. As we once again start to shrink, you're not going to see any change here. Let's not forbid. But as we get higher up now, you can say it's dying to shrink. All right, if I make it really thin this way, then you'll see that the heart streets again. Cool. So that's all I want to show in this video in terms of how you can control your grids using the important Eunice. So I'll see you all in the next video. 10. Auto Track Sizes: Hello, everyone. In this video, we're going to be looking at water in track sizes. So let's get to it. Okay, So, up until now we've looked at how we could explicitly define the size of a track forever rows and columns. But what if we want to make a specific track? Just be as big as it can be. Basically available space in the grid as well as this. What if we wanted to handle a situation where we might want multiple column or attracts to be sized evenly? Can we do this? The answer is yes. In this video, I'm going to show you one way of doing it. Using a special value. No, as order. So in this first example, I'm going to show you how you can define to evenly SARS columns using the order value. So coming over here to go greed 10 play columns, I mean, it's time. Order, order for that. As you can say, they're now exactly off even saw its now. We could have been changed this using percentages. But as we would find as we go along, the more columns we want, the more difficult it is to the final percentage, right? Whereas we could have four lots of order on and it would just work. We don't have to go for lost 25%. Or if we had six, they were talking about 16.666 or whatever it is you know, on then we have two major passangers. Whereas if we use auto, we just do or die six times. And we got six evenly sauce columns, right? And just to demonstrate this, we can also do the same thing for Rose. All right, so I'm gonna give a high off the 2nd 1 to say B 200 pixels high and we agreed to in play columns and I'll stick with the order. Order is above here. And Feroz, we can do exactly the same thing here. So you know what I ordered, right? Because the heart is 200 pixels, then the height off the road will also be 100 pieces each. Say, if I check this, but bring you the bugger we can see now that each road is 100 pixels in height on. We didn't have to explicitly say We just said order and it did it for us. cool so we can do the same thing for the next one. So we want in this case, three. Even columns of even saw us. We just got greed. Tim, play columns. Order! Order! Order! You thought that. And now we get three columns right on the fourth item goes into the first column with the Knicks. Right? All right. You do the same for Rose. Just like above, we had this instead of 200 pixels high, going to make it 300 pixels high. That's to make things easier myself. And we can also go then. Grid template. Rose. Order, Order, Order! Do we check that at now? I've got three. Rise that 100 people's higher. Cool. So the next one, let's go four combs wide. So that's pretty straightforward. Agreed Template. All of them's. We just put what I full times just like that. And there was got for even columns. So every arm fits in H call. So one right full homes. Now you can use the order value with other sizes. So I say we wanna have one column B A fixed value, say, 200 pixels one and then we wanna have another column that order What's gonna happen under that circumstance? So let's check that out. It's a great 10 flight columns and will go 200 pixels and order. And what actually happens is we get a column that is exactly 200 pixels wide. And then for the next item, it just spends all the way across to as much as it needs to the feeling the remaining spice who pretty straightforward there. So he's order into, basically, take up the remains space. If you've got fixed values as well now the last one, I just want to quickly point something out, and that is, even if we specify order for each column, there will be times where column may be bigger than the other, and that would be based on the content that's there. Sasae. I have greed, Tim flight columns, and I set this to order order and just like that, nothing special. Here you're 123 and then a big number. However, what if I was to riches the width off this grid and say, make it 100 pixels? Oh, no, we'll make it 1 20 All right. If I say that you now see that This is Grun, all right, and this one has shrunk. So or maybe not necessarily just want shrunk. But this one has grind. It's grown because the content is inside of it. That's a very, very wide All right, So auto does. Taking the consideration the content. If the content is very, very long, right? That's the last thing. I just want to point out there, and that's why let us say in this video, so see you'll in the next one. 11. The Fraction (fr) Unit: Hello, everyone and this for you. We're going to be looking at the fraction unit, so let's get to it. Okay. So understanding how order it can help us create equally sauce tracks is great and everything, but it has one very important limitation. What is it? D site? Well, let me answer that by asking you this question. What if you want to have one role column track between ice the size of the other, maybe you want to be three times the size with order. We can't do this with only a best mate tracks equal size, and that's it. With that said, the W three c introduced to do size a unit known as a fraction. And how this fraction works is that just like auto, it will attempt to take up the room a space of the Greek container. However, how much space it takes up can be determined by racial lodging. Now, because of this, there will be some mathematics shoots in this for the I. But I will do my best to make the method makes a simple as possible. So let's get started. And before I write anything, I just want to quickly point out that each Greek container in this video is exactly 600 pixels. What? Just to make things easy to calculate. So for the first example, once again create to evenly size columns. But this time we're going to use fractions. So I'm gonna come over to my select up and a guy agreed Template columns this time was gonna put one in a one on this to represent the ratio off Oneto one. And then after each number, we just put if our to represent fractions. But save this, we're going to say we have to evenly size columns, right? If I open up Tobia and check this out, you'll say that they 300 pace because the ivory grid is 600 pixels. So therefore, we have two columns off equal with 300 pixels. Go. Now we do the same thing for Rose, So I'm gonna actually copy this up here Just so many things easier on myself. A copy pace well, at a heart here is well and say, Well, guy, 300 pixels. And then basically, I'll go agreed. Play rose and it once again I got one. If I wanted five, and when I say this, we get to evenly sauce rise as well, because the heart off the grid is 300 pixels high. Each row is going to be 150 pixels high. Okay, go. So if the next one I'm going to show you what happens when we use fractions than aren't even I the ratio is not a 1 to 1. So do that. I'm gonna talk greed to play columns one if I for the first column and then we're gonna make the second column twice the size, and we do that by using a two year s. So we're saying the 2nd 1 is twice the size of the first. I were using Rachelle of the If I say that we now get this down here, right, So if we check this out, basically it should be 200 pixels by 400 pixels. It is Now, you can come feel like this. Is that what you generally do is at the numbers off all the columns that have, if are after it together. So we got one plus two, which is three. And then we got one of the three so 1/3 and 2/3 right. That's how much off the spice that each column will want to reserve. So because we have 600 pixels here, 1/3 off 600 is 200 and 2/3 of 600 is 400. And that's why you get a column that's 200 pixels wide and 400 pieces want. Okay, that's how we calculated. Now we'll do another similar one. This time we'll go. 123 So greed to play columns one if, ah three, if a When I saved this one. Now we're dealing with one plus story, which is four. So it's 1/4 and 3/4 so 1/4 of 600 is 1 50 and 3/4 of 600 is, well three times 1 50 which is 4 50 So if I come over and check that out in the window, we can say that we have the first column, which is 150 pixels wide, and the second column is 450 pieces. Why cool now? Obviously, because we're using racial lucky. We don't always have to use a one to something we can use, you know, to the full 3 to 2 or whatever said I'm gonna shoot the show that so we agreed 10 plight columns and we go to if I and forever just, like, say, if we save this this is essentially the same as when we used one. If I and two if our Because If we know a racial logic to If, uh and for if I could be representatives one if i into if I So the result of this will be that the first column, still 200 pixels one. And the second column will pay 400 pieces. Wine. Okay, because if you think about it is to over six and 4/6, to have a six is essentially 1/3 and Forever six is essentially do that. Okay, so that's how you get that. Now, obviously, outside off using just fractured based columns, we can combine them. We fixed size columns like so? So we can say we want the first calling to be 100 pixels inside. The second column would be a fraction, all right. And when we do this, what's he going to see? Is that the fraction part of it acts like what I did so we got out 100 pixel wide column there and then we've got 500 pixels left for the second color. Okay, Sillitoe, order does in that regard. Next one, we've got the same example essentially. But you were using percentages. So agreed thin flight columns. This time we've got 20% on one. If I, at 20% of 600 is 1 20 I just know that off my head. So if I come down and check that, we can come to hear and see that the first columns 1 20 says 20% off 600. And then basically the four Eddie takes up the remains space. You did this for the viewpoint units. You can do this for the font size in units and all the other examples were saying, I'm just showing you a pixel based on a percentage based column next to a fraction call, but just know it's available fall Also all the days are available for Roswell. I've just simplify it, but sticking the calls now, we could also have to fracturing columns combined with a fixed column and how things that calculate it could be a little bit different there. So find out. God agreed. Template columns say one of the pixels again. And I got one if I But then I go to If I All right, what's gonna happen here is that we have one column that's allocated 100 pixels off the 600 . So therefore, we've got 500 pixels left over and that 500 pixels is then divided into these two columns. It could be mourn that the second column requires more space than the 1st 1 So how you would do this is that you go, OK, we're taking the 100 away from 600. So we got 500 then, you guy. All right, we got three. So 500 divided by three is roughly 166 I think. All right, so you got one times 1 66 So the second column in this guy should be 166. And the 2nd 1 the last one sorry, would be twice the size of the 2nd 1 So 1 66 times to it's roughly about 333 Okay, so funny. I saved this. We can verify that if I scroll down, we say we go. It at three columns. If I over over, you'll see the 1st 1 is 100. Probably asked it to pay. The 2nd 1 is, in fact, that 166 it's 1660.66 but you get the point. And then the last one is 333.33 s so insightful, It was calculated for us on the fly. We didn't have to use percentages to do this. Okay? And that's the fact that you is that we can do this without having to ever use percentages . So that's that example. Now, for the last example, I just want to quickly point out something that may not be obvious to you. You fished play around with this, and that is what happens if we just have one fix to column and then a fraction column. So we've seen this example array just like that. So if I say this and come down, you say you've got your one fix column and then you've got your fluid column like that, OK, which is the fraction. However, if I changed it still like 100 or 1000 or 80 of that nature, it doesn't really have an impact it doesn't have an impact because there's no other columns that it needs to calculate the remains space against because we already know that that's fixed. So therefore it gets okay. Well, I'll just goes biggest possible all right, says the thing. Just to understand their that this when there's one column with a fraction it it could be a thing. It wants to bay because at the end of the day, it's gonna just try and cry was because it can. All right, so that's what I want to cover in this video, and I'll see you all in the next one. 12. Auto vs Fractions: Hello, everyone. In this video, we're going to be looking at fractions versus order. So let's get to it. Okay, so now that we know what order conduce for us and also what fractions conducive for us other only quickly cover some of the similarities between the two and also the differences . So you had a better understanding of what to use and when. Okay, so in terms of similarities, if he used a fraction against a fixed column on its own, say something like this, which I'm pretty sure I've already shown so say we got 200 pixels wanted. Five. This is essentially the same as running this grid template Columns 200 pixels, or I. If I save this, the body is going to attempt in the second column to grow as big as they can. All right, says one of the similarities between the two. If we use them side by side on, they also act the same. Why? So if I got agreed Template columns one. If I want. If I and then greed 10 play columns or are you know what I and check that at you'll see. They also go 50% h because we're using themselves by side right now. That's a Sfar as the similarities gun In terms of differences, they behave differently when they used together. OK, so what will happen is if I go Agreed 10 play columns for first column on site or tow. The second column will say fraction. The fraction very dominates the auto value. Okay, so the order value will go. Okay, I'm next to a fraction. The fraction has more power than me. So I'm gonna shrink, is small as I can, and therefore give the remains space to the fraction. Now, obviously, this may be good or bad, depending on what you're doing, but just know that that's how it works. They are just to show you one more example of that in action. So I wanna have three columns where I want to to be a smallest possible and the middle one to be is biggest possible. We can also do this and I need to remove semi colon that So there might be situations where you want the left hand side and the right hand side to grow on Leah's bigas they need to and then basically whatever you want in the middle to fill out the remains spice. That's how you would achieve that. So that's the difference between using order and using fractions, so I'll see you on the next video. 13. The minmax function: Hello, everyone in this video, we're going to be looking at the min Max function, so let's get to it. So, up until now, we've seen a lot of different ways that we could specify a track size for a specific row or column track. But sometimes what we really want is to be out of restrict a specific track to never be smaller than some minimum size and to never be larger than some maximum size. With this in mind, the W three C specification created a new CSS function just for this purpose. Called the Min Max Function. The Min max function is a very powerful function that takes two arguments, a minimum size value and a maximum source. Very now, in regards to say, says grid, the minimum value will ensure that the grid track can never be smaller than this failure. And obviously from this, you can probably guess what the maximum value would do it. Now I'm just going to show a few examples of how this works in this video because, to be honest, if I was to explain everything about this function in this video, it would be a very long buddy. I so I'm going to break it up a little bit so you don't get overwhelmed. Okay, so let's get started. So for the first example, I'm just gonna show two columns where the second column is going to be 100 pixels straight . No change about it. And the first column will bay a minimum value of 200 pixels wide and the maximum very off 400 pixels wide. So let's see that in action. It's gonna come over and go, agreed Template columns. And then we just thought min max tease the min max function and throwing parentheses. And so the parentheses. We set the min value first. So 200 pixels like that, a comma and then 400 pixels for the maximum. And then we just got spice 100 pieces just like that. What we do this. We get this result that the moment it is basically spending out to its maximum size. And that's because with the window, however, I'll pull this back at if I select it while it's still in its maximum, you'll see that 400 pixels one. However, as I begin to shrink this window, you're going to see that it continues to shrink until a certain point. And then you check that and you can say it's 200 pixels. That's what's honoring the men and Max sizes. Pull us back out so say you can set a min very and a max way, using pixels for a column that you do it for Rosa's well so I can come down and go. So I want the heart to bay 50 page. And we agreed to play homes. I mean, Max. Ah, sorry. Not mad Max one if I want. If I they will go, Agreed Template Rose. And make that. I mean Max off 200 pixels by 400 pixels and then a space wanted pixels like that. And save this. Well, what you gonna say at the moment is a very toll grid. But the heart of the first road will be 400 pixels high. Okay, but as I shrink the heart off the window, you're going to see the heart off the grid shrink. And at a certain point, you'll see the first Ferrari begins to shrink as well, until it reaches 200 pixels high. And you can see that day, huh? So That's how one is that. Now you don't have to just use pixels. You can use percentages as well as the maximum value. So say I wanna have a column that has 200 pixels, is the minimum like so and then say the maximum is going to be 50%. In fact, I'm one like this. 100 pixels on. And then for the 2nd 1 for now, Site 200 pixels like that. Good. If I say this, you're going to see this result here, and at the moment it's basically Sisay to be 50% right. So if I make the window water, it will stay at 50% a long time, right? However, before I decide I want to go the other way and make it smaller. So grab this and pull it down. You see that it states of 50% for a while until it hits 100 vessels that stops guys. There's a small point between this point and up to a certain point where it's not 100 pixels and it's not 50%. It's somewhere in between, and then eventually, when it hits of it 200 it's going to start growing at a write off 50% fight. And the reason why the 200 point is a point where it's 50% is because the second column is 200 pixels wide. So if I was to make this 100 say you come all the way down. So I scrolled it all the way down, so it looks the same. You'll see that starts growing in the right of 50% it basically immediately cool so you can use percentages. Now we can do the same thing for E M units, Aryan units and all the viewpoint units that you can check that out for yourself. That's up to you. I just someone to go through the moon because there's a lot to cover. So my next example instead will be when we use the maximum value of as a fraction. So if I got greed, tinplate homes and I mean Max and in this guy someone side 1 50 pixels and we'll say one if I and then 100 pixels like that, uh, you. So when I say this, we can scroll down and basically you'll see that this column gross as far as it can, right? based on the available space. However, once we reached in to, say 100 pixels, it's not gonna shrink any further. It's just gonna sorry 150 pixels. It's not gonna shrink any further. Okay? So if I check this now so humble, reverent, you'll see that it's 150. Cool. So that's that. Now we could do exactly the same thing for order, because if we remember what I behaves exactly the same as a fraction when next to a fixed column. So I think you mean Max would sigh 1 30 just to be different. And then what? I never say this and strolled an. It's going to look the same as the one above it until we reach a certain point, all right? And then it's gonna shrink just a little bit more because we asked them in value to be 1 30 All right, so we could see there. It says 1 30 Cool. So take use, or does the max value as well. However, you can use the order very for the men. All right, so what that does is it tells the track to basically be a smallest. It can be and basically then growth to one of the maximum result is. So in this case, I'm gonna say three under pixels. So what, this will do you say go between a small as you possibly can and up to 300 pixels. Fine. Now look at this and scroll down. We can say that it's 300 pixels at the moment. Very for that like set, so is 300. But as I start to shrink, you'll see that once we get to that point, it's just gonna continue to wolves. Almost a handle that there it is. It's going to continue to shrink down until it can't shrink any further because the content is going to be cut off. I don't cuz order value as the minimum from in max function. And then lastly, we'll look at the fact that you can actually use the Min Max function to the fun. Both columns, right? So far without you said it for one column track, but we can use it for multiple column tracks. So they agreed. 10 play homes we go, min max. So the 1st 1 is 200 pixels on that fire. And then we got Min Max again and we'll say 100 pixels and one if I right. If I scroll into the real last result, it's going toe. Look, even at this point, until we hit the first column B and minimum size of 200 pixels. All right, so then, once that happens, the second column will begin to shrink until it reaches 100. Then we'll just stop cool. So that is the Min Max function from a very high level. And that's all I'm going to do in this video. So So you're older next one. 14. Minmax function gotchas: Hello, everyone. In this video, we're going to look at Min Max function gouaches. So let's get to it. Okay, so the mid makes function is quite powerful, but there are a few things that I noticed when playing around with it that I thought would work a certain way. It actually didn't. I guess you can consider them a few gotta, so to speak. The first thing I notice is when I specified percentage or some viewpoint unit as the minimum and then use a fixed value as the maximum like site pixels. What I expected to happen is once I hit the maximum limit by the pixel limit, it would just stop there and not continue to grow any further. But that's actually not what happens. So just to demonstrate what I mean, if I come over to my first example when I talked grid template columns and I got a min max 48%. It's the minimum and then say 300 pixels is the maximum and then 20% as the second goal we're expected to happen is that the column with will go at 80% until it reached 300 pixels . But as you can see it's bigger than that. So if I now have come down and hover over well, you can see right there it's three or three. All right, so it's already big up. Then what? We asked Tau Bay in terms of its maximum size. I can't go. And I saw this problem was well with viewpoint units. So if I got greed Tim plight columns, I mean Max and say 40 VW and say 200 pixels, 20 VW as well. We get exactly the same problem. So if I open this out and I checked the width of this well, you can see there as well. It's over 200 pixels wide now. What does work is when we use the end units and Aryan units? So if I got grid template columns mean max and say 10 e m and go 300 pixels and then we'll have a second call of 100 pixels Thought that and I give this a font size offside 20 pixels . If I save this, what should happen is that we get a minimum of 200 pixels wide and the maximum threat of pixels for the reason why is 200 is 10 times 20 is 200. If we check it out, we can say currently it's to 79. But as I shrink the window eventually it stops and stops at the 200. We asked, If I try to grow it and make it longer, you'll say it stops again and that will be 300. So that's what he wanted. Yeah, R E m units also get on it here. So if I come down and so I I wanna have greed, Tim plight columns Min Max and we'll say 15 r E m. And we'll say 200 pixels in this circumstance and the under pixels. Now, the fun size for the page is 10 pixels, So this would be 15 times 10 which is 100 and 50 is the minimum, and 200 is a maximum, right? So if I now save this, we can see that the maximum here should be exactly 200 pixels, right? As a shrink, it generally got a small as 1 50 As we come down, it shrinks stranger drinks and then stops. And that is 1 50 Okay, so it is honoring a M and R E M units, but it does not, on a percentage, and Vieux port units. Now, my understanding why this happens is because once the minimum value calculates itself to be bigger than the maximum value, then the mid max function becomes essentially I mean function all right, or a max function. Sorry where the maximum value is Take it. Okay, so because 80% yeah, off say a number much bigger than 300 ends up being more than 300 pixels. Then it takes that value over the 300. Not sure why they decided to choose it that way, but that's just how it is. Okay, so that's one of the first things I noticed. Now what also knows is that we can't use any fractions as the moon value either. A guy. In fact, the browser won't even render the grid. So if I come in and I say greed, Tim, play columns and say, for example, Min Max one If I and 200 pixels and then we just got one a five second one. When I run this, you need to see that the great Actually, it doesn't even do anything. It just sits there being what it was before. That's because if I open up the bugging tools and I select this grid in the heist email, you can see right here it's a little exclamation mark and that indicates that the rule isn't valid. Okay, now, I would have checked this up in the specification. It does say that it doesn't currently support fractions is a minimum value, but that's actually coming later. That's fine. The standing eso. Obviously, with that in mind, it doesn't work if we use two fractions together, so forget agreed to imply columns in the mean Max save one. If I two if, uh, one. If I This also won't work, all right, That makes sense. Because, as I just said, we can't use fractions as a very The other thing we can't, which is probably the last thing I noticed is we can't nest in Mexico, holes inside of each other. So if I got a grid template, colors goes min max se, I want the minimum here just to be 100 pixels. But then, for the maximum, I want to toss up between heavy, be a minimum of 200 pixels and say one if I or something of that nature. Alright, so we're using a min Max call. It's I have another min Max call and we're using that new Max Coal to define the maximum off the other New Mexico. Right? You think maybe this could work? Unfortunately, it doesn't. Okay, It's still just shows a great that's not done. Probably so. That's all I want to show in this video and a catchall in the next one. 15. Understanding max-content and min-content: how everyone in this video we're going to look at understanding Max content and men content . So let's get to it. Okay, so sometimes you want to control the size off your tracks based on the content that's inside of each track. What I mean. But this is so you wanted track to grow to a size that is just large enough to fill in your content but not grow any further. We can use to very special values toe. Achieve this, and they are men content and max content. Now, the difference between men content and max content is that men content will wrap text so it will be as small as possible inside of your grid. However, Max content will not wrap the text, and the result could be a that will grow to be quite large. Depending on the Amana text, you have might sound a little confusing, but the best way to understand this is to look at some examples. So in this first example, one that do it set being content for the first column track and that will affect this cell with text in it. And then we'll set, say, 200 pixels for the second column track. So let's do that. So if I come over and go grid template columns and we dio mean content and so the pixels just like that, you're going to see that this first column basically wraps that takes down right and it wraps based on the fact that we want to make this as small as possible. Now it's this certain with because, say, this term here reasonably is quite a long word. So therefore, it has to take that into consideration when sizing this column train. Obviously, if we used a bigger would than this would be water if we used a smaller word, this would be shorter. The idea is that the column will try to be as small as it can possibly be. Uh, that's mean content. Now, The equivalent of this is to use the min max function with men. Content is both parameters. So we could go grade 10 flight columns. We can go min max, men content and in content like that, and then we could cite 200 pixels. I want to say this we get the same result. Okay, so you can use one or the other. I tend to just tightening content, and I haven't seen any browser issues with that so far. Now, Max content is a lot different to men content in the sense of how it trades text. So if I come over and say I agreed Tim play columns, and this time we got max content and then 200 pixels. When I saved this, you're going to see that the text does not wrap at all. In fact, it ends up being one very long line on a At the very end, you've got the 200 pixels. Okay, so that's essentially what Max content does in comparison to mean content is that it just doesn't suppress the text in any way. And obviously, the equipment off this using the mid max function is Teoh. Use great tips like columns and then Guy Min Max Max content max content and in 200 pixels , and you get the same result. Uh and then lastly, we can use Min content and Max content together. So basically create a situation where, based on the width of the window, the text will wrap itself and stay between its minimum size and its maximum sauce. So if I got grid 10 flight ha loans go min max Men content Max content and inside 200 pixels. When I say this when I have a situation where we do have some wrapping and we also know off minimum size, right, So we get the best of both worlds here. So if I come and I say shrink the window, you say that the column will strength all the way down just, like, say, huh to its minimum size. And then if I grow it out and say we grow even further and this ellipse once again grow back out and say We want toe, make the window bigger, you'll say it will continue to dry until essentially hits it's max size and then it won't grow any further. Cool. So that is the men content value and the max content value. And that's all I'm gonna show in this video. So see you all in the next one 16. The fit-content function: Hello, everyone In this video, we're going to look at the fit content function, so let's get to it. Okay, so is there. We can use Min content and Max content to define the size of a well groomed tracks based on the source of the content. We've also seen that we can use both of them together in the Min Max function to create a track that can grow from a small as possible so his large is needed to fit all the texted one lawn. But sometimes you may want to be able to restrict how what attract can get even when there is a lot of text. For example, say that regardless of how much text exists, you want to be able to ensure that a particular column track never grice more than, say, 300 pixels wide. So you're probably thinking that you could try something like this if you come over and go read template columns. But so and go men Max and you put in in content and then saith around the pixels front. Let's put when I five for the second column. But the problem is, when we do this, you're going to see that the column grows to 300 pixels, regardless off the text. It's inside now. This is not what we want. What we want to do is make this column B only is what is needed to cut it for the text. But once we hit this up a limit and in the case of this example, it's the threat of pixels. We want the takes, the rap. So can we do this? The answer is yes, we can. The sisters Greed specifications has a function for this purpose. It's called the Fit content Function. Now the fit content function takes one parameter, and they're parameter is the maximum limit that we want out track to grow to before it stops and the text inside of it begins to wrap. Okay, so here we can use it is like this if I come over to my second so like to hear grid template columns, and this time we just taught fit content and talking 300 pixels just like that. And when I do this and save, you're going to say that the column is a small as the content it's inside of it. However, if I go to the mock up here and say, I'm gonna coming out this one here like so and we'll grab the second line and we'll save this. Now you can see that the content is water than 300 pixels. However, the track only goes his forest surrounded pixels and then the take stops to wrap. There's also a middle ground of this. So if I decide to have slightly less text here, so in the case of this one here and save that, you'll say it's a little bit bigger than what we saw, what we had as the one. But it's a little bit less than 300 pixels. Okay, so this is the fit contents that fit content function back to the one here. Now you can use it for other values as well, not just pixels. So he's percentages. Get grid template columns, fit content and side, in this case will cite 50% one in five. Once I saved this once again, you get the minimum size, however, for come down and are coming out the text here and do that. Now you'll see it goes very why, until it reaches 50% of the container to which then it begins to wrap. As I resize the window, you'll see that it stays at 50% the shrink and selling. Right now This works for all your view port units, your E M unit in your Aryan unit as well. What it doesn't work for is when you use auto or use fraction. Okay, so let's quickly see that inaction. So I come over and greed tip like columns fit content. Order one if I and I'll do the same here. Grid Tim Plight Columns fit content one. If, ah, if I save this, you're going to say that the great doesn't even work it all right? And this is because these two examples zero. They generate an era. It's not valid. Why is it no valid? Well, let's think about it. What is order in terms of the size order is whatever it needs to be right. In terms of size, you can be as what is possible, or you can be as small as possible. All right, Next. Oh, fractions, usually as small as possible. But the fit content gets confused because it wants a fixed limit. So therefore it doesn't understand what water is trying to do so. It files same one do with fraction. There's no actual fixed limit. So once again it gets confused and can't generate the grid. So there's just a couple of things to watch out for men using his function. So that's the fit content function, and that's it for this video, and I'll see you all in the next one. 17. The repeat function: Hello, everyone in this video, we're going to look at the repeat function, so let's get to it. Okay, So up until this point, we have had to talk about the size of attracts for each Rome column we wanted in a great container, even when the track size is always the same. For example, if I wanted five columns over 100 pixels, I would have to write at 100 pixels five times. Fortunately, there's a better way of doing this. And that is why, using a new function called the Repeat Function Now, the repeat function works with trackless was a trackless, Do you ask? Essentially, a track list is what we've been rotting when the phony a rows and columns this whole time. So what I mean is, if you look at what we've got here, which is green template columns, we've got 200 pixels for one track size and then 200 officials for another track sauce. These two together can be considered a track list, but on top of that, you can also remove one size, and this, on its own, is considered a track list. We could also have maybe potentially three like site and they're all considered trackless. And we could also use different values. And this could also be considered a track list. Okay, so now that we know, what attract list is how can we use this repeat function to make it a lot easier when we want to repeat a track list? Say, I wanna repeat that twice. Okay, so we just talked, the would repeat. And then we specify the number of times that we want to repeat a specific track list and then we use a comma. And then we talked in the track list. In this case, we just want to repeat the size of 200 pixels twice. And when we do this, we're going to see no difference up here. And that's because what we have before was two lots of 200 pixels. But now we've said, Just repeat 200 pixels twice. Okay, Now, this is the same for Rosa's well, but in this video, I'm just thinking two columns. So another example that we can look at is using percentages. So if I grid template columns get repaid, say three times will go 25%. All right, I want to do this, it's going to give us three columns that is 25% right, and this is the same. Is if we wrote out this be ready at 25% 25% and 25% just like that. Med. Afraid to do that 10 times it would get very painful. So that's how you can use procedures as well. Now all the other tracks are the values that we can use, such as few port wits, people, heights, E M units, Aryan units. All those things could also fit into this track list definition as a second parameter. What also could be passed in is a fraction So great template columns and say, on this occasion, we want six columns that are equal songs. We just do this and we get exactly that. Six columns that offer equal size based on the roof of the grid. Cool, but we can also do this. We can use the min Max function, so agreed to imply columns and repeat with, say, four times men Max, 200 pixels and one. If I don't do this, you could You can see why that did not work. Repeat four times min max off. Got the comma there sort of it that now we get four columns, uh, 200 pixels being the Milham. If we shrink it fly so we can say its that shrinking and it'll dry a swell Well, we can also do this weekend. Use multiple tracks sizes that we saw before in a trackless, and we can repeat those so being agreed. Template columns from pain. Let's say twice and this guy's I'm going to go 200 pixels one if, ah, and 200 pixels just like that, I want to say this. That's exactly what we get here. So we get two repetitions off that track list. All right, So it was 200 for the first column and 200 for the third column in our track list. And then it's repeated again for being the first item off the second repetition and six being the third item off the second repetition. Items two and five match the one If I so far now resource the wind day. You'll see that, too, and five grand. But the risk dying cool Say you can use multiple track sizes in your trackless and use a repeat function to repeat them now. What you can also do is you can use to repeat function within a track list so you could do something like this. Greed template columns repeat, and we'll say Sorry, not repeat, Let's say 200 pixels. Then we'll go over paid twice one if, ah, and on the end will go 200 pixels just like that. And what doesn't give us is four columns where the first column in the last column of Fixed to 200. But the two in the middle are using the repeat, and therefore they want If I so if I grow this look, if I grow this, you'll say that Columns two and three grind, but one full done, and that is the repeat function, So I'm gonna see you all in the next video. 18. Managing Grid Gaps: Hello, everyone In this video, we're going to look at managing Greek gaps. So let's get to it. Okay, so sometimes you may wanna have Spacey between 80 agreed tracks, and that is where great gaps can come in. Never really mentioned this, but grid gaps are applied to either over those old columns or both. When you can't do is the fine individual gap between two specific tracks. Not sure why, personally, but that's how it is at the moment. So let's look at how we can add grid gaps, toe upgrades. But before we get started, not that I've added a red border Iran each grid on. And this is just to make things easier to determine what is a border and what is it? Gap. So with that said, in this first example, I'm going to show a column gap or a gap in between two column tracks on We're gonna set it to 10 pixels. So do that come down to my colon? Get contains, like to hear guy Greed column Gap just like that. And we just talked Tim pixels, and when I do this, you need to say we get a gap in between the two column tracks, and that would be exactly Tim. Peaceful SWAT. Now we could do the same for Rose. So we go Grid Road Gap, citing pixels. And now we get spent 10 pixels of spice between the two road tracks. We can do both at the same time. So you got agreed. Column Gap 10 pixels Grid Road gap 10 pixels and save that and you can say we had bus. We get a 10 pixel gap between the two column tracks and the 10 piece will gap between the two road trace Now. Obviously, we don't want to use to properties every time we want to do that. So there's a shorthand property just called Grid Gap, and we can set this to 10 pixels, and that will get you the same result. Okay, now officials are the only thing that you can use in terms Off Unit's full gaps. We can use passangers as well. So Greg Gap on site, 10% do this. You going to yet basically a big gap here for 10% the width of the grid and then a little gap here for 10% the heart of the green. Now there is some collapse. CIA Not sure why that happens. Really? Because of the fact. Maybe since history doesn't Kate up for gaps anyway, that's how it works. There. You can do if you poor wits as well. So great gap and, say, 20 VW this like that And now you get a huge gap. Where's 20% that went to the window? So as I now resize the window, you'll see the gap gets bigger and as I shrink it, you say, get smaller. So so it's we W We can do the height as well. So agreed gap between the heights. When we do this, it would be based on the higher the window this time. So as I shrink choir the window, you said the gap begins to shrink. There's a resize and make it bigger. The couple began. Go We ve Maxim Freeman as well, so I agreed. Gap 20 v Mex and I'll do 20 minutes. Center greed Gap 20. Vehement. When I saved these and scroll down, we get this result now the 1st 1 will grow as the biggest dimension greatest. So at the moment you're not going to see a gap increase in the went to the window until we get to a certain point, which is a bad probably there. And now the gap starts to increase. On the first books, however, you say the bottom that this may no change for a little bit. However, as I begin to shrink the window, you'll see the top one. The cap starts to shrink where the bottom one doesn't yet, and as we get smaller and smaller now, the gap begins to shrink. In the second example, Go, says the Max Envy Min, There you can also use a in units and Aryan units. So, for example, up and put a font size my containing here inside 20 pixels that keeping in mind that for the body I've set 10 pixels. Okay, so we got 20 pixels here and we'll say font size but not 20 pixels. 20. I have fun size 20 pixels and grid gap off would say, I don't know. We'll go is four yen thank set and the last one will go Greed gap and we'll say for Aryan. If I scold with very Barham, you'll see that we get basically four times the 20 pixels of fun size that we have here, So the width of the gap here would be any pixels. One between the two column tracks and the gap between the two road tracks would also be 80 pixels high if the last one is based on the font size of the body element. So four times 10 is about 40 pixels and 40 pixels. So that's all I wanted to show in this video and no control in the next one. 19. Nested grids: Hello, everyone. In this video, we're going to look at domestic grids, so it's good to it. So a short video here, I just want to quickly demonstrate that you can, in fact, in this grades inside of other greats kind. How it works is that one of your greed autumns would contain another container. Right? If you look at the hasty mellow here we have a parent container, then we have a bunch of items with open wine upon 2.3, and that represents these here. And then we have an item which contains another dividend which has a class of child container. And then it itself has a bunch of arms, and that's the open 4.1 opened for 12 and so on so forth. So I'm going to convert this child containing here to a grid. So jump over and very simply along in the day is copy the success I have here and priced it . And when I save it, you can see that we actually do, in fact, have a great inside off agreed on him of another grid. And that's all I want to show in this video. So I'll see you. Whoa. In the next one 20. Reordering Grid Items: Hello, everyone. In this video, we're going to be looking at reordering grid autumns. So let's get to it. Okay, So, up until now our great items have been placed in sort of a Greek containers based on the default placement algorithm that CSS cred users. And that is essentially this. We started the very top lift cell, then move from left to right, populating each cell until either we run out of bottoms, all with Fred and a column tracks. Now, if we still have items left over after filled in all the columns, then we moved down to the next road track. Start back at the very first column track here on the far left, and then we place the autumns once again from left to rot. This process continues until we run out of autumns. Now, this is the default behavior, and in fact, we could actually configure this algorithm to behave slightly differently. But that is not the point of this video. We will see how we can change that letter. The future video now where each autumn is placed currently is based on where it exists in the dong. As you can see in my html here. They're all green autumns inside of the container on deliberately in order from one toe eight. However, if I come over and say I want to change the second item here and make it the first like so and paste and save, you can see that item number two has become the first item. And that's because it's the first island inside of the container here. So I'm just gonna quickly revert that back and save, and we're back to where we started. Now, sometimes we can't change your of the autumns in the dorm. This is I did there Unless we use javascript, of course. But that seems to be overkill. Now, there are a couple of ways that we can change the order off grid items with any of them in the touch That Dom using CSS and this video, we're going to look at how we can do this using the order property. Now, the order property takes one argument that is numeric, and it can either be positive or negative. But how it works is pretty simple. The lower the order value is the closer to that top left sell. The ordinance will be placed, the higher the number, the further away the island be placed. Now, if for some reason to iam's happen to have the same value for the order property, then the actual ordering of each autumn is based on where there exists currently in the dong as we've already seen. Okay, so it's enough in the theory would see how it works in practice. So I only come over to my sit says here and for the first example I'm going to show you quickly how sitting and autumn tohave an order value of zero does not change anything. So if I go order on zero and knowing this applies to the third item in the first contain es so this autumn here, does it actually move? When I do this, the answer is no. It doesn't and doesn't because everything is set to zero. But they felt, however, sues a change in autumn. Say I want the first item to go to the very last spot because everything else is zero. I can just go order up one and one is hard on zero. So because of that, we see that Okay, first item in the second example here is going to the very last position, the furthest away from the top left here. Now we can also put the last item into the first position by simply going negative one just like that. And when we do this and come down to the third example, you can say autumn night has moved to the very first position. Uh, now, for the next one, I'm going to say that we might want to have all the even numbers go to the France owed 246 and eight. So I've created selected for that and no life to hear just guy or a native one as well. And when I do this, you can now see 2468 Then following that is 135 and seven. Go. Now. You also jumble them around by using a lot bunch of different, different values So we can sigh, Let's say order zero for the fist Autumn right. And because we do that Nothing trying just currently for the 2nd 1 I may want to set what's I order native one like so and now we see that I'm too is pushed in front of one, all right, and then maybe for the third option. We may want that to be the very last option here, instead of being the third option. So I could say something like Order, let's say to And now you can see the third item has gone to the very last position here and they want to get in. Let's say we want for to be all the way at the front, so it's in front of to Well, we can do that easily. What is going order native to his native to is lower than native one. So if I say this now, we have the four. The front. So now it's full to one and three, If you look at the numbers were sawing. Ford's got negative. 22 is about native one. One is remained on zero explicitly, and we've said the order for this third autumn, too. That's cool. Everything. We don't have to just use small numbers like this. We can use any number possible to say for this one. I want to say it to native 10. Right Currently, it's gonna push the second option back to four, but then we can make number four say native 100 and they're falls back to where it is and then safer. We could have a very large positive number as well for the third item, and the third autumn is still in the fourth position. So that is how we can control where items applies, using the order property. And that's all I want to show in this video. So see you along in the next one. 21. Moving Grid Items to different columns: how everyone in this video, we're going to be looking at moving grid items to different columns. So let's get to it. Okay, so I would say that we can use the order property to shuffle items around the Greek container. Another way we can move grid irons around is by explicitly positioning them. One way we can do this is by using grid lines. Now, if you can't remember what grid line is, it's essentially a set of virtual lines that exists on each side off grid track. So hopefully, with the magic of video editing, you can now see that the first containers shown here on the right hand side, in my example here has a visual representation off these lines. Know that for columns, the first guideline exists on the left hand side off the first column track, then aged lawn after that is between each column track until the last one, when it appears on the right hand side off the last column trade. Now each grid line is given a number saying from the fire left for the first grid line. This will be given a number off one No. 01 and then for each grid long that follows, we just increment the number. So in the case of this grid, it will be too. Then three, then four and finally five. Now, most of the time, these are the numbers you will use to position your greed arms. And that's because Jimmy Lee were happy working from left to rot. But there may be times where you want to position items relative to the right of the grid. This is also possible as each grid line is also associated with a negative number. And this works opposite to have a positive numbers work starting on the fire, right at native one. And they're working backwards until we finally reach maybe five on the file left. This behavior is similar for arise, with the first guideline appearing above the first road track and having a line number off one and 84 respectively. Then we have to a native three, three and native to and finally full and native one. So hopefully that'll make sense. Now for this video, I'm going to show you how to move grid items left or right, in other words, had to move them toe occupy cells that Aaron different column tracks. Obviously, there's more weaken Dio, let's take it one step at the top. All right, so let's get started. So in this first example, I want to move the first grade autumn into way great or into his right now. Okay, I I'm just moving it over by one. So to do that, I can use to properties they are Grid column, start angry. Calm end. Now I'm going to start first. And the very eager to give it is the lawn number. So in the case off wanting to move on one toe where number two is I want to point tow line to. So I just talked the number to I'm gonna say this. Now you can see that the first grade autumn is where the second grade autumn waas now good on two moves over and Seidl the other subsequent read autumns here and they wrapped down If there isn't enough columns left cool. So under the same If I want greed, Item number one to be with three is so go Greed column start and I want to be at long three . So I just taught three and save and then you can say good on one is where on threes and do the same for four. But this time, instead of using grid column stock, I'm going to use great column end and the number I'm going to give it is where I want the right hand side of the great autumn to bay. So in this case, I wanted to be at line five. So then I just talked with them. But fourth, I want to say that you can see that the great Autumn is way great on full waas on the right hand side of the grid. Autumn. Is it lying? Five. Yeah, that's old greed. Autumn one. Obviously we can use other great autumns to. So for this next example, I'm going to say I want to move. Agreed on him three to launch one. So I couldn't talk Something like this. Grid call. Um, start one Now, what's when I saved this? What's gonna happen is we do get on a number three where it's left hand size that long one . But it happens to be on the very next, right? So what's happened is the islands don't go left looking for the line numbers. They'll continue to go right until they found the line number on the left hand side. So I'm three was Here it goes. Is 11 here? No. Okay, wraps the next line, this line one on and then it stops there. So most people might think that it's because line number battery item number one is kind of taking its place. It's not. So if I was to say, move on number one to say where On number three waas and save, you'll see that I'm number three still goes to the next one anyway. Okay, now we have the same problem for to use another item. Say I want the fourth item to go to the second line here. So if I got Greed column start and said that the two and swirl Dan, you can say that Number four also wraps on and it wraps and finds long two and stops right there. So that's using Grid column start and Greek column end with positive values. But as I mentioned earlier, we can also use negative values to do guides for these things over the last two. That's what we're going to do. So in this example here we're gonna move the first grade autumn to the very last column here. Is that a using more on five will on four we're gonna use. He's a long native one all on leave. Two, respectively. Okay, So I'm gonna use Grid column and and that specify where I want the end to bay, which at this point, is native one. So I just thought native one, do this and scroll down. You can say that Great Aunt One did in fact go to the very last color with the end being at long five, but is also known as lawn need of one kuhm. And then I would say for the last one, I want him to To move too long. One right. We can also type it as life greed column start. You could say one in this case. I'm going to use a minus five. When I saved that and come down once again, number two can't go left. So it goes right, Right, Right. Until it funds lining 85 at the second rod. So that's all I want to show in this video. So So you wo in the next one 22. Moving Grid Items to different rows: how everyone in this video we're going to be looking at moving grid autumns to different rose. So let's get to it. Okay, so we're saying that we can move grid arms to different grid cells using grid column start and green column end. This allowed us to move our items left and right, using the vertical grid line numbers as gods. But obviously we also want to be out of new grid arms up and down, positioning them on different road tracks. We can do this by using two properties. They are grid rose, start angry Draw end now grid right start. It's similar to Greek columns Stein, except for two differences. Firstly, we're trying to line up the top of a grid autumn instead of the left. And secondly, we're using the grid lines. They're associated with the road tracks instead of the grid. Lines are associated with the column tracks. As for grid row end, this is similar to grid color man as well, except we're lining up the bottom of the greed autumn instead of the right, and we're also working. We grid lines there associate it with road tracks, so hopefully that makes sense anyway. let's get started. So in this first example one I want to extend its very fish greed autumn and move it to the second run. So they do that. I can just talk, read road, start and talk about the line number where I want the top off this great on him to be placed at. So in this case, it's currently at long one. We wanted to be at line two, so I just talked to when a site is now we can see that the first grid autumn has in fact made it to the second round. What you also see is that good onto has moved over to fill in where number one waas. In fact, all the items have moved basically one column over to the left to fill in all the spice. Okay. Except obviously 678 which can't move because autumn one is already there. Okay, this is bought is on. This is the what? Not the why? I'm going to explain why in a future video. Now, in the second example, what I want to do instead is tight grid on him. Seven here and live it to the first, right? Okay, and he used Green Road end as well to do this. So for grid right end, I want the bottle of autumn seven to be at Lauren too. So we just say to now what happens when you do this is that griddle Item number seven is the fact moved not only into the first row, but it's moved over to the first column. And again, this is by design. All right, I'll explain more about that in a future video as well. That's I. I want to take Autumn three here and put it into the second row. But this time I don't want to use positive numbers on these negative numbers. We can do that. So you grid road, I would say I end and in this guy's I want the bottom Good Autumn three to be at line number native one. So we just thought native one in Seif And now you can see once again. Autumn three is going out of its position moved over into the second row. But it's also going to the first column just like what we saw with number seven. But just in reverse. Now for our number six, I wanna also used a negative number and get it into the first road. So to do that, I can this time use grid Rose start. And so I I wanted to be a sending 23 All right. Need three. Because the top certainly at the top off grid on six needs to be at lawn. Need one native to they three. Okay, that's where they gave three comes in. They also could be more, and we can actually use good, right? India. Instead, use need to, and that's the equivalent. But just for this example, I'm just gonna use good drive, start and send it to native three. And now, once again, we can see Autumn number six has moved into the first right end of the first column on that , Tommy used negative numbers. Now we can grab multiple items at the same time and them and we'll see what happens when we do this. So far, agreed. Road starts off to, and this is going to move items number one into here into the second, right? So when I say this and scroll down, we can see that Autumn wanted to is, in fact, moved into the second right. But they've also preserved their ordering based on the physical, ordering off them in the dung that we do the same force a seven night. I want them to move in to the first round. So we agreed Rights that and said that one and save. And you can also see here that seven night have lose in the first Rory and the 1st 2 columns, but they've maintained their ordering. Now we can actually change the ordering. Surf owes to sigh In the last example, we'll move autumn seven night again, right? And currently you can see seventies before I, which is physically the case in the Dong. If I want to swap this in some particular way and say I want I hate to be before seven we can specify an order that is negative side in this guy's. So currently, 78 of both. More order vase of zero for said the I thought him to be native one. Then it will come before the seven. Now. Right now, Another interesting thing is, what if I want the one here to be before the item seven. All right, so you probably seen Okay, I'm gonna set the order value off this to be listing the native one. I'll make it needed to. But what happens when I say this item one actually does not move? All right, So whenever we specify a roast our or a road end on these honors, that overrides the ordering that's already here. And this is also about design. And once again, I'll explain why that's the case in a future video. But that's what I want to show in this video. Okay, so I'll see you all in the next one. 23. Moving Grid Items to non adjacent cells: Hello, everyone In this video, we're going to be looking at moving great autumns to non adjacent cells. So it's good to it. Okay, so we're saying how we could move greed autumns along Colin tracks using Greek columns, stat and great column. And and we've also seen how we can move crude arms along road tracks. You see Ingrid roast up and Grid Row end, but as we saw in some cases, says, That's great. Does not position autumns exactly where we thought they would go has already mentioned we'll talk more about why these decisions are made in a future video. But what will focus on in this video is how we can be sure that particularly great ill will be placed exactly where we wanted to bay now to ensure that a great autumn is going to be exactly where we want. We must always specify both the column track and right track the Great Autumn belong to, so the best white I understand what I mean is by looking at some examples. So before we get started, I just want to quickly mention that some of these examples have three rise, and some of them have to That's Islay, simply based on the example down about to show you. OK, so let's get started. So in this first example, safer this third autumn, I want to move that into the empty Rory and say, Put it at the second column here. Well, I couldn't do that guy Grid column Stop The scion Want to be at long to where it starts and then greeted rushed out in silent. It starts at long three. Okay, when I do this now, you can say that autumn number three has positioned itself in the very last right And in the second call. And this is locked in place and is locked in place because we're specifying both column and row. That says the first example for the second example I want want to move read. I'm number seven into. Went to his right now so I can say I want a grid. Call him start off, Say two and agreed Roast are Say what I'm gonna do that we can see. That regarding number seven now is in the position where to Waas and two has moved over and so is everything else. Cool. Now there may be times where you want to have two and seven occupy the same cell at exactly the same time? Well, that's easy. You just choose by selectors grid column stop and say to and greed Rose that and said that the one as well And now we have the situation way. Good autumn that was seven is overlapping green on him too. Okay. And that's based on the fact that gridiron seven is further down in the dong and greed onto all right, So it's given, ah, higher preference. We can change this die Why, you see, said Index. So if I go on the second on him and I say I want to set index, that's higher than what Number seven's is and save Now you can say that autumn number two exists and bottom of the seven is behind it. Cool. Now, another scenario is when we wanted to swap one with four societal want one to be in the fourth column, All we needed to do was got grid column stop and set that to fall. And what would happen is we would get that autumn in the fourth position here. However, find him before was dragged down for the next line. Now we wanted to get it into the first column so that you'd say, OK, I just wanted to go Greed column stopped inside one. And then what would happen is it would actually go down to the very next line again and put it in the first follow. But we wanted up here. So then all we need to do is go greed roast up. Is it that so what? And when we do this now, now we finally get that fourth autumn in that top left hand cell. Well, great on a number one waas. Uh, now, for the next one, there are situations where you may want to reset your grid after you've said it. Maybe you want to do it using Java sprint. Or maybe when the media query is executed, you might want to reset a great back to its original, you know, configuration. So let's say, for example, I want autumn three to say Apia in the bottom right hand corner. So maybe where it is. So So I want to get a grid column start is four and greed rose style, you say to like so So that third autumn will now be in the bottom right hand corner and everything else is moved, Iva and then say maybe just for interest Psych. We want this fifth autumn Teoh appear in the first row. But maybe in the second spot fear, Right, So we could use grid column End will say in this situation you said we want to end on line three and maybe grid row and is to right So that's the first road and the second color. So if I scroll down now, I've got the fifth autumn in the second column on the first, right? That's all great and everything. But then you come along the side, OK? I want to actually reset everything. Well, what you can do it is weaken target birthdays audience again and we can set everything back . Toe order said Greek columns start Good calm in grid roast our grid Right end. If they're all cento order, that means that the Stasis creed will the over them behind it. Well ordered position those things as they would have been if you hadn't changed up. So if we save this now and come down, we can see that the order of the autumns have gone back to what they were cool Now for the last one. I just want to quickly show how positioning overrides the water property, and we can already saw this. But I just want to read to write it society, for example. I want to put the very last autumn here right into the first position so I can go read column start, said one greed rice that also set it to one. So we know that item number eight here now is in the very first position and everything else to slip over, but then say, for the 7th 1 I want to put it right next to it. All right, so seven now, guys, where one is right now So we can say grid column Start is to and greed Roast art is one, and that will make item number seven appear where our number one was before it moved over again. And then finally, let's say we want to change the order of things to say Now, all of a sudden I wanted to have I would say the first autumn here appear in front of the others. Well, before I come in and say order with side negative three, right and save. We can say that it still sits where it waas. Now we got a very sing this before, but I just want to quickly read or write it also, if I try and change the order of these two things as well say I give an order number off would say negative two for autumn number seven. Order native to And maybe for the 8th 1 I give it an order off Need one. Right. So what should happen now is that seven mark go before, right? Right. But it doesn't. It doesn't because we've already locked the location Using columns, start and roast are full of these items except for the 1st 1 because that's what I populated. So that's all I want to show in this video. So see, you won't in the next one 24. Grid Item spanning basics: how everyone in this video we're going to be looking at grid items, spending basics. So let's get to it. Okay, so now that we know had a position great items inside about Greek containers. I have a slight confession to make, and that is I haven't really shown you yet. The true power off the properties, Greek columns start Great column end greed roast are angry. Ruined at this point would be using grid, comb, start and Greek on end interchangeably for positioning items along comb tracks. And we've also been using great row start and great row in two position arms, A long road tracks. But this is not there are only intent. Well, you also use these properties for is to define how many rows and columns agreed Item conspire man inside of your grid. So let's say we can do this by looking at some examples. So, in this first example, one I'm gonna show is how we could make this first grid autumn start where it is right now and spend three column tracks, right? I'm gonna do this by using grid column start angry column in. So I Firstly, I want to start at long one come here in a guy grid column. That and I said to one. Okay, now will save these. Nothing happens, all right, And nothing happens because we worry. Uh, at long one. Now the right hand side off this great honor. We now want that to span over until it reaches Lawn four. Okay, so then we need to do is talk grid column and and set it to 14 And when we do this now we have the situation where agreed on one is starting from the very left hand side by the staying position at one number one and spans across multiple Colin tracks until it reaches the end. Which is that Lawn four Now, all other items kind of push after that and collapsed. And the next long. So that is how we can span on item of multiple column tracks that we can do the same for Roy tracks as well. To say, I want to take this first autumn again and have it guarded from where it is right now and go down to the next right here. So it's spending both of these rights so I can talk the phony. I can go greed road start and said that one because that's long one here and what's again. When I save this, we're not going to see any change on. We're not going to say he changed because, well, it's already a long one. However, we want the end of it, which is the bottom to be at line three, right? So that line at the bottom off the second road track. So just taught Grid Road end and set it to three. And when I do this now we have the situation where great on one a span across to rise Gridiron five guys, I can't fit there anymore. So it itself also lose over to the right. Go now say we want to have on one span multiple comb tracks and multiple road tracks. Well, we can do that as well. Societal wanted to bay free by to that. So we want three column tracks and two road tracks. We couldn't deal with the columns first civil got grid column Stop and we want to start long one where it is right now. And we wanted to end once again at long full. All right, so we get the same situation we had previously when it ends at 14 but we also want to span the extra right. So then we have to Dio just got a grid or stop set this to one because that's where it is right now and then we just have to get grid right and and set it in. This guy's still on three because we want the bottom of this to bed long. Three. It's currently at long to So we just talked three. And when we say this now we get the first grade. I'm spanning three column tracks and to row tracks. Go. Yeah, let's say for the next one we wanna have this eight autumn here basically span this whole extra white space down here, So take up a whole road like so? Well, we can do that once again. Why? Saying that We want the column off this to pay a studying one. So Greek Colon stopped one and then we can sigh grid column end at in this case 12345 So we put five and save and we can say that agreed on it has shuffled down because we never specified Arroyo here. It just shuffles down and start said on one and then lose a prostitute. Lawn fourth. Okay, now we could lock this down and say, Actually, I want to be on grid Road with lying three lips redress dot and say three and save, and you get the same result right in terms that that's now looked in. Alright, except for maybe the bottom you don't know needs all Westerns that can be put enough on the time. Cool so that you can make an autumn span. A whole rowed across multiple column tracks. And let's say for the next one I want item number four to spend multiple rows. So I kind of just seeing a guy that to rise. What if I wanted to go over three? Well, that's pretty straightforward. You just go grid stop and set that to one, and then grid wrote and And set that to three, however, watch what happens. Actually, No. Three, we want full sorry, however, what happens when I do that the autumn is now moved into the first column, so if we remember, if we don't specify what the sighing column position is for anything that we take ever certain road, it'll automatically pushed to the front. Okay, so we can fix this. We know how to fix this with done it before. So we need to do is put it back where it waas. So just grid column Start and set it back to full. When I save it, we can see now we've got the fourth autumn in the fourth column and spanning. All rise. Cool. So next one, let's say we want tohave the six autumn basically go from Lawn One and span to say lawn full so we could easily do something like this. We got agreed. Call him start start at one bread column and has ended for when we do this, we get this result Russia. Not so seven full eyes after it. So if seven doesn't stay up there, it moves along with the span six and ends only. And result the five is left up there by itself because it was already a long one. Lawrence Autumn six couldn't get along one on this. Right? So went to the next one and span three contracts go now for the last one. Let's say we want to have a full by four where the last autumn is going to take up. I see that will go three by three Surrey say three columns and three rows. And then all the other arms of call. It worked there, white around it. So come down to the very last results. Yeah. Grid column Start now. I want to start in the top left here. I'm gonna give it a column. Start off one on, then I Grid column end four Because I want to go to line for every here, right and then also want to stop in the left hand corner. So you need the roads stop to be at one as well, because currently it's in the second ride. And then we need to specify the end, which we also wanted to be at line full because this is 123 and then one extra Roy, which is full. If I save this now, we can say that Great. On my the span, three columns and three rice and then all the other items have kind of filled up the remaining cells for each row until I can't anymore. And then they all spent the on your right so that is how we can span grid autumns across more full columns and multiple rows. And that's all gonna cover in this video. So see, you won't in the next one. 25. The span keyword: Hello, everyone In this video, we're going to be looking at the Spanky would. So let's get to it. Okay, so we're saying that we can spend grid islands over multiple road tracks, Colin Tracks or Buzz. And we did this by using the numbers associated with grid lines. We applied these numbers to a grid column start great color manned Grid Row start and grid Road in properties. However, in the previous examples, we always had to indicate exactly where the great Autumn Stein Point needed to bay. But what if we wanted to greet on him to span a certain number of grid tracks regardless of where it currently starts? In other words, we let the algorithm to form the starting point for our items, and instead we just concern ourselves with how many Rosell columns we want the item to span from that location. Now we can change this by using a special keyword cold span by placing in number directly after the Spanky would. We're indicating how many grid tracks we want. The greed on into span from its current location might sound a little confusing right now, but it'll make more sense when we look at some examples. Okay, so let's get started. And so the examples I have in this video, I'm going to be exactly the same as the one you store in the previous video. The difference is we're going to use the Spanky would to achieve the same results. So if you remember the first autumn here in the previous video, we had item number one span, three columns, right. And we did it by going grid column. Start feeling toe Juan and greed column and seeing that 24 right, cause we wanted line for. So when we say this, we got this result right, Which is what we want. However, we don't need to do it. This wife, we can instead use just greed column style and go span three columns. When I save, you can say the result is the site now, because great autumn one is currently at the first position and we didn't need to move it. We can also use grid column in here, and you're gonna get the same result. Okay, so I never get that back now. For the 2nd 1 we had agreed on him number one span to rise, and we did it by going grid rose start. So you're not the one. And then grid, right? And saying that to three to which we got that result. They okay again, we don't need to do this. Instead, we can just go green row, start and go span two and save and want to give me get the same result. And just like before, I could be screwed, right? It end here as well and no change. Good. So that's how we can do three columns and to rise. What if we want to do both at the same time? Well, I mean, I had to do one and the other, so we just combine them. Great columns, Start span three, greed row, Start, span two. And we get the result that we want. Now we could change this as well to end and and And you get the same result there as well. Okay, cool. So for the next one say we wanted to have autumn number eight to be taking up a full row on . So what we did was went. Grid column start. We said it too long. Number one read column. And we said that too long five and saved. And we got that result once again, we don't need to do this. We just got span for and you can see once again that number eight has been pushed down to the third row because it didn't have enough space to fill in four cells. Four contracts in this case. And so it goes down to bed, right and spends with a white cross. Cool. So if the next one, we can see that we want Sorry. Good on them before to spend three rows. So before we had the issue off using grid Rose start, he said toe one and then grid road end. And he said, I kind we want to spend three rows. That means long four. And when we saved it, we had the problem off the autumn moving over to the very left so that we had to come down and go greed, uh, column start and send it back to four. And that put it back from with that kind. Right? Well, we don't need to do any of that Easa. So we could just a little that instead just got span free. Do this. No, I only do. We get item number four spending three rows. But it also stays where it is. Answered the spin. Elemental Spanky. What I should cite is contextual, right? So it's already determined that greed on number four needs to be in this spot. But then we want to spend three rights. So it gets to this point, gets back a three rows. It doesn't go. Oh, I don't know what it go. So you have to tell me. It already knows where it's meant to go column wise, and then we just specify span for the rise. Alright. Really cool. Really easy to do it. The next one Say we wanted to have our own number six right here. Be on the first line and span two columns. Right? So the first thing that you need to understand is if I go Grid column. Well, say Greek columns start just for the moment we go span to because we want the span two. Well, if I come down, you're going to say it spans two columns in place. All right, so we can't use Greek columns. Staff. Yeah, we need to move greed. Autumn six, toe long, One fist. So that is where we do have to specify the line number. Then we just got a grid column and instead, and set span on that to to And when we saved this, Now you're going to see that I'm number six. Does going locate long one on the next road, and then it spans two columns. And lastly will say what happens when we want to put greater item I into the very top left here and then span a three by three. Okay, so you might think to do something like this at first grid. Colon, start span three, grid rose, Start span three. What? That if we come down, well, we're not getting the results you want, OK, we've got I'm being all the way down here when it needs to be up there, right? So instead, we need to say exactly what right do you want to start at? So in this case, we want great item number one that sorry greed item eight to start at Road One like this. And then we got greed, right and span three. And if I come down there, we get the same result. So that is how we can achieve spanning of grid autumns using the span he would. And that's all gonna cover in this video. So say you all in the next one. 26. Grid Item spanning gotchas: Hello, everyone. In this video, we're going to be looking at grid item spending coaches. So let's get to it. Okay. So my course wouldn't be complete unless I mentioned some of the God says you can have when spanning grid autumns. So the first gotta I saw is if you make a mistake. So if I got agreed, Colon stopped. And this going to affect the first grade on in here? If I said this to three and save Well, it's fun. OK, we've got gridiron number one over here in the third track. Fun If I do something like this like a grid Cullen. And and for some reason, I say long one back this way, what will happen is the sisters great algorithm will determine that you've made a mistake and it will start it that long. One and and at long three. So these numbers air basically switched around. Okay, so you may want that we may not want that, but that's how it works. Now you get the same thing if you do the same for Rose. So if I get greedy, bro, start said that 23 Ingrid road. And so that's one accident we still get a span where it starts it more in one. And fees is a long three. So again, the numbers of flips. But what happens if we use spin from both of these? Varies Sasae grid columns that you guys say Spend one angry column and and we decided we want to spend two instead. I'm not and save. Well, nothing really changed, Teoh. But that's because with us the stop value here disparately one. So if I tell it to say, spend three like side, then the grid on will spend three colors. So, in the case of using multiple spans for starting and start wins in this situation Okay, so I'm gonna regret that back to one Now may be in the situation off the next one. You might still only use one span like this the, uh, span to right. And this is fun. I'm number one will spend two columns, but then you decide that. Actually, I want this iron to fish on 12 which essentially is the same. Science spanned one. But you come there any grid column and and you type in two. All right, So you want it to end here not where it is currently, but we're not do this. It does, in fact, actually end there now. So in this situation, off using a number for end, that's less than the span for Stop. It's actually going to take the n value right. Cool now in the situation where the end number happens to be higher. So let's say instead of having to so calm start once again spent. Two. This time we'll use a high number read column end and said it to four. Now Lauren four is higher, then taking one once being to which would get us too long. Three one false. Why them on three? So in this situation, we get basically something you wouldn't expect. So the spares essentially north here and now. The start is essentially that. It's just starting from one to booth toe Lawn four. Now, When I first saw this, I thought it was just eating all that completely and start from the first line and move all the way to four. But it doesn't. It just ignores the span completely, so there's some of the gutters are noticed when spanning greed autumns, and that's a little wanna cover in this video, so I'll see you all in the next one 27. Naming Grid Lines: Hello, everyone. In this video, we're going to be looking at name Ingrid lawns. So let's get to it. Okay, so we've looked at how we can position and span out grid autumns based on using numbers, and these numbers were associated with a particular grid line in Greek container. But what we can also do is name our grid lines by naming grid lines. We are essentially providing extra context off how agreed is structured. But the best part is we could also use these long names the same why we have previously used one numbers. So in this video, I'm going to show you how to define these line names and then how we can use these new names to position at great items. So let's get started now. In this first example, what I want to do is move this first grid autumn to a grid on threes right now. And I'm going to use this third line as stay position. But I want to use a long nine. So how do I make a line name for this grid line? Well, how it works is you add the line name to your grid template columns definition here, and when you position it is based on where the line is positioned in your grid. So basically, the line at the moment is in between the second column track and the third column track. So what you do inside your definition if you look for the two track sizes that represent by those tracks, and you put a spice between it and then square brackets Now, at this point was saying, We want to name that lawn that's in between these two tracks, and I'm gonna call it in this case, the third home like son. Uh, and then all we need to do once we've done this is do what we would normally do it when we use Grid column start instead of using number like this, you just taught that nine lock site all right, and then you can see agreed. On one is targeting that said line, which is called Third Column. Okay, now let's say another example, but this time we'll use Greek column end. So I don't take this third autumn, and I want to move it into the first column track. So that means that the end will be targeting this second lawn here. The second line is between column track one and two. Okay, so we look for that definition, we find that the track sizes for one and two and we add the name in between there, too, which I'm gonna call second call. All right. And then all we need to do is go Grid column and second, Hello and Save. And now we can see that that third Autumn has come down and is Indy on that second lawn, which with cold Second Column. So hopefully that makes sense so far and then said we do it for columns now to do it for Rose. It's very similar. Instead of attacking the grid lines on our column tracks. Now we're attacking these lines on our road tracks. So say, for this third example, I want to take this third item and move it down to the last Roy here. What we do is we locate that third road line here, which is the one that just above the white space and we give that a name right, and that works the same way we locate the track sizes between the two. Since his road track number two and road track number three. So we go to where those definitions are here and report the name This guy's I'm gonna call it Third Rock like that. And then all we need to do is go grid right start. And God said Right and Saif. And now we can see that good on. The three has moved down to that third right now, obviously, Weaken do both columns and rows at the same time in terms of Namie grid lines. So we'll see an example of that to say I want to tackle, you know, the ability to move this last item to the very bottom right hand side of the grid. So therefore, we're looking at this fourth grid line here in terms of the column tracks and the third grid line in terms off the road tracks. We're gonna move the state position of this island to both of those lines. OK, so we need to set them so we can say for the 1st 1 we've got the fourth track. I'm going to specify in front of this well, so forth like that, and then because we're tagging the third line here before the track size, that's between two and three. So we go third like so and then all we need to do is go. Agreed column. Start said that to fourth and created Roast I and said that two things. He wants to do that. Now you can see that Autumn has successfully moved from the top left into the bottom, right, and we've used those line names as gods, and that's all I want to cover in this video, so I'll see you all in the next one. 28. Spanning Grid Items based on line names: Hello, everyone. In this video, we're going to be looking at spending grid items based online lines, so let's get to it. So in the previous video, we saw how we could assign names to our grid lines. Then we saw her. We could use these do names to move grid arms around in that grid. In this video, I'm just going to quickly show you how we can also spin items with line names as well. So let's get started there. In this first example, I'm gonna keep it really simple and just make item one here span, two column tracks. So the reference points are going to be long one here and long three, which I've given the names long, one and three, respectively. Over here. Okay, if I come down and say I agreed Column start and I said, That's a long one and then grid column and and I said that the three we get the result we want Okay, because Battalion, the Royal agreed on to be at long three with 93 and to stay at long one which happens to be called one in disguise. Cool. Now we do the same for Rose So I already have a road one reference here, and we want item number eight to start that row one I the first line here off the road tracks and ended the very lost good lawn off the road tracks. All right, so we'll start off by just topping greed. Right? Start and sitting that to one which was deformed up here. All right. Now for grid Road end, I haven't really mentioned that you can actually put a long name at the very India. Well, like so, uh, and this basically represents the very last line on either the right, right? Or in the case of columns, it would be the very far right here. All right. Same is when we have a long name at the start, we're referring to the very start I the left hand side of the greed, all the top of the grid, depending on whether we're dealing with Collins or rise. Now, in this case, we're dealing with rise. So I added a new lawn name at the end, and I just called it end so they don't have to do is just talk. And here and safe I'm gonna do that now you can say that on the by is, in fact, you know, spanning older white down, but happens to be in the first column, right? So we can move that over. I mean, I had to do this, and I'm gonna do this, but just going greed columns start now. I could set it to four, but I already have given a long nine for this. So I'm just going forth. What? That and when I save it, then we have automate spanning old Rose in the very last call. Cool. Now, what if we wanted to have the first item? You know, span, Let's say two by two. So to road tracks and two column tracks. Sorry to road tracks, Two column tracks. Well, we can do that as well. So we could have already referenced names here of cold one and called three and row one and row three so we can do the following your greed call. Um, start. And so I wanted to start it Caught one grid column and incident to call three. Been greed roast at, said that to road one and greed and and said that to row three. Okay, I'm gonna do that now you can say it does what we expect. It starts from the very left, the very first grid line for the column, which we call caught one. It finishes at 13 year, which we happen to call. Call three. It starts from the very top one at row one and finishes at the third line for the rise called Row three Co. Another really simple example. Now you're probably wondering, can we use span the Spanky would to achieve spanning with autumns? The answer is yes, but that acts a little bit differently to when we use numbers. So say, for example, the last option here we wanted Teoh, go three by two. Right? So it's gonna take the first item expanded across three column tracks into road tracks. Well, when we were using numbers, we would do something like this. We would got greed column. And so I started this case and just got span and we got to spend three, all right. And you would get on number one spanning three columns and then we would got greed roast Ott. And so I span down to, let's say to, uh and we get the result we want, but this is with numbers. Now you might think, OK, I'm just gonna replace the lawn number with the name of the blind that we want to target, which in this case, happens to be fourth for the columns. Right When I do this, it doesn't actually work, all right, and doesn't work because for some reason, I sudden without why, But you need to specify both the start and end when you see long names. All right, so you can't cite from your composition spend to the full floor, right? We have to use Greek column end here to do that. And we also have to tell the starting point Well, one night as well. So in this case, we site first because we're saying why won't stop from the very first line and span and to reach the 4th 1 So if I do this and that should have worked Oh, sorry. That should be starting. And now it works. So now you can see that we're staying from the first column and spanning into arrange one that says fourth. Okay, Now do the same for the bottom. So this has to be first, right? And not have the Spanky within it and then also greed, uh, and and said that to spin to the Fed, right? Save that Now the spanning works for Rosa's well, so really using long names were spans here isn't as beneficial. It's what it is when we use numbers. So just keep that in morning when using it. If you are going to use the Spanky would finally really beneficial if you're using numbers and that's all I want to show in this video, so see you all in the next one. 29. Using multiple line names: Hello, everyone. In this video, we're going to be looking at using multiple line names. So let's get to it. Okay, So sometimes you may want to give more than one name, toe a grid line. It's maybe that grid line serves more than one purpose. Now, Personally, I've never seen why you would need to do this. But to make this course complete, I need to show you that it's possible to assign Ward in one name to a good long. So let's get started now. In this first example, what I want to do is be out to span autumn number one by two to reach long three here. And I also want take good order number ICT and also have that start on 11 and spent 13 But I want to use a different one name for when I spend Regatta Might to win us band grid, Autumn one. Okay, so currently for this deadline, I have a line name off line three. Okay. The answer At another. My name. All I need to do is inside the brackets. Just top another night like this and then at a spice. And that space is basically what we need to separate those two long names out. Otherwise you're going to have a long name. It says on to dash in line three, right? That space basically gives us the ability to add more than one night. Cool. So really simple. Now, if I saved that, nothing really changes every here, and that's because we haven't spend anything yet. So for the first item, I'm gonna do what we would normally do if we didn't add the second name, so I'd do something like great column start and set that to this guy. So long. One start so long. One start like so and then grid column. And I could set this too long. Three. Right, because that was what was there before. If I do that, we can see that on one thoughts that long. One stop and goes to a long three go really, really simple and straightforward. Now, instead, for the eighth autumn, I want to still use 11 start so I can come down and sigh Greed column. Start that that's a long one start, but this time for the end. I still want to refer to the same line, but I'm going to years Lawn to dash end this time. And what the results should bay is the same, right? So great on a maid is starting from the very first line and spends to reach the third lawn . All right, but we just seizing the name long to dash end. Cool. Really easy to understand. This is something that you need to know. OK, now you do. For Rosa's Well said the moment I've got right one style and road for end. All right, so say, for the first item, I wanted to go from the very first that line in the script and spend all the way to the very end, which is the rightful end. So I just do something like this Grid road start to write one that start great. Right? And Teoh wrote four That end looks for that end and would say that greed Autumn one has banned all full rides. Right? May I say, for example, I want number seven here to do the same thing. I disband. Awful rise. I'm going to add a 2nd 1 name for this one. I'm just gonna call it great. And this talk if I come down and say, Actually, we're going to use instead wrote to All right, so we'll go. Seven will start on the second roll on and go to the end. So we got Grid Road Start and this stumbles road to dash start and then grid road end. We're going to use grit and and save. And now you can see that on a number seven started at Roy Blanc to because it's using road to Death Star. But it ends in the same sport as on a number one did, but we used a different one than so. That is how you can use multiple line names when spanning greed autumns in your grid. And that's all I want to cover in this video, so I'll see you all in the next one. 30. Lines names and the repeat function: Hello, everyone. In this video, we're going to be looking at long names and the repeat function. So let's get to it. Okay, So in previous videos where I was showing you how to work with line names, you may have noticed that I wasn't using the repeat function anywhere. Well, this was intentional. If you think about what they're paid function, does it repeats trackless. This would have also included repeating line names, which in turn, would have made the examples. I want to show you more complex that they needed to pay at the time. So in this video, I'm going to show you how we can still target a specific grid line based on its name, even with other grid lines are using the same day. So let's get started now. I just have the one grid. But inside the grid, I have autumn number full here studying at long three and moving to the very end of the grade and have represented this idea here by just talking the number three for Greek columns start, and then the line name end, which matches this one and the fonte out okay. And I've done the same for I don't know, 15 except with Rose, where have given the roads start the number of five says represents the fit line down on this direction and then end, which is the end of the grid. And that's also defined here in green template Rose. Now I want to use a line name for both the three and the 5% the number. But the problem is, I'm using a repeat function now. If I look at the first instance, he after item number four we have a repeat function that repeats a track list that has 119 minute called Odd Column on So this is repeated twice. It's repeated for line number one because it's the first instance ever, right. And then on the second loop, it passes long two and goes to a long three and gives it the name ordered call mourn as well, right? So the problem with this is if I'm going to come and decide on one target, are calm line like this, what's gonna happen is the great I am is going to detect the very first instance of this line name and connect to that. Okay, now, that's not good That's not what we want. What we wanted was to get along three, which is the second time that this night is paying the phone. So can we actually do this? Is it possible the answer is yes, and we do this by putting an instance number after the night. So in this case, I want to talk it the second time that on column one is used. So I just put the number two. And when I save now, you can see that it does, in fact, a touch itself to the second time our colon is used Now. Obviously, if I said this toe one, it's going to go back to the original line. And as we just saw, if you don't use it all, it's going to assume the first time go. That's the same situation that here for Rose so that even Roland mentioned, you know, twice in a repeat. Now it's called even Roland, but really it's tightly lying to end line five on, so hopefully should have given it a better name. But never mind about what we want to do is take the second time that that's used so we can't just go even road line because if we do that, it's going to be the first time we just lying to. So we just put the two after it as well, and then we're back down at long five. Cool. So that is how we can target a specific line by line name, even in the situation where multiple lines have that exact same blonde night. And that's all I want to cover in this video, so I'll see you all in the next one. 31. The grid-column property: how everyone in this video we're going to be looking at the green column property. So let's get to it. Okay, so we know that using Greek columns start angry column and is great for positioning and spanning greed arms along our column tracks. But wouldn't it be great if we could simplify this further by taking both phase of these two properties emerging them together? Then we take this merge value and said to some general purpose property, this is, in fact possible. And the property that we used to achieve this is called Grid Column. So in this video, I'm just going to show you how we can convert to say says we have currently to build out the example she say in front of you now and change them to use this new Greek column property instead. So let's get started now. In this first example, one of God is this first grid autumn in the second column track, and we achieved this by using Greek columns start in Greek columns, end set to two and three, respectively. So how can I rewrite this using the grid column property? Well, we do this grid column, then we specify to start with you first, followed by ford slash And in the end value just like that. And now if I removal this and save, we can see, we get the same result. So green on one starts it lying to and spans to rage Long three. Okay, now we had both Greek columns starting grid column end to fund their But obviously, sometimes we can just have great columns Start set and not Greek parliament. So in this case, we're just saying move to third line and put it at the start, which is what is happening here with this second autumn. We've moved it from here to here, and we just use a Greek columns start to do that. So how can I use great column to do this? Well, it's a number of wise. So I for this example I'm going to do it by guy two for the sorry three for the start. Then afford slash. And then I'm gonna use water, okay? And all I'm means whatever the current value off Greek columns end is right now, use that. Okay, use the default. So wherever the end is supposed to be right now we're going to use that. And when I say this, you can see that grid Autumn number two still starts at three and then automatically spans over one column track and ended for there we can instead of using order. We can also use the span keyword to achieve the same result. So say, for this next one when we come down, we want autumn number three here to appearing on one and finish on long to Well, we can tighten start we had here, put the wine, put the Ford Slash and then because we're just spanning one, we just talked span one like that. And when I say this, we're going to get the same result. Okay, where it starts at one and spends over one. All right, cool. Now, in all of these three cases, we've had a number that afford slashed in another number. Well, if we're using Greek home start on its own, we don't necessarily need to do this in terms of hang, slash order or adding slash span one will slash three. We can just put the Greek columns style value and just set recall him like that to, and this equals Greek columns start and leaves. Group column in as it's the phone So funny. I saved this and we look at the fourth autumn in this example we can see once again it's still at lawn, too on All we did was changed. Group column start to just great Call him go Now There might be situations where using grid column end instead of Greek columns start in this circumstance, we can do the following week Grid column And I think, uh, would say order and then slash five. Uh, And when we do this and we take out this one above now, before I say well, just rolled in currently. Farmers. Yeah, right. So we're in the kind that the end of this autumn is on the fifth lawn. So we know now save this. We can see that is still there. Okay, so the end of I don't know, five is still on that fifth long because we used order. It's the start of the order is okay. If the end is going to be the fifth line, I'm going to start on the 4th 1 Cool. So they're old positioning, But what about spanning? So it's got great on him six years spanning three column tracks, staying with the second line. Alright, so I've got a great column start saying, Were it long to? And then I got a good color end in the cane that I want to go to the very last line. All right, so we can achieve this as well. Why? Just doing a normal agreed column like site. And this time we'll just go to slash five, and we can remove all this insight. If you scroll down. We can still say that Grid item number six is still staying along, too. And finish it long. Five. Now what if we want to take advantage off the span Kitwood and keep the autumn where it is , where it is right now? Okay, there's two ways we can kind of do this. We've seen them. We can either use Greek columns, start and say spend three. We used in this guy Screwed column end and say span three. So it is really too wise to map this with Greek column. One is to go order slash span three like that. If we save this and swirled in, we can see that autumn number five is still spanning three column tracks. But the other way we can do it as well is kind of the reverse of that. So we just got agreed home and we can say span three or and that will gets the same result . Because think about it. If we use Greek columns starting, just said SPAN three, we would get the same is if we use grid column end and said span three And that's why you can do this to Different wise. So that's all members. The last example will look at some wines. So if I come down to the very last, we've got autumn by starting on the very first line and ending on the very last long, which I've called Law One and Fifth, respectively. And this is pretty straightforward. We already kind of know what we're gonna do here. We just got a great column long one span fifth and then just remove his last long and safe . If you come down, we get the same result. All right, so that is how we can simplify how Greek columns start and Greek column end properties into one single property known as Great Column. And that's a little wanna cover in this video, so I'll see you all in the next one 32. The grid-row property: Hello, everyone. In this video, we're going to be looking at the Green Road property, so let's get to it. Okay, so you've probably already guessed what this video is about. And yes, you're right. This is about simplifying grid roads. Start angry dry end to just grid. Right. And this works exactly the same. Why, as we saw with Greek Column. So with that said, let's get started now in this first example What if God is great Autumn one in the second row. Okay. And I've done this by using a grid roast out of two and a grow into three. So simple for this, we pretty much did the same thing we did in the previous video and just go to for the start and three for the end. And then we can just remove this stuff and save, and you can see it stays where it is. Okay. And just like the other video saying this second example, we've got good on two in the second row and we got good right stand here. But instead I'm just going to go to slash order. That's another way we can do it and we get the same result. Okay, The next one. Say I want to move on a number five year to the first round, which we have at the moment. I've used a group, bro. Start of one to achieve that. But we can also great dry one flush spent one. And this is old. Similar patterns to what you've already saying. But you can see that great on him. Five is still in the first round, okay. And still spanning one road track. Obviously we can do the same down for the next one. We have taken this fourth item and we've moved it into the second round. So it should have been up here, but now so for this one, I just go agreed right to All right, cause good ray off to is the same saying Good row start of two. Same is created. Columns start off. Some value Was the same. Saying Great column of some value. Same situation here As we check it out, we can see that I don't know the full down here. It's still in that second round. Okay, if the next one say, I want to move the sixth autumn here in to the very last right. I've done that using Grigory end here so I can do something very similar. So what was already saying and go order flash for? And when I check that at, we can say that Great on number six is still in the third right nd online full. So there are all the moving bits. Now we're gonna get the spanning ones. So if the next one off God Ah, automobile one spending three Rhodesia using good roast. I don't want to do that and agreed Road and afford to do that. So once again, I just got greed. Ride one slash four, and then I can save this. It's well, Dan, and we get the same result. Cool. Now for this one Over here, I've got item number four spanning three. Rosa's well in staying in position. And we know we can do this by using span three. So in this case, we can do what we did previously in the other video, and we could do it two ways. We can either go orders life span three and sit this degree dry and save. And you can say before still spends 23 rise. All we can come into SAT and then guy greed. Right and your spin three. Flash order By then. Get in. We can see that, too. Now, in the previous video, what I didn't say is there's actually 1/3 way and we can do it by just going great, right span three. Because good run on its own is the same saying Good Rose. Stop. So if I save it and come down, you can see that Autumn of four is still spending three rise. So is actually three ways not to. I think I mentioned the previous few doubt There's only two is actually three go. And then obviously we can still you lines as well for Rose. So then he off got a row off one for this first line and then up spanning to the third line , which is named Row three. All right, so we can simplify this again by guy Row one, spin to row three. Changing this to write and removing this last line and safe. If I scroll down, we can say that Autumn eight is still starting on the very first royal line, which was given one and stops at row three here. And that is all I want to mention in this video. So I'll see you all in the next one 33. Positioning Grid Items using the grid-area property: Hello, everyone. In this video, we're going to be looking at position Ingrid autumns using the grid area property. So let's get to it. Okay, so it's a how the Greek column and greed road properties work to simplify what we need to ride to move and Spain agreed Items Well, guess what. We can even go another step further. We can use a new property called Grid Area that will allow us to set grid column, start grid column, end grid roast are angry row end all at the same time. Now the great area properly conduce mawr than what I'm going to show you in this video. So, Seymour on what it can do in future videos. Also in this video, I'm just gonna be focusing on positioning of autos and not the spanning off. Um, well, look at an example off this heated up, tell me video as well. So let's get started now at all. The examples are having this free. I we're just gonna be rewriting some of the properties already have over here to use the grid area property. Okay, so if the first example I've got good, I'm number one in the third column track, second road track, and I've done this by just usually agreed row style of two for the upper line. Agreed or end off three for the bottom line. Agreed. Calm style free for these third line here and green. Calm into full for this long go. That's how its place where it is. All right, So I had a week rewrite this by just using grid area. Well, how good area works is it always takes grit Breuer, stop fist. So that is in this case, number two. Then we have a Ford slash and then the second value is always grid column start, which in this case, is three on another ford slash then grid road end. That's three in this case. And finally green column in, which is four. Okay, so find out the late all the above you. I just use this and we save. We're going to see the grid are one reminds where it is. Okay, so let's read or write greed, right? Start to green column stopped free greed Row End three and great column and full. Okay. Now you may be asking, what if we don't specify or four and we have free like this. Well, we can still do this for going greed area again. Rose Start is first. So I've got that. That's too. We have columns, start. That's three. And then we have Ryan, which is also throat. No. We get an right there because the last one, which is column and is not mentioned here, but it's also the very last value, so we don't need to include it all right? Now, if I actually come here and sigh the late and save, we can also see that number one stays in that same location. Okay? Yeah, the other way to rewrite this because this is just one way of doing this. Well, to use the four argument, why, like we have above it would be this. So we got green area two slash three slash three. Look, we had above. Then we go slash order, and that's saying automatically use what? The column It is right now, and this would give you the same result. Okay. And that's basically saying that any time we don't need a certain value in that list, we should replace it with All right? For this example, we didn't really need to do that because it was the very last value. Any license, we could just exclude it. But there are times where you will need it. Okay, So with that in mind, let's move on to the next example, which is a greedy roast out and group column start. So we just have the 1st 2 arguments. All right, so for this we can also just got agreed area. And this time we could just go to for the right start and three for the column start. And right there, if I relate that and save being come down to the third option and we can see it's still in the right location. Now, you point wondering, can we write? Rewrite this as well? Of course we can. So we can do this. We gotta slash order. Right? And therefore, we give me an explicit order value for the road end here if I suppose we should come and coming out the one above and run it. And if we come down to the fourth example, which is this one here? You said the moment. Maybe it's the third example. Sorry. It is the third example. My bet. So this one here. You can say that our number one is still in its right place. Okay. And then another way to right this again is to at the column in value is although as well, which you might have already guessed. So what, I would I want that when we come in the sap excite and we get the same result yet again. Go. So I actually start to see the pattern now. And so for the next one, we can essentially do the same thing. But this time, we're not going to specify. They fail you for columns, start with just using roast I. So the equivalent for this is either, and I'm just going to write these out. Now we can use greedy area off to what we can use greedy area off to slash or no, or greed area off to slash order slash order. All right. Like that. And even greed area to slash order slash or I flash order. Cool. So I'm just gonna coming out these bottom three just for the moment and save just to make sure that we know it still works. So this is now the fourth option, and you can say good autumn number one is in the second run, and we haven't specified a column start. So it's just stayed at the front here, which we already know. That's how it works. Cool. So if you just need to do agreed roast are you could just call grid Area to so we'll continue forward. I will try to go through these. It'll be quick in there, So but a grid row start with bright India through the room of this would be a grid area. We have the right start. We don't have a column start, so it's put order and then we have a row end. All right, so we can do that. And then you can do all the other examples as well. So I'll just go through a few more examples just in case you still not seeing it to say for this one. I want to go slash water go. And they had basically the two different ways that you can do it. Once again, I'll come in this ad and will make sure that's still in the right position. So just delayed this save. If we come down to the very fifth option, we can still see that the autumn is in its sick and right. Okay. Neymar really have agreed Row in here. So this is a little bit different again. So we can say OK, Greed area or no slash auto slash Three like that. Delete that if it comes down to the sixth example of lived 123456 Yep, Six example. You can say that. Still, they're okay. Where's row? End here is still 13 there for the next one here. We're putting the calm start calling in values for one. So it starts along three nuns along for so the equivalent of that would be grid area and we would type order and then three, cause we've got great columns start and then we don't have the end for the road. So we put order and then we just put four. Okay, if I don't like this since I've and scroll down, you can see that on the one is still there in that contract and Cindy, as long for All right. So maybe sometimes you don't have the invasion. We have to start. Well, that's pretty straightforward. Just got agreed area and we don't have the roast up, but we do. You have the column start and that's we ended there. So I really started to see the pattern this point aren't going through. Enough of for you to work out. If I come there now, you'll see that the good autumn is still there because we specified a column start of free because the road stops was order and the const artistry. The other two also order. We have end. So we're saying this time we want to specify the right end to before here again. Very similar. There's got agreed area. We don't have a roast are we? Don't have a column start. We also don't have a road end. But we do have a column, man, If I believed that and save well, we can scroll and to the very second last option, and that was meant to be a full. I think about a three. And now we can say that the second last option is it It's right spot. Okay, that the last one. I'm just quickly indicating that if you put order for all the properties while essentially the same good area is to do this, it's got great area. Order in size and everything will be exactly the way it was intended based on the items that are in the dog. So that is how we can position items. Why using grid area. And that's all I want to cover in this video. So so you won't in the next one. 34. Spanning Grid Items using the grid-area property: Hello, everyone. In this video, we're going to be looking at spanning grid items using the grid area property. So let's get to it. Okay, So in the previous video, we looked at how we could use the grid area property to position acrid items I have up. And she may have already guessed we can use it to span out grid autumns to now. If you think you're united through this, then that's a cat. You just skip this video and move onto the next one. But for those of you that answer confident in half my work, we'll go through a list of examples right now. So let's get started now. In this first example, what I've got is my first grade on him, spanning two column tracks so done that by using Greek columns, start of one angry column end of three. So I can rewrite this to be the following green area. What I because we don't have a roast that we do have a column stance. That's one. We don't have any Roman. So that's also order. And then a column in off three. Now if I removal the above when we save this, we get the same result. Okay, I don't continue to push through with these really quickly, so we don't waste too much time. So a great column start here. I've got a span of three, this tome so we can use the Spanky would. So the right this I just got agreed. Area order. Flash span three. All right, cause columns start is the second value after the slash. So order needs to be defined for greed. Roast on. And that is it. If I do this, we can see that the second example here is still spanning. Three columns next one spanning all four columns and we're using Greek columns. End to do this with the span four. So this one is a little bit more complicated. We have to get order. Order, slash order slash order slash span four. His great column end is the very last value that we have to specify. So when I do that once again, it's Bansal Full columns. The next example. We're using greed on one to spend to write tracks. So I've got redressed out of one and grow grow into three so we can rewrite that to be created area one for good, right Start order for crude Constand and in three figured Roe End. If a little Latin save swelled an you can say Still sign the next one. I'm spending three rows, but I'm using the span keyword of three for Roast I. So all I need to do is rename great Dry start to discrete area just like that, because it was the first value. If I scroll down, you can say it. Still, Spain's all three rise cool. The next one we're using grid right end with the span. So this is the third value we have to specify. So it's great area. What I slash order slash span. Fall What, then? Now give us all for us. There it is, right there. Cool. The next one. We're going to buy two, but I'm using all four properties to achieve it. So I raced out of one row into three calls that one in a column into three so we can rewrite that as well to greed area. And we won one three three. So it's not. One calls that one and in three column in three, and that means we can removal this and save and we've got out two by two years. So for the next 10 sorry. This is the two letter. My bad. The next one. We've got a two by three. So two columns by three rows. So I'm using Spanned three and spent to achieve this. And both of them are using road end. All right, so that means I have to talk following, so OK, greed area and we don't have a row. Start. So that's auto. We die. I have a column starts. That's all die. We do have a row in which is spanned three. And we do have a column, man, which is Spain to to? If I they're on this come down, we can see there's out two columns and three, right? Still. And that's when we got three by three. So I've done this with a grid roast. I and a great column start both being sent to spend three. So this one's a little bit simpler or we need to do is get grid area spanned three slash spin three. Just like that. And more injury. If this is how you want to create a three by three grid on him, this is the better way of doing it. So we come down, we check it out, we've got out 3.3 Cool. So they're all numbers. What I haven't mentioned is we can also use online names. All right, so the last one is defined every single value with a long name. So we can easily do this with great area as well. And we can say for the 1st 1 we won't rush starts to have called that top line. Then we want to be calm starts. So that's the left line. Then we want the row end, which was called bottom line. And then at the very end off the column, which is right lawn just like that before I say this, it's basically one item that takes up a lot of cells. If you save it and come down, we get the same result. Okay, so that is how we can use grid area to span at grid autumns. And that's all we want to cover in this video. So see, you won't in the next one 35. The grid property reviewed: Hello, everyone In this video, we're going to be looking at the grid property reviewed. So let's get to it. Okay, so now that we know all about line names, I think it's best that once again we review out general purpose grid property. So as we saw previously, we were able to specify track sizes. It had track list for both rows and columns. What we can also do is include line names in this property as well. So in this video we're going to do is rewrite the vase we have specified in a great tip. Light Rose. Angry Template column Properties two of a that will work for the grid property. So let's get started now. In this first example, what I've got is a grid autumn that spans two column tracks, and I've written it by having a great time flight rows of sitting that to a repeat of two times 100 and then I've got columns with a line name of cold one style. And then after the second track size, I've got cold to end, which represents this last track. Here I eat this line, right? Yeah. So I've used great template Rosengren template comes to achieve that. I went underneath it, have chosen the first item, and I just use great column too. Basically specified the two locations where we want to spend it. Right. So how did I rewrite this? Using the grid property? Well, the first thing I usually do is I look at the roads and go, Okay, That's a repeat function. Just go to 100 pixels in the Ford Slash. So you might have seen most of this already. And then all we really need to do it. It's just basically repeat what's up there? Which is Cole One start one if I want. If I called to end And what if I write? If I remove these two lines like set and save, we get the same result. Okay, so pretty straightforward. Really? When you think about it, we had to do it's just specify green template, Rose, angry template columns. So I will do that for a few more down here. So we've got a great template, Rosie, off road one. Start with the line name and right to em with my name. And that's equated to having this grid item be out to spend to those two individual lines fired This rule here, so I wanted to do here is pretty much grid, and we can almost Well, basically, we can just copy this, like side paste it at a Ford Slash and then just copied the columns. Very simple, very straightforward. So once again, I'll just kind of let out save. And we could say that Autumn one still spans correctly. Another example. Here's the entire, uh, toy, a set of rosacea. So I've used basically a start and end with long names being at the start off the track list. Repeat AEA and then the end after the repeat. So once again, straightforward, we could still do this. I just go, Ingrid growing all this copy paste food slash and grabbed the second Repeat once again for the combs. So I've the little the above and we get the same result. Okay, two more So we'll do one spain. Both column tracks here. So in this case, agreed to invite columns has a line name at the start before the repeating them one of the end. So underneath, once again, we just got a grid like Sai grab the repeat of 303. Lots of 100 pixels. Place that and copy this the price of the end. Hopefully, you get the idea. It's pretty straightforward, all right, if I save this same results and lastly, I've got it defined for both. So again, it's pretty straightforward. We just got agreed. Couple this in the place and then Ford and capitalist and priced. They removed these two lies. Save every come down that one good arm still spends all rows and columns. And that's all I want to show in this video. Very straightforward. So see you. Whoa, in the next one. 36. Aligning Row Tracks: Hello, everyone. In this video, we're going to look at aligning road tracks. So let's get to it. Okay, so sometimes you might be in a position where you agree container is larger than the overall. Some awful your grid tracks put together. So as you can see on my screen, I have three road tracks in all of my examples, and each one is 70 pixels high. However, the overall size of the Greek container is 300 pixels high. So if I was to add the three track sources together for the Rose, we get three times Sydney pixels, which is 210 pixels. This lives is with still 90 pixels left over. And there's the white space you're seeing here Now. Having all that extra white space at the bottom may not be ideal for what you want to do. So instead, you may want to distribute your road tracks differently inside the Greek in time. Now we can do this, and there are a number of options that you can choose from their start and sent up stretch space around space between and spice evenly. Now, when we actually explicitly set the size of all that road tracks. What will happen is that all the items will distribute themselves to the top of the container, and this is referred to as the starting position. Now we can change this behavior by using a new property called Align Content so far as to come over in my first example and got a line content. And so I stopped and save. What you're going to see is that there's no change whatsoever, and that's because this is the default behavior. Now, if I come down to the end containing which is the second so theoretical here and die alone content and you're now going to see that the road tracks distribute themselves to the bottom of the container. Therefore, at the end, they put him in the center as well along content center like so, And save that and you can see that the road tracks are now laundry into the middle off the grid container. Now I'm going to skip stretch contagious for the moment because I explain a few other things in regards to it sold jump down to space around, and what this does is it creates even space around both sides off beach road track. So if I got lawn content type space, dash around and save, we'll come down and see that this one here has space on top of the road track. And then that space there you can pretty much add that to the bottom of the right track. And that's about midway into the speak space here. And then it starts again. It's a top of the next track, bottom of the next track, and then to start the next track and Paul Now there might be situations where you don't want this top spice, and you don't want this bottom space so we can suppress that. And we use that space between to do that, sir, on content space between. So if I do that and save and come down, you'll see that the difference between this one and this one now is that the top space and the bomb spice has been suppressed and added extra space in between h off these red tracks . Now, you may still want the space above the top here and below the last one, and you may want the space to be even all the way across the entire container and we can use basically space evenly to achieve that along content face. Even I'm gonna say this and come down. You'll see that? That the spaces even across the entire container. Now I'm gonna go back up to stretch now. What's so important about stretch? Well, if I come in, I just top it. Locks side. What? This and save it doesn't actually work. Now, why doesn't it work? Do you say? Well, the reason is because when we use explicit Sisay on our rose that I've arise the behavior of stretching. So what we need to do is we need to basically define these Rose as being auto. Now, I'm gonna take this out for the minute and just comment that at I wanted to do instead is guy grid tinplate rise. And then this time will just get repaid three times and got order. And when I say this, you're going to see that actually stretches by default, all right? And that's because when we use auto side by side, as we remember, that will take up even a man of spice. It's just like, what if we got the stretch full? If that's the default, well, you use stretch only win. Maybe a line content is set to something else and you want to change it. So I say instead, I wanna have all my auto tracks not be stretched. Instead, I want them just to float to the stock like site. If I come down now, once again, you can see that the order tracks have been shrunk down and distributed to the top of the container. This is where it's kind of important, and then we gotta stretch again just to ensure that we want to get back to stretching. So that's the tricky part of using a long content with Stretch. That's what I want to show in this for today, so I'll see you all in the next one. 37. Aligning Column Tracks: how everyone in this video we're going to look at I wanting column tracks. So let's get to it. Okay, so just like road tracks, sometimes we want to control the distribution off column tracks in the same fashion. So, as you can say in front of me, I've got many examples where the greatest 600 pixels wide and obviously the two columns, uh, 200 pixels wide and don't fit all the way across the container. So again we have the same options as we did for a line content. But this time we're going to use any property full, justify content to achieve the same thing. So just like before we have a start option, which is the file left in this case, we got just a fight content start and no change. Okay. And justify content is the end that puts on the right hand side of the container. I mean, obviously did the middle is, well, something you justify on 10 center and bank. There it is in the middle. Now we have the same problem for stretching. So in this case, after guy, grid 10 play columns and say repeat to order, I'm gonna do this. We get the stretch by default. But if I change it to something, what is that? Then you can say that the order behaves differently. Go. So that's that. Also at the stretch explicitly here just for fun. So is that space around? Space between and space evenly all act the same way. So justify content space around What do all three at the same time justify on 10 spice between and justify content spice evenly. I'm gonna save it and we check all three. Is there space around option space between with a big gap in the middle and then spacing evenly with the space is the same across the entire content. And that's all I want to show in this video, so I'll see you will in the next one. 38. The place-content property: Hello, everyone in this video, we're going to look at the place content property, So let's get to it. So I was saying how we can control the distribution off road tracks and how we can control the distribution of our column tracks. But what if we wanted to control both at the same time? Well, we can do this using the place, content property Now. How it works is we specify two arguments. The first argument is out along content value for the Roy tracks, and the second argument is the justified content value for a column tracks. So I'll quickly just show a few examples. So say, for the 1st 1 we wanted toe have our road tracks distributed to the bottom of the container and our column tracks distributed to the center of the container. We could do something like this so I could come over and say, place content and we could sigh end and center. And when I do this now you can see that the road tracks are all lined to the very end. I the bottom off the container and the contracts a centrally aligned in the center off the great container. Now the other options that we could have is say, I wanna have the road tracks on to the top of the container and say the contracts to the end of the container so we can go place content. We'll go start an end alongside and basically that moves. The column tracks to the right hand side of the container, and it keeps the road tracks at the top of the container. Now you may want to put it absolutely in the middle for both, so you won't be able to do something like this. Why's content Santa Santa? And when we saved this, we can now see that the tracks centrally positioned vice in the horizontal direction and the vehicle direction. So the colon tracks a role in the middle and some of the road tracks. Another example we could do is say we want all the road tracks to be at the end, but then we want the contracts to start at the very start so we can get end start. If I scroll down, we can say essentially that the road traits of being placed the very bottom of the container, and they started the very left of the container. Now for the next two examples, I've just specified a middle column, the track here in the center to be 200 pixels wide, and the other two I said, as auto, Therefore, that's why they're stretching on top of that. I have a fixed height on the second right here, and the first road is also set to order. So what I'm gonna do is I'm going to basically change this first example to have the road tracks squeeze up to the top and have the contract stretches. They are right now. So do that. I just Dogo place, content, stud, and then stretch. And because we're using what I If I come down, we can see that the stretching still continues and that the Rory tracks have now stopped stretching and pushing towards the top also knows the second row track here is still preserving that 200 pixels of heart. Where is the older one has collapsed. So that's that example. For the second example that we have in here, I'm gonna make the road tracks, stay stretched and will push the column tracks into the center and see how that looks. What is content was a stretch. And since, uh, you can save if I scroll down the bottom now we can see that it's still stretching in terms of the road tracks say this first road track was said to order. So it is stretching still, and the other two column tracks that are on the an Assad here that onset to a fixed width of 200 pixels have shrunk, and everything is a long into the middle of the container. So I suggest you play around with that a little bit, you know, and try a different number of combinations just to get a good idea how that works. But that's on linen cover in this video, so see you won't in the next one. 39. Vertically Aligning Grid Items: Hello, everyone. In this video, we're going to look at vertically aligned Ingrid autumns. So let's get to it. Okay, so you may or may not have noticed this, but up until now, whenever we have sized out row and column tracks, it has also affected the size of the grid arms. This was regardless of whether agreed on him was allocated to an individual cell or it's been multiple road tracks, Colin tracks or both. Basically, what has been happening is that the grid autumn has been stretching to fill in the space it's been allocated to now. This may be what you want, but sometimes it's not what we want. What we may want is to have grid arms, handle it on sizing, and then we just say we're inside of a cell or range of cells. We wanted to be aligned. Now for this video, I'm just gonna be focusing on the vertical alignment off all of the grid items. So with that said, we can change the vehicle a moment off all our items by using the align items property. So let's get started and actually can say we've got a whole bunch of Gridiron City inside of each track. Road track, that is. And for the first few examples, the covering one individual cell for the last example with God and item going across to road tracks and two column tracks. Okay, so the 1st 1 I'm just gonna quickly show that stretches default. So just type a line items and go stretch, and you're going to see no change. Okay, which is what is expected. However, I can set the value off start. And what that will do is that the grid autumns will now shrink to a small that they can be , and I'll align themselves towards the top of each track. You can use end as well line autumns, and and when I do this, you'll now see that the items once again shrink and push towards the bottom off each road track center is also an option. So we go on Autumn Center save, and you'll get this result where it kind of looks like space around. But it's not okay. We're just doing it in a different white, using a lot of items off sent up to which the autumn is positioned in the center, off each run track. Now the last one. I'm just gonna quickly show you how it works. With autumns that's been multiple tracks. So if I go align items cente and scroll to the very bottom, you'll see that still, it'll on itself into the center. But not the center off a track. The center off the two tracks that it's spanning. Okay, and that's the important distinction here. It's spending to road tracks, but yet it's still aligns itself into a sent up off both of them. So that's all I want to show in this video. So say you all in the next one. 40. Horizontally Aligning Grid Items: Hello, everyone. In this video, we're going to look at horizontally along Ingrid arms. So let's get to it. Okay, so we say how we could control the vertical alignment of all of that great arms in sort of a great container. Now, quickly show you how you can control the horizontal alignment off the autumns as well. To do that, we just use the justify items property. Now, just like the previous video, most of the examples here have great autumns allocated to individual grid cell. Except for the last example. It again has the first autumn span to road tracks and two column tracks. So let's get started. So the values for justify items are exactly the same as the ones for a line autumns. The only difference is it horizontally positions the autumns. So at the moment you can see they're all stretching. So be no surprise to you if I come over and go justify items and said it to stretch and save, you'll see no change here. Okay, because that's the phone. However, if I said it to start, justify items start. What you're going to see is that the audience of now shrunk horizontally and they're lying themselves to the left hand side of age column track. Therefore, the Stein position. If I use end like side well, it does the same thing. It's start, except that it lawns it to the right off the column track, which is the end. Now we can center it to you, justify items center and the autumns are centrally positioned. Position themselves in the centre off the column track and then, obviously as well for spending tracks. There's no difference here. Interesting for Autumn Sina. You'll say that it's still spans both column tracks, but positions itself in the middle. Really straightforward. Once you know a line, items justify autumns. It's just exactly the same, just horizontally, since I want to show in this video, so I'll see you all in the next one. 41. The place-items property: Kelly ruin in this video, we're going to look at the place items property, so it's good to it. Okay, so now that we know, I had a very clear line out green organs and also had a horizontally along them, I'll quickly cover here how we can do both at the same time. We can do this using the place. Arms. Probably now this property has, as you might expect, two parameters. The first perimeter being out. Vertical limit. In other words, out one item's value and the second perimeter is out horizontal. Warm it again. In other words, out justify items. Very so let's say a few examples. But before we get started once again, understand In most of our examples, each grid item sits inside of one grid cell. And it's just the last example here that you could see at the bottom where once again, the first item is spending two road tracks and two column tracks. So let's get started. So for the first example, I'm going to vertically aligned. Aled agreed items into the center off the road tracks, and I'm going to position them at the start off The column tracks so to do that. I just talked place items when we go cente and start when we do that, we can say the arms old shrink and vertically their position to the set up and horizontally . It pushed the very left hand side before the starting position. Now I could also position and vertically to the bottom, off the right track and then into the middle. So do that. I can go place items and we got end sent up and say that. And then you can say that the autumns have shrunk again and they placed in the bottom of the right track. But in the center, off the contract, we could also do center center. So putting on both in the middle in both directions, so center, center and there. You can say that there in the middle, off the right track and there in the middle of the column track, we could say that we want them to be in the top of each row track, but then on the far right of each column track once again, I just got a place items and we'll go stock and and we get this result where all the items of place in the top of the road track, but they're placed on the very end of the contract. Now, in this example, I'm going to positional the greed autumns into the center. Both the road track and the column tracks. Uh oh, this guy. Oh, I feel just copy to about flight. So and place that down and save. If I go to the very bottom, you can see that the first autumn is in the center of both column tracks, and it's in the center of both road tracks. Item two is also in the center off its column track that's also in the center of its right track. Insane fraud in three. So that is place autumns, and that's all I want to cover in this video. So CEO in the next one 42. Vertically Aligning an Individual Grid Item: Hello, everyone. In this video, we're going to be looking at vertically and learning an individual grid on him. So let's get to it. Okay, so we've saying how weaken online, all of that grid arms vertically using the align items Probably on at great container. But sometimes what you wanted Teoh is very clear line an individual greed item differently to how all the other organs are vertically aligned inside the container. That you can do this by going to the actual good on him itself and saying the l on self property. Now, for this example, I'm gonna be just choosing the first grid item in each grid and changing its vertical Amit . So if the first example, I'm just gonna quickly show that the default is in fact stretch. So if I do this and I save, you're not going to say any change here in this first grid autumn and that's because stretch is the default now, he said, to start as well, so a line self start and save, and you can see the fifth grade autumn is now pushed itself up to the top of the right track and it's shrunk. We can use end as well like this and save. And then you can see that the individual greed autumn is pushed to the bottom of the right train. We don't see you send up exciting, and the individual greed on it is in the medical center off the right, right? And then, lastly, you could do the same thing from when it spends. I have a multiple Roy tracks and column tracks so I can say on a line that ought to still be center. Once again, if I come down, you can see that Autumn is still spending Bothroyd tracks, but it's being placed in the center, and that is all I want to say in this video. So say you all in the next one. 43. Horizontally Aligning an Individual Grid Item: Hello, everyone. In this video, we're going to be looking at horizontally aligning an individual greed auto. So let's get to it. Okay, So just like we saw move vertically aligning an individual item, we can also horizontally align an individual item, then this video as well. I'm gonna be just focusing on the first autumn in each container here so we can do that using a new probably called justify myself. So just talking like this and the default is stretch. So when I say that you'll see the first autumn here remains, as is we consider to start just like we did with a line itself. So just that and that Alanssi Autumn to the very starting position off the column track. Therefore, the left hands on we can use end and and it goes to the right hand side of the column track therefore the end week in years center as well. And the bottom is in the center of the common track. And then, obviously for Iowans that span multiple row and column tracks, we can do it for that as well. Set the center there as well, and that you can see that still stretches but it's horizontally scented across both column trace, and that's all I want to cover in this video. So see you all in the next one. 44. The place-self property: Hello, everyone. In this video, we're going to be looking at the place itself properly. So let's get to it. Okay. So just as we were able to handle the vertical alignment and the horizontal alignment of all of a grid items at the same time, we can also do the same for individual items. We could handle both the vertical alignment and the horizontal warming off that autumn in one gun. And we can do that using the place self property. So if I come over and say for the first example, I wanna have the autumn be critically scented, but start at the very start position on the very left hand side of the common track we can use place self, and we can go center and start now just understand that this does in fact work. It's just that my visual she occurred instance, doesn't understand it. But when I save it, you can see that there's a vertical alignment here, off center and horizontally. The autumn has pushed to the starting position that we could do the same for end as well, stalking good place itself inside vertically. I wanted to be on the end and horizontally want to be in the center. I say that we have that result, so it's at the bottom of the right track. But in the center of the column train, we can place it directly in the sent up off a cell, like seriously get sent up center and save. And you can see that the autumn is both vertically and horizontally scented. Inside of the track that's are inside of the cell, we can say I want to be at the top of the container vertically and say at the very right hand side horizontally so we can go start. And just like that, and when we save it, we can see that the autumn is being pushed to the very top off the right track into the very writer The column trying. And for the last one, we can center it as well. So we can say, for example, that and save. And there you can see that the individual autumn is still spending both road tracks and column tracks, and it's absolutely positioned in the middle off both the road tracks and the column tries , and that's a little wanna cover in this video. So see in the next one 45. What's in the project: Hello, everyone In this video, I was just going to quickly look at the project work. Okay, So, officially, congratulations for making it to this part of the class. And now what I wanted to quickly dio it's just show you some of the examples that you'd be doing is part of the project work. So what I'll get on my screen right now in the Web browser is a whole bunch of tabs and it'll I've got 20 times in now there is why 20 tabs is because I have 10 examples that I want you to build for the project work. So the 1st 1 is basically I want you to take the four islands that we have you on the screen the moment and I want you to convert it into four evenly size columns. And the columns have to spend all the way down that what container that you see here on screen? Okay, says the first challenge. It's probably pretty easy if you follow along in the class close ties to it. The next one is to build a simple side by So, as you can see on screen the moment we just have a block level element with two Children in it. I decide by content is the first item and then some kind of patron in content next to it. What I want to basically become is a grid that looks like this where we have a fixed size side by here on the left and we have basically the rest of the content take up the room. A space here on the right. Okay. Says that one. Probably straightforward for that, too. So closing that next one is to basically easily take this text that is horizontally scented and very clear century into the middle off these white section here. So going from this to that again, probably pretty straightforward. So it's that one. The next one is to actually take a metal dialogue that you would normally see on a Web page . And where it is right now is today top left corner off the screen or often overlay that's covering the whole screen. And we just want a position that into the middle of the screen again, Pretty straightforward. So nothing too harsh here. Pretty simple stuff so far. The after X one. I wanted Teoh challenge your knowledge around ordering of great autumns. So we basically want to go from one toe. Eight. It's sort of each grid and jumble, um, in different white. So this one starts with three and ends in seven. This one starts with five and six, 123 night and then all the autumns old around a certain why. Okay, so that's basically in order. Problem. I want you to work through that. The next one is to do with positioning. So as you can see right now, we have all the great arms kind of lined up going across the roads as sort of the columns and then going into the next rider to the runs out of items. But I want you to basically now build that. So it's a bit of positioning. There's a bit of spanning and things of that nature. OK, that we need to basically recreate this, right? Yeah, says that one. The next one is basically using lawn names. So even though it just like four audience and started grid, I want you to be out of build like a bunch of shots like this, basically going from bottom to talk in the first example. Then from left to rot in the second example. And if the last one of cottages shuffled the bottoms around and they're taking up a certain number of grid cells, French one. Okay, So I want you to achieve all this using long nights. So is that one. And then the next one is I wanted to build what is commonly known as the holy ground lie at . So we'll start off with something like this where we have block level elements and I want you to position each autumn accordingly. All right, so we have ahead at the top here, and it has a certain height. We then have the next right, which has a navigation that's a certain with followed by main section that takes up the entire space here and then the side on the right. That's a certain with. And then at the very bottom, we have the foot out, which is a certain high and also spans three callers. Okay, so we'll go through that as well. The next one is what is referred to as the media objects lie out, and the audio is that we have an image here on the left and then the remaining content ends up on the right. Okay? And that's not the case. Just for this. Add a media item. It's also the case for the comments on the inside. So you get this common format way of the image, say, on here on the left and everything on the right. And then for the comment. We have everything on the left and then everything else here on the rock. Okay, Probably pretty simple example that how about the last one is playing the most challenging ? I probably think of a lot. So we have a set of images, are all really big, and they're all piled up. Like so about that, right? What I want you to convert this to is an image gallery that looks like this. OK, so we have a certain number of columns and rise and the fires fit inside of each of the cells. And then we have one autumn that takes out basically two columns and two writers in this situation. Now, the key is here is that we need to take into consideration the view port. So as I shrink the screen here and we get to a point where the with is more than the height . Well, you'll see that the whole image gallery tries to stay in proportion, right? So as we shrink the with and the smallest dimension, you'll say that we don't lose the any of the images on the screen there and then more so. If I come in and start shrieking the height to this point here, you'll say once again it continues to shrink based on the dimensions of the off the window . OK, that's the last one, and that will do it full. The practical examples now, it says, have had oral structured is if you pulled it down. We have a folder for each one and sort of each fold out. I have a before and after and a set of instructions. Okay, so for each example I just showed you, you come into the instruction start txt and you read what's going on in here. Can you try Teoh build exactly what I asked you to do it inside these instruction that before content is basically what you will manipulate yourself and the after content is what you can compare to after you're done. OK, so this is my answer. So what's in the instruction. All right, that's all I want to show. Good luck. Have fun that playing with those practical examples. And once again, if you have any questions, don't hesitate to reach APP at this point. Congratulations and going through my class and I hope to see you in the future while