CSS Grid and Responsive Web Design - Mastering CSS Grid | Daryl Duckmanton | Skillshare

CSS Grid and Responsive Web Design - Mastering CSS Grid

Daryl Duckmanton, Experience is our biggest asset

CSS Grid and Responsive Web Design - Mastering CSS Grid

Daryl Duckmanton, Experience is our biggest asset

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
28 Lessons (3h 34m)
    • 1. Introduction

      4:42
    • 2. Tools And Resources

      4:41
    • 3. A review on media queries

      11:52
    • 4. Setting viewport for mobile and tablet devices

      3:27
    • 5. Positioning Grid Items using areas

      8:41
    • 6. Spanning Grid Items using areas

      8:03
    • 7. Defining empty grid cells

      1:38
    • 8. Gotchas with grid-template-areas

      2:18
    • 9. Building responsive grids without media queries

      9:07
    • 10. The grid property reviewed again

      8:02
    • 11. Implicit vs explicit grids

      6:01
    • 12. An introduction to the Autoplacement Algorithm

      2:47
    • 13. Understanding Flow

      7:13
    • 14. Controlling Flow

      7:50
    • 15. Understanding order-modified document order

      4:26
    • 16. Understanding locking

      12:21
    • 17. Locking grid items

      12:31
    • 18. Locking and responsive web design

      9:51
    • 19. Locking and responsive web design in action

      7:16
    • 20. Understanding Grid Spans

      4:29
    • 21. Grid Spans in action

      8:10
    • 22. Understanding packing

      5:51
    • 23. Packing in action

      3:36
    • 24. Bringing it all together part 1

      14:47
    • 25. Bringing it all together part 2

      14:59
    • 26. The grid property and Autoplacement part 1

      10:44
    • 27. The grid property and Autoplacement part 2

      10:09
    • 28. What's in the project

      8:47
  • --
  • 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.

89

Students

--

Projects

About This Class

In this class we are going to extend our knowledge in CSS Grid by now looking at how it works with Responsive Web Design.

As well as this we will dive deep into how the Autoplacement Algorithm works and how we can manipulate it to simply some layouts.

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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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, everyone, and welcome to your second class for the course, Mastering says as grit. So is this class full? Well, it's really for the people who already have basic knowledge instances. Great. It's already have a class here on skill share that teaches you the basics offsets that script. So this is the next evolutionary step in this federal course from building here. So if you haven't taken my original class here on the basics, maybe just check that out. First, make sure that you have got the bases covered and then come back to this class. If not, and you feel comfortable, then you can continue on anyone. The other reason would you take this class or who was targeted for Russian side is that it's for people looking to improve their knowledge in Responsive with this on. So one of the main purposes of ceases grid and why it exists is to basically simplify how to do responsive lived is on in your websites. So we'll be looking at a lot of that in this class. That's another reason to take it. And then, lastly, this class is also for people who are looking to learn more the advanced information. Iran sees this grid and basically things like the order placement algorithm and things of that gunshot, which are not things that are normally covered in other resource material. We'll be covering all that as well in this class. So then you might be asking, What will we cover? Well, the first thing we'll cover poorly in this cause is implicit and explicit tracks. I have detected my first class here on school share. You probably have seen a lot of explicit tracks the day we will also look at How was it? Tracks concurred in future videos. I think we'll quickly capital, while here is, will quickly review media queries and basically, how we use them. Have they been used before? Success grid and we may have a deadline. See how we can kind of avoid them as well. To simplify some of that is art. They will move into the responsive part, looking at the concept off templates and areas. Now these air fence was grid 10 flights in great areas, and if you took the first class that I did on this course, then you probably know what agreed. Airy is said. Speak well We'll be extending that knowledge in good areas in this part off the class, and then we'll move into a deep dive into the order placement algorithm, which has a lot of different concepts in it. And I go through step by step, exactly how old works and how it all fits together. Along with this, we'll also look at how we can change the behavior of S E says grids, based on the knowledge that we get about the one husband over them. Now I just want to mention a couple for things here. And the physical dimension is, if you haven't already realize this is actually a part two of a fully comprehensive course . So part ones already available here on school share, and I think it'll we're gonna have full pots. The 1st 2 pilots will be knowing striven, but you basically getting understanding of what see, says Grady is and how we can use it. And part three and four will be applying it to real life scenarios. So Part three will be asked building a chain application, using the knowledge that was gained in part one and two and then in part four, we'll take another step further, and we'll actually build a responsive clone off the YouTube website, okay, or at least one of the pages on the YouTube website. So that's the one thing I just want to quickly point out there that, if you wanna point out, is that multilateral material that you'll have in this cost will be contained inside of a file called Tutorials. Don't zip in the resource of section and then, lastly, for old project material, well, that will be in the project. That material does it fall. It's also contained in the resource of section. Lastly is always I just want to quickly sigh Good luck, enjoy the material and hopefully you get a lot out of it and plays always you feedback and reach out to me. If you stopping something and that's it, I'll see you all in the very next video 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 for those of you that have basically take in my previous class, he'll mustering says that's grid. You could probably skip this video. Now is I'm just going to be talking about how the resources and the tooling works in this class and for the remainder of the course. But if you haven't taken my previous class and you're just looking to improve your skills on responsive Web design misses its grid, then I just want to quickly talk about some of the Tuli and the results is that he used in this class. Okay, So as you can see on my screen right now, I have to windows open. I have a brass here on the left, which I used bicycles, the output for everything, and then on the right, I have my idea. Okay, idea of choice is something called visual studio cut. All right, so there's many of many texted it is that that you can use, but for the purpose of this class and basically remind of course, I used this idea. There's a couple of reasons for this, and one of them is what I'm talking about here in the browser called Lifesaver. So with visual studio code, you can install extensions. Okay, So if I come to the right time here, you can talk, paid in the extension marketplace, a dive here, something called live saver. And when I click on it and I'll tell you a whole bunch of details about what it is and things like that and you can click and install button up here if you haven't already installed it. All right, so what does it really dio? Well, essentially, what it does is it allows us to choose. I hate to Mel Fall, and if we come to the bottom of the Audie, you'll see a button down here that says, Go life. If I click this, it's going to open up that Web page in the browser and you want. So what's the big deal with that? Well, if I want to change something right, so say I come into this is thus far. And for this ally selector I go Okay. I'm gonna make them all red. Black sign. When I saved this file. It instantly updates the Web page in the present, so it doesn't order. Refresh for me. I don't have to come over and click. Refresh. All right, That's kinda why use visual studio card and this plug in will This extension should say this is to simplify the development. All right, so there the tools that I use in this class and pretty much the remainder off the course Now they say I want to quickly talk about is the structure of the falls. So for each lesson in this class, we have a folder, right? So all the folders here represent a worthy basically, to Taurel assets, their violins class for each father, we have a number that starts it. That number matches the lesson number that's in this class. Okay, so this is the third lesson, and then I have a name for the folder. That kind of represents what we're talking about. Okay, In short terms, if I go inside that folder, I have a pretty simple structure here. I have the HTML fall, which represents the detail you see over here and then for each specific Hey, smell fall. I have references to say assess falls and sod the systems folder. I have a basis s and then kind of like another Says says fall. They're represents the same time aside smell fall. Okay, We don't really touch the basis this fall because it's basically used to just pretty up the patch. All right, so if I come over once again, I go life. Yeah, how it looks right now is based on this base not successful. However, in sort of this other sisters fall. This is where we're going to do house. It's as good work. All right, So we're gonna change a few things that we see here may be uncommon. It's, um, staff. And things like that and that world basically change the behavior of what you see over here . Okay. On the left hand side. As we change that, this is the stuff we're going to be editing, adding, removing so and so forth. So I just want to quickly point out all of that, All right? And that's pretty much all we need to know for now. So see you will in the next video 3. A review on media queries: Hello, everyone. In this video, we're going to be looking at a review on media queries. So let's get to it. Okay, So if you already know how many enquiries work and say says you can gladly skip this lesson , if not, well, keep watching. Because in this re I I'm going to quickly cover how media queries work and success. This will allow us to understand mawr on what with jury when we're playing around with responsible design and using citizens grid. So if you tell my screen right now, basically I have a list of items after each other. Okay, The way I've done this from HTML point of view, is I've just got an analyst with a bunch of allies in it. Okay? And each allies number 16 So pretty straightforward, hasty Mel, it says It's a sense I'm using flex box now. I'm not really explain what flex boxes or what it dies already have a course on that so you can go check that out. And basically I wouldn't be focusing too much on the actual success that's written here in this video. You can check it out if you want. That's up to you, but that's not what I'm gonna be focusing on we're going to be for Agassi on is when certain say says is executed. Okay, So the moment, pretty much all of the stuff that's in here is common it out, and it's coming it out because I only want to apply it at certain times. And that's what these media queries of full media queries. Ah, the ability to assist the situation around, whether it be the device size or whether it's in a certain layout mode so it could be portrait or landscape those kinds of things. And then we run some certain sisters in that situation. So a simple example of this is so I I want to run the success I have committed here when the window with is a minimum 768 pixels wide kind of Suffian comment this at the moment, it's going to always run regardless at the moment that with this window is in fact only about 564 pixels wide, so this shouldn't be executing it. So how we get around this is we write this thing called a media query, and it looks something like this. So you start for that at symbol a top, the word media. All right. And then it sort of that we put brackets inside these brackets. These air kind of like the rules which this systems will be executed under So saying that we want a min with off 768 pixels. That's how you would rot it. Okay. And then all we have to do is use the curly brackets. Then this say assess that we wanna have run fits inside that media query that all right now if I run this and save, we can say that we no longer have to say such that We just uncompensated running. However, before I slowly grow the window and reached that sit under in six day pixels, which is the bads. Still, guys still going still going, getting close. Now we're at 7 57 66 So right now there, you can see that that success has been executed and what's done is basically it's split the list autumns into two calls. Uh, again, it's using this system in hell front. So this is how we can basically change the behavior off their layouts based on the with the window, right? And this is generally what you will do it. This is basically a mobile first approach. So normally what you will have is the CSS that you want for a mobile device, right? You would leave that outside of the very top of the file. And then as you grow your window out, it's a different device. Sizes that are a little bit wider. You would apply different CSS or different media queries. So this one is when the minimum width of the windows seven and 68 pixels. We're gonna execute this stuff now for the next one. Basically, I'm going to do the same thing again. I'm going to do it when the width of the window is 124 pixels wide at a minimum. Okay, So essentially, all I need to do here is come up here, copy this, bring it down. And I had a really brace after it. What's a but spacing like that and then and then changed to 17 60. I just 124. Well, inside at the moment, it's not employed, but that's because we're not at 124 pixels yet so as I make it wider and we continue to get water, water, water until we hit that. There it is there. Okay, so currently, we're 130. 500 a three pixels and then that run, okay, that want that in the intention. So now we're at a point where we've got three fouls. So that is two examples of how we can change the behavior off our layout By using these media queries now, I would only show you basically a men with example so far, but they're obviously otherwise, we can do this as well. So we could say that maybe between you having a minimum width of 800 pixels but that up until we reach nor 100 pixels, we're going to share the background color off these list times to be read. Right. So we write it something like this is the first all just I'm comfortable with God so we can see what it does. And you can say it just makes everything red. And then I'm gonna write another media query, lock this one up here. All right? So copy this down and save, and it'll just invent this a bit right now, the mid with I want for this one. I said it was 800 pixels. One. So if I save this right now, we're going to civil. We've normally saying currently wherever lips I drank the handle. I don't want to drink the window as the bring this down. Once it gets under 800 pixels wide, it'll go blue. Right? So assumes excite and they are ready now. That's all great and everything. But once we get to a maximum of 900 which is about here, we wanted to go back to blue. All right, so how do we do that? Well, what you do is you can put in end after this and at another piece of criteria. So for this one inside the Max Max with is no 100 pace. Als like that. Cool. When I say this now you can see it goes back to blue. They fight. They are shrink below the 900 pixel range. We could say it goes red and will stay red until we get under the 800. Okay. What? To go back over 800. It goes right again until we reach 900 and then once again, it goes back to blue. Cool. Now there are different types of media, so to speak, that you can work with so the one would be working with. But they fault is screen. So sometimes you may see something like this where it's on my explicitly type screen and then put an end like that and save. And that doesn't really change anything in the context of what I'm showing in this video, because we're already using screen sprays. Basically, your window, your brassell window. OK, we can use other things like print so this sisters would be executed and say, a print preview screen or something like that. But I definitely show that here because it's not important for what we're doing in this course. Okay, just understand that sometimes you might see the word screen when they're talking about applying certain, say, assists only to your browser that now, so far we've looked at men, wits, match wits and media types. But sometimes you want to change the behavior of your CSS based on with your important murdered or landscape mind. So I say, for example, I want in this next one, so I wanted to be green. The background that is the list items when army the landscape mode. So the moment in a portrait mine said this should not be grain. Okay, so how do we do this? Well, I'm gonna talk it at the start of a media. And then inside of the brackets, I go orientation horserace. All right? In fact, sorry. Landscape, I should say, No quarter landscape. All right, so when we are in, let's get married. I want things to turn green all right, and save. And then you can see the grain guys, why? They are in order to execute landscape moan, you basically have to make the height of the window smaller than the winds. And there it is, right there. So soon as I made the hard the window small in the width, it went into landscape mode and therefore the background color off the items with grain as I grow it again and go back out. And now the hard windows big up with back in portrait mode. All right, so that's how you can apply success to only landscape mode. And then we can also do the same for portrait by like so say I want this to be applied again. So at the moment the text is yelling Well, I only want the text three yellow when in portrait married which we are in the moment. But if I was to make this landscape mud, it shouldn't be alive. Okay, so let's fix that out. So get at media, the orientation, portrait and size. But it free is that I said in save. Now we can see that now that we're in landscape mode, it doesn't apply that portrait saying, However, as we come out of landscape, my what's gonna happen is the text guys yellow and the green guys away. Okay, so the situation is always gonna be a In this case of the win for the window, it's going to be red with yellow I and then it's going to be great. With what? Okay, who now? Obviously we can also add extra restrictions to this, so we could say no, only just orientation. But maybe we want the men with to be a certain with as well. So maybe when it's ever 1000 pixels, only then will be allowed that text to go yellow. All right, so finding out save this. You can say it's what that's why. Because we know over 1000 pixels so funny. I drag this out all right when we get to be on 2000 pixels just right that you can. Then I say it's going yellow, However, because it only happens in Portrait mad. As soon as we go into less got married, you lose that yellow text. Cool. So that is pretty much the basics off me enquiries. And that's all I need to cover in this video because that's all we really need to understand for the rest. This course. So that's it. I'll see you all in the next video. 4. Setting viewport for mobile and tablet devices: how everyone in this video we're going to be looking at setting V port for my ball and tablet devices. So let's get to it. Okay, So if you've worked with mobile first applications before, you probably know about view ports and had it configure them for our mobile and tablet devices. If say, you can skip this video if not, well, I'm just going to quickly cover what can happen sometimes when you don't write a certain piece of HTML, it's all of your word document. And the example is right now, as you can see on the screen, I have a view port they wide as a with of a galaxy s five. OK, so I could achieve this by clicking total device still bar in D d bucketfuls. Okay, the current width of a galaxy s five is 360 pixels wide. However, what I'm saying that here is two columns and now if you remember from the previous video, we said that we only want to columns when the width off the page was 768 pixels. This is sort of 60. So what is happening here? Well, what mobile and tablet devices try to do if you don't specify certain. Hi html In this case, it's a minute meta tag. It will try to act as if you're trying to view this on a normal distal. Okay. And so it trust the factor in, you know, zooms and things like that. So it zooms out a bid and tries to get it all fitting on the device. The problem with this is it can sometimes create very small he websites that are hard to work with, right? And the purpose of off doing media queries is so that we can view things differently by something with the device. So we want to take advantage of those things. So what we need to do in their haste email is we need to provide a special made it element right on the night of it is called Vieux Port. And then we use a content attributes, and for this we specify what we want the width off the view port for our device to be okay . So currently it's whatever it needs to be to fit the content. But what we want to set it to is the device with like that okay there. The other aspect that we want to do is ensure that the zoom off the device is at 100% for that device so you can pinch it and pinch out things like that. Well, we just want to make sure that we're not doing those things. So we use this thing called initial scale and we said this toe what? Like that? When we do this now you're going to see that the Web page changes and that's going to a single column, right? Like we expected. And if I change the device to something, maybe a little bit bigger saying iPad well, and I pad is similar in 68 pixels wide, and you can see now we have two columns. If I got water again into something bigger, we get three. It's an iPad pride. So that is just something to keep in mind when you're building your websites is that you must include this view port minute element. Otherwise, you won't get the behavior inside of the mobile and tablet devices that you want, and that's a little want to cover in this video, so I'll see you will in the next one 5. Positioning Grid Items using areas: Hello, everyone. In this video, we're going to look at position Ingrid autumns using areas. So let's get to it. Okay, so now we're getting to the really cool part of the course. This is only the part you've all been waiting for. And that is how can we use this that's created for the purpose of responsive Web design. Now, for this video, I'm just gonna be focusing on the simplicity of moving items around when the width of the screen changes. But by the time I had done in the next few videos, you'll be able to handle most responsive Web design problems fairly easily. Now, into this point, we'll be moving arms around using grid lines, either by number or by name. But to be honest with you, I really ever do this. And as you will see in a second, you'll understand why. So let's get started. So in this example, I have at the moment I have a one column grid by as many roses need the feeling all the items, okay, And that's because I'm just using the defaults of says, That's cred. I'm not specifying any rows or columns for this Great at all okay? It's really straightforward. I'm just saying the display type to be great. Then there's HTML looks very similar to what was seen. The only difference is I've added ideas for each item in the grid, and that's so I can target them in my CSS CEO. Now, how responsibly Design works insists its grid is it works on the concept of greed areas. OK, so what we normally do is we at a new probably called graded tim flight areas. And then we use it in a certain why. So how it works is for each runner that we have a great deal that we wanted agreed. You'll add a string on this right, And then you add one like this. You just keep adding them for each road. Which war? Okay, so we want in our case, we want six of them, right? And then we end with a semi colon. Now, obviously, an empty stream doesn't really do anything right. So what are we talking here? Well, we just hot at the moment because we have one column, a single name that represents an area to say I one area I to be in the first road. We just taught a all right. If I talk, be this one. I have an area in the second row called B. Then say then day E and F. I'm just going to a lot this for now. Okay, now these are just names of areas. They're not necessarily in matching out to any items off any case. So what we need to do is define a grid area off that name. So for the autumn, I I wanted to appear in greed area I So he's taught that right At the moment, if I save this, nothing breaks yet nothing moves either. Okay, it doesn't move because area I is at the very top of the grid. However, if I was to say, make the top one effort in the bottom one A like that, you're now going to see that autumn I is appearing at the bottom, right, because that's where area exists. Exists in the very last royal vow grid. So 100 ounces at the rest. What? This bay, great area C grid area de area E and finally agreed area. If right. So these all these names match one of the letters or the area. Now that we give inside of this property here so far on this, we can see everything is pretty much in the order we specify. So item F is at the top because we've got if area at the top I don't number be is in the second round because we got be there, say, say, D d e a and then I I now I've just specified a single letter for the grid area. This could be 18. We war. So it could be, um, food. Right? Come down to where greed area is for if and got food and safe. Well, it's the works. Okay, So I'm just using letters of the moment just so I can represent each item area. Turn it back to what? Waas and I made a mistake. What did I do? I did not trances back to f that cool. Now I'm just gonna swap some things around here. So what? What say did top? Let's get, uh what can we follow after day we've got If after that, I then see, then be then e. And this just indicates that we can order. Okay? It's a days there at the top because the areas of the top if the second i e c b, how do you get the picture of all this? Now, this is a single column template. All right, so we have a single value inside of the double quotes. However, what if we wanna have to? Cops. All right. What? This? This look. Look. Well, I'm gonna come down and do that. So it might be a query for men with a 76 site. I'm gonna go agreed. Template columns. Unless it is to repeat off to buy one fraction. Okay, When I run this at the moment, everything appears in the first color. And that's because up here, that's what green template areas has. It has only one Veii. Okay, so the first value is everything goes in the left column. If we want to spread things over two columns, we need to redefine this property. And how it works is silent. Have three rise. Well, we have to do is go great. A template areas. And now I just have three individual Lawrence like that. Okay, then. So this one I'm gonna put a first. That's the island matches area. I will come first. in the top left then be will be directly next to it. Then the next round. That's a season. The left then days in the right and then is in the left in the last row. And if is in the write off the loss, right? So when I do this being gone on, I is in the left column first, right, be in the fiscal on, right? Right then see, then do even either f cool. And that was really easy to achieve. All we needed to dio, which has changed the area. Tim Flight and the number of columns. And we didn't have to do anything else here. We didn't have to say, you know, I don't a move to line 1 to 4. Whatever it is well we had to do is to say, OK, that's the area it's associate to it. I'll just change the definition of the area and therefore moments that location really, really stuff Now to complete this, I'll just start example of three columns got greed Tim flight columns, and this time we got over paid off three by one. If I and they will have grid Tim plight areas and hopefully you've guessed it. We want just to rise this time I s a B C the a f in size, and at the moment you don't saying that. But that's because we're not wide enough, so we'll make us great water and the East Sea three columns to rise where everything is in the order. We asked for it. Now, if I go, I'm gonna make CB on the last. If on that this right, you'll say they swapped. Very simple, right? This is incredibly easy and incredibly powerful in terms of what it can do it all right, They probably the biggest annoyance of it is that you have to set the areas for you taught him at the start. But once you've done that, shuffling around things based on media queries is really, really cool. So that's all I want to cover in this video. So see you well, in the next one 6. Spanning Grid Items using areas: Hello, everyone. In this video, we're going to be looking at spanning grid autumns using areas. So let's get to it. Okay, So in the previous video, we took a first look at the grid template areas property. We saw how we could use his property to specify a list of areas with Greek antenna giving each area night. Then we lay how we could use the grid area property on each grid, autumn to position that item in one of the named areas. However, we only ever allocated an area toe, an individual grid cell. But in reality, what we also want to be I would do is to find an area that can spend more than one cell. We need this, so I agree. Lines can still easily spend multiple road and will column tracks. So that's what we'll be covering in this video. So let's get started. So what you see on your screen right now is what we want to get to. I found in terms of how we want things to be placed out. And I've just put some texting because the reality is this is the lie out. We're going to have pretty much for the YouTube application in terms of the main area is right. So we have a head of section. We have a video player that's in one cell in the second row. Then we have a title section, which is in the next road in the first column. Same for video comments in the fourth Ferreri First column. Then we have a rely video section that spans free rise. That's in the same column. And then finally, we have foot of section the barn, which he's in the fifth right and spans both columns. Okay, it's a little bit spending Gary on here. So what we have at the moment, that is the following. We have basically six items in a three by three grid right on The hasty Mel is flat like this, so we have a head out that we have the video player. That's what's in here. Title comments, total comments. Well, I V s foot up, lively as full up. So we're just using order placement at this point to put these things in the place run In terms of the CSS, I have to find two columns here off one. If I and 2 50 That's why you're saying when you say there and I've also specified five rides, not three, because we haven't indicated how these arms are going to be span jet. Well, Ellie fills up enough for three roars. So how do we achieve going from this? So this easy grin template area and grid areas. So the first thing I'm going to do and I come back over to what I wanted to pay on that specify each ride that I want in my area. Right. Said great template areas and, uh, one road to rise three rise Fouras five runs. Okay. And that's to represent each Roy that's in his lap. Cool. Now, looking at reasonable one here we have the head up bottom in buzz calls. OK, so do this. I'm going to specify hit out area now. I have to specify it twice because we're using it in both cells in this run. All right? And because we have two columns, that means we have to run twice in here so that Bisley is in the cutie. Tight this header area and span both cells in the first rider. Okay, Now, the next one, I have a second row where the video player exists, and then we have to rely video eyes next to it. Okay, It happens to be spending more than one road, but it will to break it down this reliably a section is actually still spending the second . Right, So we need to add it into the second round. So do that. I'm going to find an area for the video. Apply it first. So I'm just going to have video. Why a oxide the spice? And then I'm gonna have an area. And I am for related videos. Okay, So that means that video reliably ice will start in here to start off with front. Then for the next row, we have the video title, so we're gonna go video title like so And then once again, we have related video. It's OK, because that's spending into that role as well. So once again, I just talked related videos with forthright. Well, hopefully by now you've got the idea saying comments and then all cyber lighted videos again because it's spanning this road to and if the last one well, the foot out is spending both cells here for the ride. So we just taught Fuller and fuller. So hopefully by now you've got no idea of how this works. It's essentially a matrix, Okay, where each value or each area name is allocated to a particular cell in your grid. Matri's So the 1st 2 cells in the first row allocates of the head area. Then we've got a video player of the Talek AIDS, the first cell in the second road for like, by relying for years area and then this related videos is in every subsequent road in the second option because we will to practice into a matrix. That's where we're fit. Okay, so if I come and save this and go over to what we've got, nothing's changed yet. But that's because we haven't allocated out autumns to these areas yet. So we need to do that. Said 40 Hedda, I'm gonna sit that to the hitter area. If I do this now, you can see that the head has been allocated, leapt to the top now right at the foot of span, down to the one in five. And that's because we have that fourth road being one. If I okay, we'll fix us a minute. So The next thing we need to do is allocate the video player too. The video apply option grid area. Ah, video play out and safe And it doesn't look like anything news, because that's where prematurity waas. Okay, Nothing to fix the foot it quickly here, just greed area foot up and save. And then you say it spans the ball, OK? And it's using Max content. Cool, but everything else stop here. So we need to work with us that the title if we remember the title was here. And we've mentioned that it out matrix as well. The titles there so we need to do is come to the selected for that area video total in safe and now the Via titles moved down here and the video comments has moved up there. The other video comments, so we know that that's gonna be just called comets. So I just come down and guide green area comets like some and safe, and now we have the common stand here. Now the related video section hasn't spanned all the roads yet, But that's because we haven't specified the area name for it. We'll do that run out, and if we do this and we do it properly. Everything's work related videos. And as you can see, it does in fact, what the related videos section has now spend. All three rise that we indicated in our areas matrix here. So that is how we can use green template areas to spare grid islands. I have a certain areas within your grid, so that's what I want to cover in this video, and I'll see you all in the next one. 7. Defining empty grid cells: how everyone in this video, we're going to be looking at the funny and decried cells. So let's get to it. Okay, So in previous, for yes, we've seen how we can place items and spend them using this grid template areas my tricks and then assigning nine, it's in this area of my tricks. Two agreed on him. Okay. And that's created this situation where we can define all different kinds of positioning for the items as well. A sparing in this case, 54 But what if for some reason, we didn't want to allocate an area it out grid? Right. Say, we want this to be technically empty. We never want 18 to fill this spot right here. All right, even save it right now. What's gonna happen is the grits gonna break and the grid is going to break because it's expecting a value in the middle here, right? You need to give it something to tell it. Look, putting that now, we don't wanna put anything in that. So what do we do it? Well, you can use a period to the farm that this is an empty cell and that nothing should be placed in sort of it. So if I saved is now there you get the situation of where autumn them before is now only has Waas the one cell here. It doesn't have to spend two anymore. And with the identified, this middle cell here to be empty. Okay, I don't use this a lot, but it is available. So shot to you. And that's a long way to talk about in this video. So say you all in the next one. 8. Gotchas with grid-template-areas: Hello, everyone. In this video, we're going to be looking at Dodges with green template areas. So it's good to it. Okay, so in this video, I just want to quickly show you some of the gouaches that you might run into when fly around. Agreed to implied areas. The 1st 1 is if you give a wrong name. So if I save this, nothing breaks. Right? But the item that was allocated there, which is automate, ends up in this bottom right hand corner. And that's because the area and I'm that's allocated to that. Autumn doesn't exist in the Matrix anymore, so it gets confused. And guys, I don't know where in the grid. You want me to belong something. Sit down here. Now. What is this location? I was splendid. A little bit more in the future video. I want to bring that up right now. So that's the first problem. If you actually name something wrong, that's gonna happen to you. As we saw in the previous video, if I accidentally leave Yeah, And on a mountain one of the rose, it breaks the entire grid. Okay. It's based on the fact that it has to be the same number of cells for each road in The Matrix. You just can't have any differences there. The other one that you might run into is if you decide to choose Mawr columns that when you have deformity or matrix that doesn't actually break the Matrix, it just actually adds an extra column. And you just have that up that your matrix to include varies, Yeah, across from that that on the other direction, if I accidentally make less columns that will define in the Matrix and save it doesn't actually break that the Grenada. But these columns that have defined over here on the side in this third So you off the matrix, they become very shortened. Okay, there is what they become shorten is to do with another topping. I'm gonna mention in the future video, but I want to mention right now, okay, But there's some of the things that might catch you off God, if you don't show what you're doing. And that's a little wanna talk bad in this video. So I'll see you won't in the next one 9. Building responsive grids without media queries: Hello, everyone. In this video, we're going to be looking at building responsive grids with that media queries. So let's get to it. Okay, So one of the really cool things about CSS cred is that sometimes we don't even need media queries to make out grids responsive. For example, somebody wanted to increase the number of columns we want a grid to have as the screen gets water only we have to do this by adding media queries whenever we wanted the common counts when Crace. So I say for this first grid, I've initially set this out with green template columns set to throw in the pictures. What? Okay, which is kind of what we've got yet and then when the width of the window gets to set 100 pixels, I've had a media query to repeat that to be two times 300 and then also for 1000. I've said three by 300. Now what's what happens when I do this? I currently start scrolling to get 700 pixels wide for the window. You can still say the moment was right. That one column that's currently fixed the threat of pixels and as we hit 700 which we're about to run. Now you're saying that we got two calls. I also know that the second column doesn't actually fit inside the grid. Okay, so it's actually oh, flying outside the grid. And that's not a good thing, right? That may not be what we want. We may only want to have to set in column a PR when the Greek can actually hold it. No, when the width of the window is off, a certain with right now, sure, you can come in here and we can play around with this and say 7 30 And then once we get to 7 30 they're a little nice, right? But then that's a lot of guesswork, Probably guessing on what we need today. And sure, if you sit there long enough, you can get well enough to make this work. But it's just a little bit of overkill, and it takes a little time to work out right more so if we got 2000. So and they continue up with you to reach 1000 so really there. No, Nadie, they're up. You can see right there. We're still bigger than what the grid would bay the grated actually finished here, but the third comes first here, so we've got the same problem. Okay, So what I'm gonna do, is there any comment this stuff out? All right? Because we don't want to do it this way. It's not the best way to do it. I'm also going to change this. Okay, The first operating this back. So bring it back down. So what? We want to do it. Okay. Now, the cool thing is, we don't necessarily need to do this any ball, okay? Instead, we can actually take invades off the repeat function and using two special keywords. They are what I fit and what I fill. So let's see this in action so we can come over and change this to a repeat. And I must set what I feel for the first parameter. So I've nothing to specify a number. Okay. It's gonna be called. What if it and then for the 2nd 1 on this site threatening pixels. Okay, Now watch what happens when we do this. I save We still gonna have great at 300 pixels wide. However, as our increased to 700 pixels wide what we had before, right for the wind to the wind. I you're going to see that is I get close to it, Really. They really that say it still hasn't quite going toe a second column yet. And that's because, as we said, it doesn't have a lap. It would still have a lap pride. So it's not doing that yet. Once we get to about 7 30 well, somewhere in that mark now we get that second column, and that's because it fits inside the grid. Okay? And as I continue onward towards 1000 we knew that couldn't fit at 1000. It's a little bit, possibly as a before it can fit. That is roughly about 1000 thirties. Let it fits at their column, and then it grows like and it elects. You still got three fixed 300 uh, people columns, and you got the extra what spice. Okay, so that is essentially a way of solving that problem Now, this is all great and everything, but still that white space we have there a moment that may not be what we want. We may want to fill that space until we're able to achieve that very next call. Okay, that we can do this five cum Bonnie. This what I fit in the repeat with the Min Max. So far, God made Max and say 300 pixels. And then so I want if I is the Max, right and save. Now we get this situation where if I scroll this, it's going to continue to grow just like so until we rage a point where we can fit in two columns and then they split, all right? And then they continue to grow again. Just like this, just like that, until we get to three. And then that will continue to grind forever. Go. That's fantastic. That's a very Knauss y off doing responsive web design with that using a media query. Now, there's other options that we can do for this as well. So this one was using what I fit with the min max off 300 to 1. If I obviously, we can do exactly the same thing. But is there using wanted file? We could just talk order and you'll get the same result, right? So fight quickly. Run through this. I'm just gonna speak this up a bit. You can say it splits up, splits up and then continues. Good. That's what I fit. That is another option called what I feel. All right. So if I use basically what I put there and use what I feel this acts just a little bit differently. So if I save this, what's gonna happen is as I grow this, it's gonna look like what I fit, but one second to a certain point. So it's gonna continue to grow like what if it does and continue and continue, says three. However, once I can fit a potential fourth item in here, watch what happens. There it is. So what if it will continue the growed based on the number of items Where's auto fill will go is why is they need to go until they can actually potentially fit another grid item in here. Okay, so 1/4 item could fit in here if we had a full thought, but we done yes, as I grow this even further, what you're going to see is that we have potential for 1/5 1 So it adds more white spice and maybe if I can get what enough, there it is. We can get a six on Internet guys. That's kind of the difference between what I fit nor I feel right. And basically, we can also do the same thing with order for this one as well. So copy this and price down and changes to order, and we're gonna get the same behavior. Okay, Now I'm just showing order between between order and fraction just to be completely out cause you may see it used interchangeably. But they both achieved the same thing. Cool. That the last one. I just thought you know what the hell was which. Show an example of how you would potentially use a gallery for this. So I would say this You normally do something like this to go What I feel mid, Max. Well, say 200 this time and fraction. And because there's so many autumns with make this proper with again because there's 70 autumns down here. You probably problem all up if it was mobile, but there's we get to Maybe portrait married. You would get this kind of situation, and then, as you get towards you know, maybe tablet, you get that there may be a poor sorry. Let's get married on tablet. You get that and then maybe desktop. You might have five. And this can continue to grow right, because we've asked the do side. Now that is a limitation of using this, though we can't specify and Max COLUMN camp So it's going to continue to grow out. Would like this forever, right? And that may or may not be what you want, but that's how it works. Okay, cool. So that is how we can perform some responsive Web design in regards to column counts without using media queries. And that's all I want to cover in this video. So say you all in the next one. 10. The grid property reviewed again: Hello, everyone. In this video, we're going to be looking at the grid property reviewed again. So let's get to it. Okay, so now we have a really good understanding on how to do responsive Web design Using greet template areas and all these other responsive based techniques, I thought that we should go back over the grid properly yet again. Okay, because we need the fact that these need learnings into how we can implement it for that property. So what I have is three examples I have basically one that has a bunch of arms just positioned in different locations. I just kept it simple and went on 10 into our in 3456789 So that's this one here. Then I have another example where I use my name's in my great template, rise and great template columns. And I want a factor that in as well as green template areas. OK, so we need to take into consideration all those things and then I'm using great wrong grid column that here for whatever reason, but it's there, OK, who was just doing it for autumn 10. And so our intent is no, actually existing in sort of a good template areas. So I've used a great run A great column to do that. Same agreed on. Um, 11. There's a lot this stuff here. And then lastly, I want to show an example of what doesn't work. That you think police should work. Okay, so let's get started. So what they do is I'm going to go to the very first selected here, and Reef acted this to use the grid property. Okay, so how it works is I'll start off the grid like so. And the first thing I need to do, believe it or not, is do the first, right. OK, so I'm going to grab this stuff here like set. Copy that in and paste, right? And then after these great area definition for this right, I'm going to specify the track size for this right, which, if we look at the repeat, is 100 pixels like this. Then what we need to do is go to the next right into the same thing again, right? So we can just grab the second set of values here, and I still and then once again, we know it's a 100 pixel high, right? So we just talked about under pixels. We do the same again. We grab the lost Long in the Matrix, dump it here, and then once again, we know it's 100 pixels go hopefully safe. I you understand that? Cool. And then all we need to do Balloon knot is going forward. Slash because that's the rose. Done. And then we just defined out columns. Now we're using a repeat off one if I But what I'm gonna do here for the moment is got one . If I one if I wanted five, all right? Now, if I got and removal this stuff now, cut that at and just save we get the same result. Okay, so we've been able to redefine all of this stuff here to just the one grid property. Oh, so that's that example Done. So if the next one we have lined names included is part off our great template rising greed to play column definitions, but the idea is still the same. So we go grid, we got a new lawn and we grab the same first line. Looks in a definition here, if I can Good boy, but he did work and then straight after that, What we do is we just had our track size, right? And then before all this, because we have one specified down here, we put it in front, off the matrix like show, Like so Like that. Okay. And then we got the next line, and we don't have a name. So we can just put in, okay matrix for that line, which is this year. And then once again, we know that we're dealing with 100 pixels. I was gonna 100 pixels the next one. We do have a name for it. It's called bro. Three like this. That will do that. And then we'll grab that third line like so. And once again, it's 100 pixels. And then finally, all we need to do on the very end, it's just top end. And that represents this end. Yeah. All right. So that's this part done. Okay. And also this part down. Good. Now we just need to do the calls. So for this on in the door's guy ford slash. And then we basically can take exactly what's here. Waken do that because we already have the one If Isil separated and we know Easy. Repeat. So when I do this, I'll take that out and save We get the same result. Okay. Said I don't number 10 and is still spanning. A zit was before, and Autumn 11 is still spanning inside of that grid. And then everything else is positioned inside the grid. All right, so we don't see I don't one here because it's hidden by item 10. But it's there. OK? Saying we got an four. It's under these on and 10 before. I was to take out this information here, so common it that for the moment we get the 10 underneath, but don't worry about that right now, but the one and four is there. Okay. Oh, I'm coming. That well, Look at the same deal down here from it. That up and you can see that it is also there, and seven is actually hidden under here. Right? Cool. So that's that working now for the last example. We have repeats, right for the rows and columns, and we also have areas. So you might be thinking to do something like this, right? So will come up and go grid, and then we'll have our lines that we've got out. I'm one on two blocks set, and then we've got one of our pates, which is 100 pixels. So we got one of pixels in the next line. I'm just going to talk it out. It's time on three autumn four 100 pixels. You got a call that covers the rows and columns, and then you'll go Fine. What I'm gonna do is I'm going to use the repeat function because that's what we using here . So I'm just gonna copy this into this. If I take all this to let that at a semi colon here and save Whoa, what happened then? The grid is actually broken. So the issue is a soon as you use a great area. My tricks like this. Any columns that you define have to be individual like this because I have to match up to the columns there in your matrix, right the way using or a paid so it doesn't quite recognize this yet. So we can't use that. Instead, we must always specify what we want for each column. And when I say this, then we get the results you want. So just a little gotcha there with that. You know, it's caught me off guard the first time I used the grid property with I matrix in it. But that's just how it works, Okay? Not sure why you can't. Issues were paid. Maybe. Is yeah, under the hood. Not easy to work with. I don't know eso, but that's how it works. The money. Okay, so that's all I want to cover in this video, so I'll see you won't in the next one. 11. Implicit vs explicit grids: Hello, everyone. In this video, we're going to be looking at implicit versus explicit grades. So let's get to it. Okay, so three others course I may have skipped over some situations where you may have seen an extra row. Also be dynamically added to a grid. For example, if we get me to a very first tutorial where I showed you how to create your very first Greek antenna, we saw that the grid by default created one column and then as many roses needed to fill in all the great autumns. Now it is true, this is the default. But I didn't tell you what this occurred. So that's what this video is all about. Now, if you don't show what I mean, let me show you this. So if I come over and I go display grid like so and save what you're going to see is basically no change. However, what's happened under the hood is that we now have a grid that's one column wide and then we have many rose as the number of grid arms that this great container should halt. Right. So what is going on here? How does this work? Well, since his grid has the ability to create what we refer to as implicit tracks. So in the case of our example, right here, the success grid system looked at how many items went into place in this grid and then made the decision that we need at least one implicit column track, which we say right here and then an implicit road track for each individual grid item that we want a place in this grid. This is referred to as an implicit grid because we never explicitly set any rows or columns . However, assumes I do something like this. Reich agreed. Template columns repeat to one. If I What was done here is what they are created to explicitly sized Colin tracks. Okay, we still have out to implicitly sized road tracks, right? But we can fix that by just going grid template Rose repeats, then go to almost 100 pixels. And there are road tracks also explicitly set. This is referred to as an explicit grid because all the autumns fit inside of a grid cell, which is made up off to explicitly sized column tracks and to explicitly size road tracks. We don't have anything at sort of this explicit grid that can become implicit in this nature. Okay, now, this is great and everything, but obviously, we may not always know exactly how many items we're gonna have an upgrade. And because of this, that's why we have this implicit road creation in the first place. So, generally, when you will do in a lot situations, you'll do something like this. You'll go display greed, and you'll set the number of columns that you want, but this and then you'll just go. Okay? How many arms we have? Nothing to worry about it. Right? And then you get this situation right. What we have implicit rise created. And that's fun. That might be Which one? The poem is Is that the size off these implicit rows based on the size off the content that's inside of them. Right. Well, we may want to make this bigger. Okay? We may want to make this your 100 pixels by default for anything that's newly created, right? Can we actually do these? The answer is yes. So, in the study example, I can show you how that works. So once again, displayed grid. I'm gonna go agreed template. Comb What? That and I got repeats. Go to 25 just like that. Right, So we have the same as we have above, and then I'm gonna use this new property. Cold grid water runs, and that's sent is 200 pixels and watch what happens. The implicit rows have now grown to be 100 pixels high, so this probably hear green or rose basically allows you to specify a size off your road tracks when you haven't explicitly defined, you'll write tracks by using grid template rose. So, for example, supposed to come in here down degreed template, rose and salmon. You specify the 1st 2 road track I don't want Make that 200 pixels. What you're going to see is the first right track is now explicitly said to 200 pixels about the implicit one is still using that default off 100 pixels. Okay, and then, lastly, we can say that we can have an implicit column as well, right? So if we don't ever use grid template columns and we do something like this, it's played greed. You have created 10 flight Rogers this time, so we have four items. Some of these A repeat full and we'll say 100 pixels each. If I do this, the great still not gonna file. So in this case, we have an implicit column track. But we have four explicit road tracks. So hopefully you get the idea Now off what an implicit track is on what explicit track is and want implicit grit is versus an explicit grid and the combination that took okay. And that's a little want to cover in this video, so see you won't in the next one. 12. An introduction to the Autoplacement Algorithm: how everyone in this video we're going to look a introduction to the order placement algorithm, so let's get to it. So what is the order placement algorithm? Well, essentially, what it is, it's It's the algorithm that says says, great uses to determine the positioning of that great arms within ABRI container, and it's based on a five sets of criteria. The 1st 1 is what we call the flow of our items within a Greek container. Now, up to this point in the course we've always seen items start from the top left of agree Container and move along all the column tracks towards the right until we get to the last contract and the new got into the next rod. Well, this could actually be changed on will say, here. We can do that in an upcoming video. The next set of criteria is what we call the order Modified document order, and this is set fage Grid Auto. Now, if you remember back in the order video real to the order property, and I explained in that video about the difference between using the order property versus the physical positioning in the dumb Well, that's essentially what this is. But for those who want to forget how that works, we'll cover it once again in the future video. Then we have this concept off locking, and basically it's applied to each agreed on, so we can do things such as love items to specific rose. We've been locket to specific columns, and then we can look it to a grid cell or collection grid cells, Okay, and we'll explore that as well. It's coming video. Then we have. What we referred to is the grid span of age grade autumn, so that basically determines the size of an autumn, and the size of the autumn will determine where it could be placed inside of a great container. So is that concept as well? And we'll have a video on that as well. And then, lastly, we have this concept of Paki, which is to deal with basically holes that could be created in your agree container based on certain things that you do when you're placing your items and we'll see what the options out for that as well in an upcoming video. And then the last thing I just want to mention is that the order. Pleasure algorithm in the W three C specification is also known as agreed item placement over them. And that's all I want to cover in this V I. So the next video, we're going to start off with the first set of criteria, which is flood. So see you then. 13. Understanding Flow: how everyone in this video we're going to be looking at understanding for So what is flood ? Well, essentially, when we talk about float, we're talking about the direction in which Gruden lines are placed inside of a Greek container. But these great items must not be explicitly placed. Now what does that mean? Well, I'll talk about what explicitly plays Great arms are in the next slide. There are two directions of flow that we can take one we've seen throughout the course, which is that the fault? And that's a road based direction. But we can also flow items down columns as well, and we'll say, How would you do that in the next video Now? The other thing you need to keep in mind when arms are being placed is that there's basically what we consider a virtual cursor that kind of keeps track of which cell we're currently attitude before we process the next item to be placed. Okay, we'll say on example, for this means it have coming slide, and basically it's we've seen so far for row were placing items from left to right across old Cohen tracks until we get to the last home track, to which we then collapsed into the next right. The half a column. It's in the opposite direction. We go down each row for a column, and then when we get to the last right, we move onto the next column. So it's a top to bottom approach. We'll see some examples of that and no island just enough coming slide. But in the next video. And lastly, if we run out of grid cells that process, then obviously we get those implicit grid tracks. Okay, now we've seen it so far for implicit Roy tracks. But when we change the direction of Fly, we'll also see how it can create implicit column tracks again will say that in the next video. Now, what is an explicitly place? Great on the ask? Well, essentially, it's made up off a combination off the following properties, Bain said. For your great on him from they, uh, greed Roy Start and Greek columns start created, roast. I agree. Calm end greeted Road end and Greek on start Oh, greed Row in and greed Cullman. So basically what I'm trying to say here is that you need to specify a column based position and a road based position in order for an item to be explicitly place someone. Okay, so when we talk about flow, we're not referring to these items were referring to the ones that don't have this configuration set up. Okay, Now, another thing you just don't understand is obviously good column and grid road can represent one of these combinations as well. So just take that in the consideration When you said values for these that they can also explicitly flights crude arms. There are the other thing tonight is that if you use the span keyword, this is not actually defining an explicit position for a good autumn. What this is really doing is just the Termini where the island is going to be moved to relative to where it would have known we've been placed. Okay, so this in this situation is not considered an explicitly place to greet on. So now that we understand what explicitly plays great arms up and have it in factoring to flow it all, let's now look at flow in action. So say we have a grid which is three columns wide and three rows high, and we want to fill in with site 12 ones. Okay, at the moment, we only have known. So how it normally starts is we have this represented by development. In this case, I'm gonna do for the classic contain up and then when we haven't actually added in the autumns yet, we placed this curse out in the top left grid cell. Okay, now I'm basically representing this cursor is an arrow, but it could be anything. So along comes are the number one which gets added to our container. So its gains against okay, we'll get our first item. We know that. You know, in this case, off this example, it's only one column wide on one road high. So we just place it in that first cell just like that, Okay? And then we move on to the next column place to and then place three, and then we get to the end of the rock. At this point, it's been identified that this is a road based flow. So therefore the curse up goes all right around and columns. I'm gonna move down to the next run. I am. Number four comes in, and that's been placed into the first column track off the second run, and this basically continues on until we run out of out defined road tracks. All right, so we've got at three fully explicit road tracks fulfilled in, but we still have three autumns to gut. And this is where we create out implicit road, track the Kherson and lose down to the first column tracking that implicit road track and then places the rest of the autumns, and this process will continue until all items have been filled in. Okay, so that is flowing action in a road based direction. And this is what we've seen so far in this course. But what about Colin? Vice direction, That is that look. Well, it starts off the same in terms off where we start outplacement, which is once again in the top left cell. So our number one comes in and we got a cool that's gonna fit in to this cell in one place it like So the difference after this, though, is that we don't move onto the next column track. We moved down into each road track persisting two and three in each off those rose until we hit the final right here, so it process all the autumns for column number one. So then the curse it goes, Okay, we need to move to column number two and sides placing one of them before in that first right position. This process continues once again, into it filled in allowed explicit columns. Now, once again, we have three autumns that we still need to fill. So we have Al Explicit Comb track get created. We go to the top of that, and then we just process as we did with the rise, but obviously down a hole in this time. And then we just continue to do this until Mariah Autumns once again, and that's it. Really. That's really the only difference between to two different flights. So that's all I want to cover in this body. I In the next 30 I will say how we can do this practically so. See, then 14. Controlling Flow: Hello, everyone. In this video, we're going to be looking at controlling Flood. So let's get to it. Okay, So what I have on my screen right now is a bunch of grids where the items have been placed by default now was that they felt well, we know it to be right based. So you can say Autumn one starts in the top left, and then everything condom boots over across all the columns and enforce the next row and continues to do that. Okay, Now this is the equivalent off sitting a new property, cold grid. What I fly, like, say, to run. If I save this, you can see there's no change. All right? So if we want to change this from a road by system toe, a column based one, well, we just used that property and go create what I flow and said that the call inside and we could say in the second example, what we have now is that arm the one still starts in the top left and now goes down the road tracks until rich the bottle there goes, the next column goes down, next column goes down, and then we hit a situation where we no longer have enough autumns to fit out explicit greed. So an implicit column is then created. So now we're in a situation where we can actually create implicit columns. Now, you may want to resize this or basically control the default size of these. All right? Like we give me rise. So how do we go about doing that? No, If I copy this floor here pretty dense. The next line we can use a property called Rid Order Clones. So we had agreed Order Rose that we used to control the height off Alan Blissett Rose. This will control the width of an implicit colors. So if I said this to with 700 pixels and save and come down to the third example, we can now see that the column with is water I It's 100 pixels. What? Go now. What if we want to say how autumns applies Iran Autumn set a spending OK, so let's say item number three in this grade, which is currently road based, is asked to guard two columns wide and maybe two rows high. Right? So I can come in here and say, Well, first. Want to make sure that we've got a great auto Floyd here of right, like set. And then once we've done that, I'm going to sit a grid column. I've spent two and agreed, right. Spend too as well. So this is not explicitly sitting and autumn Always saying here is we want the autumn to span two columns and tours from its kind of position. So if I say this, what we get now if I come down is we see with God items one and two stopped from the top left and move over. Right? And they just feel those two cells. But then autumn number three guys Okay, I'm going to start in this cell. But I can say after another cell where I can allocate the second column off this actual area for this autumn, and then I'm gonna spaniel side to an extra right. Okay. So fills up all this space yet, So if we think about what the cursor would have done, it would go Okay. I don't want yet We can put that in there. I want to yet we can put that in there. I am three. Yes, we can put that in there. But I'm also gonna allocate extra space for these other areas here. Then it would have moved on. Said Okay, no, can't allocate something here. And that's because we already know Autumn Three filling that space. So it dropped down to the next road. Yes, we can allocate four. We could allocate five. No, we can't allocate six year because it's filled. Kind of like 86 here either. Now we get allocated six and then seven, and then I and obviously no one. Okay, so that's how that Chris would work in this example The hour for a column based version. It's very similar in nature to say for this one, I'm gonna change it to greed. What a flow off column. And I'm also gonna make the second item in this example span two columns like Side and also to Rose Dr spend, too. If I save this and come down and take a look. Well, now we've got um too. Basically, starting in that second row is it would have because we have auditable wine in that top left. Still So it's one yet we can fit to, but has to go to calls into rise, and we can fit that. So we put all that in item number three is next but account feeling that in the in that Selden there is already filled. So it comes up and goes okay. Yet we can feel it here. No, we can't put four here can put for here, but we can put it here, and it goes. 456 All right, through the night on. Okay, that's outworks around autumns, that span mold in one cell. Okay, It will just basically wrap around it. The same deal if you have items that have been explosive position. So the moment item number one here is not explicitly positioned. So let's go about doing that. So what I got at the very bottom here is a class called position item, which is basically saying that I want each of those position autumns which marked in red here. Debate starts at 12 and featured on full for both e column and the run. So if I save this right now, when we come down for the road based grid which we now have here on a noble one has been explicit positioned in this location right. So it's now no longer starting in the top left. It's starting what we tell it. But then autumn number two, it said OK, well, if you're explicitly position, I'm now going to start in that top left position, and then everything else will kind of wrap around. So we got 23456 No comfort seven there can put seven here either. Yes, we can put seven here. No. Yes, we can put a CIA. No, we can't. But no one here. No, we can't put not here either. Yes, we can put nine there. So that's outworks. And I rode by screen. If I make it column based. So this last one with change it to be column based. So greed or fly said that the column and save and come there the very last example. Now we can say that on one is still in that same position and we could see two guys that kind of starting top left. Three Yes, Four years for yes. Six Conquer here. Six conquer here, but sees Kanga here. Seven conquer here. Seven conquer here. But seven go here and I then knowing Okay, so that is how we can control flow in success grid, and that's a little wouldn't cover in this video, so so you won't in the next one. 15. Understanding order-modified document order: Hello, everyone. In this video, we're going to be looking at understanding order Modified document order. So let's get to it. So what is this order modified document order on? What does it mean? Well, essentially, what it is is it's the over them that she's postseasons grade to the terror where the grid arms will be placed inside a Greek in town. So it's basically how the items assorted before they applies. It's based on two concepts which have already seen in this course. One is the order property, and the other one is where it physically exists. Inside Adam Tree, Call that Greek container and then basically the order, probably itself, will take precedence over that physical ordering, as we've already seen it earlier in the course. But I just want to read to write that again. OK, so when we were doing that, what we're actually doing is understanding how this order modified document order works. But ultimately what ends up happening is that each item is given some form of a ranking, and when the other than chooses to place items, Dan is this ranking position that will indicate which items should be chosen next to be placed into the grid. So if you can't remember exactly how this worked, it looks like the following. So we have our container there where we have the physical items inside of it. In this case, I've got them. Number 1 to 5. So before he says, says has applied, the order of the autumns will be like this. So item number one will be first, then two, then three, then four, then five. Right. You can see here the moment of that. The ranks of 12345 At this point, all the order vase are all the same. Guy, they're all set to do right by default. Now say we loaded and say says him to get something like this where we're changing the order value for the first item. The third item and the fifth item. Okay, so it comes in, goes okay. I'm gonna look at the first rule we've got here, which is I'm going to update the order property to now. I have a value off to so to being higher than every other value. So find the list. Well, what it's gonna do now, is this going to push automobile one to the back of the lawn. OK, in this case, now it's it, right? Five with an order value to even though I am number one still physically exist in the first position that don't So, in this case, the order values taking proceedings as pushed it to the back of the line. Then we move on to the next role. So a lot the third arm which we're gonna target now which is highlighted by this autumn here in grain. And this has an odor value of one. Now, once again, that's higher than zero. So once again, that will be also pushed towards the back of the Lauren. So in this case is now range in the fourth position because it's still lower than one of the one, but its high up their bottoms to foreign five through. So in this case, I don't Number two is now pushed to the front off the list, then four, then five. And that's because two is before four and four is before five in a dog. So then we move on to the next role. And in this guys who said OK, I remember five is going to be targeted. And because that has a low order value, well, it gets, ah, high party and everything else. So that goes to the front. So now we have our number five with the innovative need one, but now trying first. Then we get two and four which have order vase of zero to their equal. But because two is in the dumb before four, then two comes before four. And then we get three because as an older, very one, and then finally number one, which is a total value of two. So hopefully that will make sense to you. And I just wanted to quickly go over this again because we'll need to understand how this works for the remainder of this section. But that's all I want to cover in this video. So So you wo in the next one. 16. Understanding locking: Hello, everyone In this video, we're going to be looking at understanding Lucky, So it's good to it. So what is lucky? Well, essentially, what he is is the ability to force a grid autumn within your grid to be placed within a certain location within your grid. So we can say, for example, that we want a good arm to be in a specific road or a specific column, or even a specific grid cell or a collection of grid cells. Okay, so it's in this already a lot in the course when we were talking about movie items across columns or movie on the long rows and then also moving them around in adjacent cells, right? This is kind of what we were doing. We were looking great items in certain places within and grid. Now this is done, as we've already saying. Using the grid Roy start Woodrow End. Greek columns start and greet called men properties, and for it to work, we must always either use the Lord number or line night. Now, the other way, you can look good. Arms is what we saw when we looked at responsive Web design, where we used to greet template areas, property to specify matrix and then on the grid items we specified a great argument was named and that basically told the item where it could be placed within that matrix. That's another y doing him. So with that said, there are actually three tops off Lucky. There's road based Laki. There's column based locking. And then there's obviously explicit position. Okay, what we can do both row and column at the same time. And that last position item exactly. Were we expected to be within the grid now, in regards to row based or common based laki, the flow of the green container is still somewhat important. Okay, so we need to take that into consideration when we're choosing to lock items and we're going to see some examples off. Had this kid implements the lucky in the next slide and beyond. So let's do that, shall we? Let's have a look at that first example, which is going to be a road based locking on a grid that's flowing in a road based direction. To say we have agreed that has three columns and three rise like this, and we're going to place non autumns Okay. At the moment we have a container which we'll have eventually nor autumns in it. OK, so what the algorithm will do is go, OK? Do we have any items that I fixed to a roll right now? And the example with that Say, sis? Yeah, we're going to have three autumns that is sent to a specific ride. So we go autumn them about a year, and then autumn number nine, which is represented by last of type. They're going to be locked to road one. Okay, that's given here by the great Grow. Start being sent to what then? Beneath that, we have a quick round end. Or said three Farnham number seven. So in this case, we have three items that are being locked to a specific run. So what will happen is we will prioritize these arms first before we place the rest of the greed arms. So basically, we choose their first selection here. And then, as a result of that, we had items eight and nine into a grin first and we add them into the fish rod. Then we get okay there. Any other items that we need to process that a lot to a road. The answer is yes. So in this case, we're gonna go down to that select up sides autumn number seven and because we're using a group Roy end of three here, we're saying we're going to add it to the second Rock. So in this case, we had order number seven. As you can say, it starts in the first column off the second right. And then after this, basically the rest of the items. Flora Randall, the remaining places, just like something and that's older is to it. But the important thing to understand here is that if you have items in a locked to a specific road, they prioritize first before any items that don't have any blocking. So here's the thing. The behavior we just saw with how items are prioritized to be roadblock before the rest of the items. I only works when we're using a Florida That's right based. So if we change the flow direction for the grid to save the column based well, the order in which these arms of placed is different, they're no longer given priority. Okay, so weapons is say we have a three by three and we have a container, and then we have our rules, right? So in this case were signed, we want to put on a number three and I don't know, five into the second rot. So when it was right based, these items would be added immediately, and then the risk the autumns wood floor around it. But that's not the case when we use Coinbase flying. What will happen now is that we're still on a the order modified document order off green aisles. So that means that in this case, because we haven't city the order properties auditable one will come in first. Then we'll have arm number two, which will fit directly underneath it. Okay, Now, normally, what would come next is item number three, which would fit that bottom road. But because we've now specified a rule, well, we want I'm number three to be in that second row. It's going to continue on with to the next column until it finds that middle cell there that is now available to put I own three into. And then basically, what will happen next is autumn for Obi added directly below that, Then go. Okay, We now need to add autumn over five, and that will say, Okay, we need that to be in the second row as well. So the next available spot is that last Selway in the middle, okay? And finally, I'm number six gets at it directly below that. So a little bit of a distinction there between, however, are looking works for row and column based flows Now, obviously, this is not the only top of locking that was spoken about. This is on the road based looking. We also have column by Smokey. Now, column based Lucky is quite similar to Robots Laki, Except that the baby we just saw accent reverse. So say we've got column based locking here with column based flow right, we have a grand, which is also three by three. We have a container. And then in this situation, we once again have autumn inviting autumn number nine be set to a group column stop this time off one. So that means item number 89 need to be in the first color and then below that we have the Seventh Autumn, which is a great column end of three saying that it needs to be in the second call. So what happens is we choose that first, Roland. Okay, when they're gonna place, I don't know about 89 1st So they come in and they get added to the first Rose in that first column. Okay, then we got all right. We now need to add Autumn number Seven into that second column. So then that happens. And then basically the rest of the way is how we saw with Road, except that the items flowed in a column based direction. All right, No much difference there between road based locking with Roe based flow, except that the items flow in a different direction, right, But I think that it's all the same. This is also the case with column based locking with road based fly despite its assigned why, as Roy advice locking did with columbines flow except that autumns of flowing in a column by restoration. So once again, we have a three by three. We have a container, and we have the same rules this reconnoiter before, he said. This time we're putting on number three into the second column as well Azadeh number five into the second call. So we don't have priority here. So are the number one gets at it. First he stays in that top of cell. Then item number two goes into the next column across, and then we go. Okay, I am. Number three needs to be in the second column. So normally it would go directly after on number Tunisia in the third column. Instead, it finds the next available Rod we're in Fitted, which is basically in that middle Selve it and then on a number four gets added directly after that. And then once again, we come to autumn number five, which it, too needs to be in that second column. So it goes to the bottom middle cell, okay? And then arm them six kids at it. So obviously, you can see the distinction there between Road based Lucky and column based. Looking in regards ahead that ba hive with the different types of flock. So the last former flocking we're going to look at this video is explicit positioning. Now, we've already covered explicit positioning in earlier parts of the course, so we already know that it's going to involve placing certain items into certain locations within that grid. Okay, So we're gonna have three by three grid here and we've got a container. Now for explicitly positioned autumns, I have the utmost priority and always get place first. Okay, so I say for efforts rule here we signed. We want the sixth grade item to be placed as line to row wise. So there is the second row study at Lawn One on the column side, which is the first column. And then it's going to span two rows, Tow line four and two columns too long. Three, respectively. So as a result of this, a lot of them six kids added and span says two columns and rows starting in the second row . First column. Okay, then we moved into the next rule and we can see here that we want Autumn number seven to start in the second row as well, but also start in the first column now in this situation, what that means is that arm number seven overlap over the top of water number six and be placed in the second row. First call. Then we moved down to the next autumn that we want a place which is autumn by and that in this guy's that's going to be in the third road in the second column, so that gets added as appropriate in that bottom left hand side off. Where are the number six suspending? Okay, so this case is the third row second call. And then finally, we've got item number nine, which is to say, I want to start in the second row and in the second column, which means it's placed in what appears to be the top right hand side off on them six. And all these autumns have a lab because they appear in the dom after autumn Number six that we can change this. This was saying in previous, for the icefall using that index. But that's not the point of this video now for the rest items, now that we've explicitly said all the other items that will just wrap around just like so and that's older is to it. Okay, so that's all I'm going to cover in this video in the next video. We're gonna take a look at some further examples off all these locking mechanisms. So see, then 17. Locking grid items: how everyone in this video we're going to be looking at looking great arms. So let's get to it. Okay, So in this video, what I thought I'd do is follow on the Laki examples we saw in the previous video. And look at some practical examples. So what, I have a much grain right now is a whole bunch of grades, okay? And we have a bunch of items here, little highlighted in red. And these are two. Basically identify which arms were going to be locking in each of these great examples now for this first grid. What old and demonstrate is wrong locking when the container is flying in a road based direction. So we take these three items here on the far right, and we don't lock him into Road one, and we'll say that that'll type priority. And for Adam, 10 were all looking into wrote to All right, so let's go about doing that. So my first elected here is taking any item that is divisible by four. Says what's 48 and 12 year, and I'm just going to guy greed rotted. What? And Saif and as you can say, autumns for 12 I instantly locked into right one. And they have priority over the rest of the arms. Okay, they're from 10. Let's lock that into road to what is going. Grid run So ciw. And now we can see a lot of number 10 takes priority and road to over the rest of the arms . Cool. So that's a good luck on a run flowed grid. For the next example, we're gonna do some real lucky as well, but this is flying in a column based direction. So what will happen here is argument three and six will not have priority in terms of the order. And we say placed, you'll just have to see that they'll have to move to the next location that's available to it. Okay, so if I come down to my right lock column fly, I'm going to try and set item number three here to be in the second. Right? If I save this now, we can see that Item one and two still basically took those 1st 2 locations, which, made out of three, couldn't get into this location, so it had to move down the column, flow to the next column, and then finally find the next cell where it could be placed in the second right, which was here. There are as a result of these item Number six is no longer in that second roll off. It was previously so we have the forces. So we got greed right to for that as well and save. And there you can say that gets buffet. Then, too fun. We can say that it's still remains in the order of all the other items here. Cool. Now what about column based flow with column locks? Right, So we'll take. I don't feel right and 12 again and get all welcome to the first column, and we need to decide for our number 10. We're gonna look that if the second call so again I have a selected for every fourth element. Okay, I'm going to go. Agreed column one and save. And there you can see that four and 12 tape priority because they're in a column based flow with a column based lock. So they start off first, and then everything follows after it, and then for 10. If I said that to agreed column to then we can say that autumn 10 has priority in the second column that starts at the top. And then we go to 35 and song. Okay, maybe on we're gonna have a calm lock with a road flood so similar to what we saw with a roadblock and column flying, you say that the order is preserved. So in this case, we're gonna guard for the third element. We're gonna give it a grid column off. Let's say I think tune in this case, let's go with yep, to and save. And you can see that because to already had priority over three and was already feeling that second column Item three had to go down to the next road to find the next available cell that was in college too. All right, so that's why we get spacing here. And then, obviously six is offset it again. So good. Grade Hollow Two for that as well, Then save. And now we can see six to shuffle side Cool. And now we've looked at basically the full scenarios that we saw with Rory and call him lucky. But the one thing I didn't mention in the previous for d. R. Is in regards to order. So even when items are locked to a specific royal column, they will abide by the order modified document order. The difference is that the automotive five document order only applies to the items that debate locked. Okay, so in this case, say, we're going to look arms 48 and 12 into the fish. Roy here. Well, it made is that these will still get priority over the rest of the autumns. But if I change the order value off any of these three so in this case, we're going to change, see order value off IEDs to say, maybe one or something like that that will actually still appear before four and 12. Whereas before it was the physical placement off him in the dung, that indicated the order in which these would be placed. Okay, Best to see that with example. Here it's officially let's get into the right. So you have agreed, wrote one, and that gives us basically what was saying before we for being first, then eight and 12. Fun If I now go or are needed one on item eight and save well, we can see there that Autumn Aid is first in these autumns and obey locked cool. This is the same scenario if we do it in a column based direction. So if we take 48 and 12 when we did exactly the same thing, so it will go. Agreed column one. Put him in that first column there and then once again, well said the eighth item to be leading one as well and save. You can see that autumn idea is now first in those locked items air there's locked arms with Cool. Now, the other thing that you may have thought about and may not have tried is when we have too many items that I locked to a specific row than there are Kolbe's right. So in this case, I've got six items, right, but really have four columns. So if I lock all of these items here to the first row, they're going to spend all the way across all the columns, right? But what happens here is because we have too many autumns. Some implicit combs will be created, so let's see that connection. So forget for this grid, wrote one. Since this fit every second item that's in this container we're seeing agreed. Rob one If I save this now, you get the situation where you've got the six items having to try and fit into. Wrote one. So I've got the 1st 4 that fit into each explicit column and then the last two had well, to implicit. Columns had to be created in order to fit them in after a lot more than six. So there were 10. Then you would have six implicit calls that need to be created and it goes on and on and on . Opinion. What you doing? Okay, that's the same for columns as well. So if it comes into the next example into the same thing to this time, we'll go. Grid column is equal to one. Then you'll see that the each of the autumns here hold. The 1st 4 are in the explicit rise, but then to implicit resident to be created to cater for those other two autumns. Cool. So that is pretty much all the scenarios I can think off in regards to roll locking called walking. But obviously we need to say an example once again of explosive positioning. Now, vory done all this stuff in the past, But I thought we've polished to go infrequently again. So if this scenario I'm gonna basically position most of the elements into this bottom four section here and then we'll play Have one here where I am seventies at the moment so far. Adam, too. What I want to dio is I want to say, OK, I want to look that autumn So he's agreed. Area this, guys, the side I want to start in Rhode Line to and I wanted to start in column 11 and then I wanted to end on row. Let's say four and then call him. Would cite three If I run this right now, Item number two basically starts at long to hear. Spends two columns into Russ who now we've granted another implicit column as a result of doing this. Maybe we don't want this. Maybe we want the rest of these red arms. The Kanda hover over the top of this one, so let's say for autumn them before we want to put that and the top left corner where to is OK, so we might say something about this. We must greed area. Little guy roast up to comb start one and safe. And that puts on an four into that top left part off arm to which is really just road to column one. Okay, so explicitly positioned it in the grid cell that maps to basically calling one road to. And then, let's say, full six. I wanted explicitly position that as well. We'll put that in basically the second column, second row here, So we'll just got agreed. Area it will go to for the road style and two for the column style and Saif and they can say our number six is placed in that location. Now let's say we want to put eight over here. All right, so we'll try and keep it in order. So here, I'm gonna go Greed area. You roast out of three columns, start of one and save and they're eight is over here. And then we're back to out full combs by three rows grid. Now just the complaint vase with Put 10 down him so that could be done by just going greedy area. We'll go. What's the number three? We'll roast out three thin to for calls that, too, and say that. And now we can say a lot of 10 is down there. So now grid on Tuesday, Plenty covered by these four items. And then let's I wouldn't want to put it on 12 in the third column. Second, right? All right. So we're autumn. The number not is right now, so we can just do that. But going greed area, second row finish at long three. And safe, I think. Yep. And then we go. Right. So we're being able to now explosive position items to all the way to 12 in two different locations within that grade. And that is all I want to cover in this video. So? So you won't in the next one. 18. Locking and responsive web design: how everyone in this video we're going to be looking at locking and responsive Web design so lets you do it. So when we talk about lucky and responsive Web design, there are a few things that we need to understand. The first thing is that a great arm must be able to resolve all four sides of itself. Now the problem is with great template. Areas in Green Area is that mistakes can be made, and that means that sometimes some of these boundaries are not defined properly, so we just need to take that into consideration. The second thing that we need to understand is that great template areas is really just converting. Agri template columns and agri template rose toe have extra line names. So because of this Hagrid area property also gets converted to use. My name's a swell Okay, so we start off without named area. That's within the Matrix. But then, when the Matrix gets converted in a great temple areas, so too does the grid area properly. Well, say how all this works in the very next slot. Now. The next thing to understand is that when we specify an invalid grid area I may be a area that's not in our made drinks. What will happen is that since this grid will make a conscious effort off off saying that item So it's pretty obvious to you that you have made an error. So just say that you're greedy is flowing in a row base direction. It will offset it as an extra coal or an extra row, depending on how you set up your grid. Okay, but the idea is that it's so obvious that something's going wrong so late to go in and make any necessary changes today to might to fix it and lost. You want to mention is there for years and incorrect line name anywhere we'll get the same problem. So if all of this sends a little cryptic Teoh, well, it's better Polly to take a look at an example to say, we have a grid that looks like this where we have on a number one spending multiple rows and we have our own number two Spain multiple columns, right, and I'm one is always in the first column and onto is always in the first run. And then we go, I'm sorry. In four which is filling in the lost who sells him that could be modeled with the following CSS. So if they're container, it has a repeat function off three lots of 25. For the columns, we had to rise it to lots of 100 pixels. And then we have out matrix, right? So in this case, gridiron number one as an area of A as we can see that matrix at the moment, it's represented there with two ice. They were glad to be sphere basically gridiron, too. And then for C and D there, Matt toe item three and four, respectively. But what if we wanted to convert this to use long names instead? How would it look in these circumstances? So the Wyoming bad to show you is not necessarily the white. Each present does it. Okay, Age presently does it differently, based on how it's kind it up in everything. But the idea is this. We'll pick the first in the top left of the Matrix. And we said, OK, we want to get all the lines are around this I and give it a special name. All right, so I will start with the columns on one side on the left off this, I we're gonna cold this line. Hi. All right. As you can say, we just popped up next to the 1st 1 I found on the left. I've given in a line name off a and then we say, OK, what about the top of the I I But he had the first line for the rise. We could also call that a Then we could say, OK, maybe the bottom of this one could also be called I. And then we get to the right hand side and we got OK, we could call this I but I consider this to be there. All right, so we won't call it at this time. We'll move out into the bay and, well, let be defined it for us. So this guy's people go like I what? I want to call the line to the left of me in this guy's It's cold tea. All right, now, in this situation, the top and the bottom lines for this item of really being defined as a so we don't need to worry about that and then we say okay for the right Well, because we have a baby next to us already. We can still label that long to I'll be. Then we move on to the final bay. And with defined but old three, Sarge, except for the right. So if we've labeled the top the bottom on the left. So the top of the bottom my eyes the left is a big probably need to define the right hand side. So because this is a bay, we can let will that be as well? Cool. So then we moved down to the next right? We start with the eye again. Now I've got the left hand side. We know that to be I well, at the top is going to be I. But what we haven't defined is for so in this case, the barn can also be deformed, is I? Then we move over to see and we go, OK, I'm going to name the left hand side of this as see which is also the right of the first I right, And then we got I want, want want the right debate on this case. We have a day next to us so we'll just be right into the day the which the day will NASA okay to the left of me, I want a day. And to the right of me I also want a d cool. So this is great and everything. So now I've got it said that its renamed to that But now we need to change a light grid area values to use these long nights. So I say for autumn one, we know that we want to start in the true road. So therefore, roll on one which in this case, we've bought into fired with the value off I now because there's multiple I definitions. I'm using the number after the letter to indicate which instance off the letter I want to target. So in this case, it's I in the first instance of it and now we have a column start. So the column style is also long one which have also assembled with the night so we can just put that in like that. And then we have a right end which is essentially on three, which we've indicated with an IAS well, but it's the third instance off the I. That's in that rose definition up there and then for the column end Well, that's long to so in this case, I've symbolized it with bay and with the first instance of bay Now I could have you see, here is well, it wouldn't really matter, did it would have got the same result. Okay, I just decided to use the one in this circumstance. So that's the first autumn basically now defined using those line items if we get a lot of them between. Well, the roast are is a long one again. So that's 81 we have the column stays in line to. So in this case, we could use B one or C I'm gonna use be one again to identify that. And then basically, we have our road end, which is long, too. Which of the fund as a to in this circumstance, because we are looking for the second version off the eye for the very definitions. And then finally we have out calling end being the very far right, which I've said I'm going to use be, 03 That's only because I'm not being beast, the second item sort of space. That's why I'm using that here and not day now for the third autumn. I did originally met that as agreed Area of Sea. So for the first value, we'll have the A two. All right, that's for the run. But then for the column, I'm gonna use the symbol of C because that's say, that represents belong to then for the row end of using a three again. And then finally, I'm using the first instance of day to represent the end. Cool bottom three because it fishes at long three. And because it's next to a day, I just I just did one here and then for the last item I'm saying, OK, we're going to start on the second line of the road so it's eight to it starts a D one. All right, said the first instance of day. That's where it starts on the column aspect, then the Rohingyas I three and then finally, the end of the columns. Is it detail? So this is a Y off basically mapping out grid matrix and that grid areas to using long lines. And that's a little one to cover in this video. So see you will in the next one 19. Locking and responsive web design in action: Hello, everyone. In this video, we were going to be looking at looking and responsive. Web is on in action, so let's get to it. Okay, So in the previous video, we looked at green template areas and how it could be pretty much converted Teoh a definition of greed, template columns and great template rose with line names in it. So, in this re I I just want to quickly show that that actually works. And they don't want to cover another concept. Iran, good areas and the errors. Okay, so I'm just gonna quickly jump down to where my first rule is here, which is one name example container which maps to this gritty up. Okay. And I want a map it to look like this. So I'm just gonna do just really quickly because the grid template areas we have here is exactly the same is what we had in the previous video. So I'm just gonna talk about grid Tim, flight columns. I'm gonna have it one name for long, one of IAEA. And this will be one if up, Then I'm gonna have Might be. And that will be one. If I then we're gonna have another baby off. What if And then finally bid the end. Okay. And that's to represent that first line in the Matri's for the Cullens. Now, I'm gonna use Roy's here free template rise. And I'm also gonna have 25 1 in five, like so. And I'm gonna sit a for the first row just simply because we are a and a And then for the second, right when he called, I will want to, I should say, And then I at the end for long three as well. And then for same day, while I'm just gonna add them as secondary nines here, like sign. OK, so this is exactly the same as we saw on the slots in the previous video, so I'm not really gonna cover much more than that. It is talk. And then we saw Okay, this old sayings just credit grid. But now we need to place the autumns. So he was gonna go agreed area. And for the 1st 1 we know we want to span all rise mystic in the first column. So they have a right start here. If I won, then it comes out of I then we're gonna have a road end off a three and then a B one as Dean Kamen. If I say that, we can see that on one is being both Rose in the first column Come down the option to which is now Spain. Two columns staying from the second line. Have a great area for this off I one for a start. Yeah, I used to be one for column style. And then for our end of the issues A to and then finally, bay three who common. And now we can say we get this result. Okay? And instead of one, if I hear gonna change these tow 100 pixels. So what's the same is the one of do that. Okay, that looks small. Often I was expecting now 34 of Carnivore e just fall into place, but that's because they're flowing into the last two cells that are available. They're not explicit positioned at this point. So we're gonna do that once again, using great area and sitting them as applicable. So we're gonna have a to as fever started. We gotta start on three in this case and see Sisi's to represent this autumn here and then we're going to have a 3% the bottom line, and then they want and say that and nothing changes, which is what we expect. And then the last one with the grid area that's also a two. We're going to use the one he's a three and then following d to inside. Once again, you can say nothing China's. But if I decided to say okay instead of, uh, tighty the one I'm gonna say, use the one life's I. Now you can see that on four has there covered on three. And that's because bottom four comes after I'm through the dung. So therefore, it overlaps on him. Three and B one is the equivalent off. See? Appear right. And that's what we do. Find down here BC So we'll tidy this long. Gonna put that back 51 emerald Good. Okay, says a practical application of what I mentioned in the previous video. Now the one thing I didn't really mention in the previous video is the fact that if we specify in developed grid area, yeah, you contain up, we get the situation where these items are kind of outside the bounds of the grid. And that is because a K can't really be mapped to any line name after this cretin flat areas has been converted. Okay, so we're saying here we're looking for something that has a line name of K or maps to for K maps to something that is being changed on the great tip light. Rosengren 10 like Holmes, But we can't find it. So what the census create, or what the brass is due to get around this is that they go, OK, what we're gonna do is winning. Put the item outside the context of flood. So this great is flying in a road vice direction. So it's column column than next right then column column and it would be next rut, right? But because we're gonna era, it's a OK. Anything that isn't defined inside of explicit rows and columns, they'll now float outside the direction of flow. And this is really to indicate that you've done something wrong. Okay, so it just makes it really obvious. That's why I do this now for column based flowed you. Obviously we'll see that the opposite happens if I put grid area can again, which is invalid Now you'll say, instead of having four, five and six and seven or so on so forth over here, right, we can now see that they road based position, okay. And they don't want is really a form because that's the invalid autumn, which is also they trace here. It is nothing here on any of these sides. They come after any part off this grid. That's why it is in the bottom corner. So that's all I want to cover in this video. So see, you won't in the next one. 20. Understanding Grid Spans: Hello, everyone. In this video, we're going to be looking at understanding grid spans, so let's get to it. So what is a grid span? Well, for the purposes of this video, what I'm talking about here is the size about grid item in the sense off the number of grid cells that it can spend across our grid. So we can say that a particular item is to spare three columns, so therefore to be three cells on the horizontal. Whereas if we said we want to spend two rows that it would be to cells in the vertical so overall it's spanning six cells. Okay, so that's the number of soldiers that we have to cater for in order for it to be placed Now , the smallest and autumn can ever be the small Hispanic and Bay is one individual grits up, which is what we've said for the most part in this course, except for when we're spanned arms. So essentially one column track and one road track. You can't go any swollen this because if you did well, nothing will be displayed at all. Not my sense. However, The largest Weiqing guy is incredibly live, but it's the Barraza that dictates how large this limit is, and that's for the purposes, off handling, memory problems. So that's why I'm unspecified number here, because each bras are will determine how big that limit is. So it's on a pooper as a basis. But just understand there is a large limit, but don't rely on the fact that is infinite because of stars. And that's the point of my statement here. Now the important thing to understand here is that the spanning with autumn can determine where it could be placed, as well as its siblings that are around it. So in order for a good horribly replaced, it must always be able to fill in all unoccupied grid cells. So if you try to put an autumn down that is maybe a three by two, all those three by two cells, i e. The six cells must be unoccupied. The exception this role die is if you're explicitly positioning that all. So now that we know this match, let's take a quick look at an example processing spans. So we have a three by three grid, just like so we just met without element here, and we have the following say says now in this situation, we have item number three that we want to explicitly position. So with that said, we do that instantly here. Okay, so that's placed in the first row. Second call, then Basically, we may be appointed to the start because when they start placing this and we're gonna start placing items in a row by its direction. Next thing that happens is autumn number one gets added because we didn't have any rules for that. So it gets place instantly here. Now we want to place item number two. Our number to die is saying okay, I want to spend two rows and two columns. Normally, if that wasn't the case and Autumn three wasn't there, either it would be sitting right next. Number one best we can see. You can't place it here at the moment cause Artem threes in the white. We also can't place it in this life sell because we don't have enough explicit columns to the right of it. That will take up those two combs that we need. We only have one at this point. So we need to come down to the next right At this point, we can see that we do have to available cells in the colon direction and to available cells in the right direction so his full cells are available. So with that said, we can now place I don't number two down and then we move on. We go. Okay. We now want a place item number four, and we could see the first of a little spot is in this location. So that gets place down, and then we fill in the rest just like that, and that's older is to it. So as you can say, this is a very simple example, but we'll have a looking some more in the next video. So see, then. 21. Grid Spans in action: how everyone in this video we're going to be looking at grid spans in action. So let's get to it. Okay, so in this video, what I thought it too. It's just expand on the Greenspan knowledge that we did in the previous video. And look at a few more examples that I probably didn't mention every, uh So the 1st 1 I want to mention is that the equivalent of what we see on our screen here ? In terms of this first grid, we can model that exact behavior while you seeing created row style to spend one just like side if we don't allow the others as well. So grid homes that read, write and and greed home and like so that's the exact equivalent to what we currently have . Okay, the other option is that we settle these order. That's the same issues, expand one as well. The idea is that we know that this is going to spend one cell from a road perspective. This is going to span one cell from my column perspective and so on, so forth. Right? So this basically east of the fault Lybia. I just want to mention that until spans, not a huge thing to worry about right now, I just want to be complete with that knowledge now the second example here, which is a grid that has three columns and is following a road based direction. What I want to show here is, if I spend items trained six to take over two columns, what happens? So we agreed column Well, said that to a spin to just like so and save. And now you can see that Item three didn't have enough columns here on the right. So I had to get into the next line to achieve those to calm spans. Right? Those two cells, same with six. Then here it had to go into the next road and start in this second column here before it could actually span the two columns to swap. Now what happens if we say okay? We want on six to spend to Rosa's? Well, what happens to this eight year? It was for that. So for this, like don't greed row, spin to and save. And then we can say that 60 Spain pushed down to kind of that second road, but it is a result had to move down to the next round first call. All right, said, the autumns that are around this span here also have replaced in different locations. That's important to understand that this is a road float would see it natural with a column based flow as well, just to show they're exactly the same. So here, I'm gonna set every third autumn to have a grid road off Spain to right. So if I say this now, we can see once again, I'm three would have stayed down here. But because now we're spending to rise. And that goes with this column and spanned down Same six that was originally went four is now. But I had to come to this point before it could be added again. That's because four was moved, and so it was fought. So that's the problem there that once again, if I decide that I want to span six across two columns so we'll go. Great column span two. Now you can see I had to go into a new column that got created. Go. So that is how spans work in relation to other autumns around them, in both a road based flowing direction and a common base flying gration. Now the last two examples What I want to put the show is if we don't have any columns that could be cited for span, I I'm going to say I want Item six year so basically start on this line. But then I want to spend two columns Now. We don't have another column. Obi here, right? We only have one column. So if I'm fishy, it's this location or lucky at this location. This column and it's I spend two columns. What is going to happen? Let's see how that works. So come down and God, I want my grid column start here. We'll set that to let's say one. Is it long? Three. So said That's a 13 and just to be. But they all said, roast out as well and well said that two on two. So it's exactly where it is at the moment. Got greed, right? And and for the moment, actually, I'll make it spend, too, and then for Greek color man. I also make it spend too. You could. So if I say this, what is gonna happen in autumn six year? Well, what happens is, it does still actually spend two columns. But this is because an implicit column was created as a result of this, their autumn full, which was in fact, over here. It's at that point says Okay, guess what? You've created a new column appear. So I'm going to now fill in that new column or that sells All right in that first row, that bicycle so we can get into a situation where say no, all of a sudden I wanna have It's been full columns. Now we've got the situation where we've got 45 and seven able to fit in that first road because we've created three new implicit columns and this result off item six being locked into the third column. But then we're telling the spanned four columns, even though we didn't have four holes. So you're in the situation. Thought that as well when you spanning gonna put that back to two, you're better Will be had now, obviously same deal if we use a column Vice flood so good in here and do pretty much the same thing. Redrow start. I'm going to set that to 13 This one. Greed Colin, start sure it's on screen. Here it is recalls that I'm going to set that to be here, so it's gonna start in it. This so where it currently is And this situation I'm going to go greed, run, end when this is span two of that as well. So we don't have another row after this really had the three rise and then Grid Holleman. I'm saying that to spend too, as well. We do have that next road that next calm over here. But we'll see what happens as a result off throw in spin. So it's safe this and now we get this situation where another royal has been added on once again. Item for this come from over here as they're filling in that noone Roy that was created. So basically what happens is if you're spanning across your in the location where you can't really spend it in more Rosell columns, implicit columns and rows will be created kind of for that. So that's what I want to point out there, and that's all I want to cover in this video. So so you won't in the next one 22. Understanding packing: how everyone in this video, we're going to be looking at understanding packing, so let's get to it. So what is packing? Well, essentially, what packing use is It's an algorithm that shoes but say says grid, to determine how the curse of the hives all moves. Have you want to buy it when we have this concept of halls inside? That grid now holds essentially an unoccupied cell or a collection on the occupied cells, depending on what you've done, and basically the vacuum will determine how those holes are treated. There are two tops of packing. There is what's referred to a spice packing, which is currently to the phone. And then there's also dense packing. So, up until this point in the course, we've just been looking at spice packing, which basically says that the cursor continues to go forward at all times. So what that means is we don't go back and process any of the holes that we basically created. So what this does is it preserves the ordering, which in this case, is the order modified document, although how it would dense packing. We do go back and address those halls and we attempt to fill them in. And the problem with this, though, is that we do lose the war. So basically what that means is dense packing will sacrifice the ordering of items too, so I can fill in any unoccupied cells and trying to fill in as many of these as it possibly can sizzled right and everything for the best way. To understand this better is obviously by looking at some examples. So it's not off its bass backing, which is what was saying so far in this course that looks like the following. So I've got a grid like this and that's set up by containing here. And then we have the following say says so. Our first autumn in the CSS is trying to spend two columns a second autumn. He's trying to spend two columns and two roads. So we started a point in the top left here, as we always have, and taking the consideration that this is going to flow in a road based direction. So we called it at first successful. Young go. Okay. We need to add an autumn that spends two columns. So we go and do that. Okay. Now is she there was sentence before we now move into the next unoccupied cell. But then we noticed that the second rule here says that we need to calls now. We don't have two columns at the moment inside of our explicit grid. So as a result, it's gonna say no, go here and it's gonna force us to get into the next right where we now 10 fit in those two homes and two rights to which on two is now added. Now, at this point, the Chris, it continues forward. So we continue on placing three and four okay into those positions. But now we have this fifth autumn, and we've got a grid that could have fit 1/5 autumn into it. But because we're using spots packing, what ends up happening is that we have to create an implicit run. And then once we do that, we moved to the first column and then finally, autumn five gets at it. So this may not be what you want. You may want basically all of the cells to be filled in up there rather than having a new implicit rod. So this is where tens packing can help you So once again, we got a three by three grid. We have our Dave, and we have the same success. So the same process starts the very beginning were that cursor and efforts rule and f iStar jammies on. And we can say at this point again, we got that second rule. We can't fit art into into that spot that becomes invalid down. We consider it and put it in there, and we put it in there. Okay, After this point, everything is the same. Here's the difference. Once we get to this point, we want on and three to know fit the next available grid cells by what we can do now because we're using dense packing is we can go back up to that. I don't You part sell their the very top. And now we can place on him three. Then we could move down. So Okay, we know that this I know people itself is gonna be there. So now we place four, and then finally we can move down and then eventually place on in five. And that is pretty much the difference between the two. All right, so now we don't have a situation, but we need to create an implicit road, it said. On five, we were just able to go back and feel in that the position. But what was noticed here now is that we no longer have probably ordering. So it goes one on three in tooth and full and fought. Where is when we looked at spots packing? You would have seen that we still preserve that ordinary, and that's the difference to 22. So enough in the actual theory here, what's now guy? And take a quick look at some more examples in practice. But we'll do that in the very next video, so see that? 23. Packing in action: Hello, everyone In this video, we're going to be looking at packing in the action, so it's good to it. Okay, so in this video, I'll quickly show you how we can set up both sparse and dense packing on that grids. Now what I have on my screen down four grids to that air flowing in a road based direction . And the last two will that eventually will be going in a common by starvation. At the moment, they're all flying in a row, base direction and using the default, which is sparse Paki. Now, for the 1st 2 grids I have here, I've moved Item 10 into the third column when it should have been in the second column, and you can say I've done that here. Why Just City Grid column 23 Cool. So let's quickly set up a spice packing for road on this great here. So do that. We still use the grid when I float property like so and because we have the default for spies backing all we need to do here, said Rodolfo to road, and we'll just use spice packing by default. So if I say this, you'll see we get no change because they're the defaults. But if I want to change it from spots packing through dense packing well, this grade well, once again we use greeted what I find we sent right Then we had a spice, and then we had the word dense on. This basically says, Don't you sponsor back anymore. I want you to use dense packing. When I say this and come down. You can see that item number 11 is now shuffled over because that would ban face it. All 10 was basically there, but when we moved tender, hear them in the Kerr said to go back and when it was looking agreed on, um, 11 says, OK, we've got available cell here was put autumn 11 here, and then Autumn 12 is on the very end. And the result of this is that now we don't have that implicit reality more, but we've lost our ordering. So 11 here is that before 10. Okay, Now do the same thing for the two columns. So if we wanted to spice backing for column well, we've already been doing that when we changed a great deal or no fly to just use call. That is the equivalent. So if you come down and take a look in this case, I'm saying agreed on him eight to row three. So automate would have been here, but instead here. So it's created a home, right? And because we're using spots packing, we're not filling that hole. So we get the 12 thought, um, here. Implicit column. But if once again, for the last example we got great old I fly said that the column dense, like so and save that's rolled into the very last one. We can now say that holds filled in with Artem nine. Okay, so it is still down here. No one is now going to feel like Hall. And then we have 10 11 and 12 and we no longer have that call. And that is old is to it. Really? So that's what I want to cover in this video. So see you all in the next one 24. Bringing it all together part 1: Hello, everyone. In this video, we're going to be looking at Bring it all together, part one. So let's get to it. Okay, So in this video, we're now going to take old the knowledge that were gathered over the last few video eyes and put it all together, toe learn and fully understand how the order placement outward them works from start to fish. So what I have in my screen are four grids and inside of each grid. We have a number of items at a position in certain locations and have different colors. So speak so you can see their fourth. Um Now, for the purpose of this video, all I'm going to be doing is working with the 1st 2 grids. The other two. I'm going to suggest that you try them in your own time. I'll have the answer to buy the days and I'll including with the resources. But I want you to try it yourself. Saving get the same result. They didn't confirm with my answers. Now you won't be asking what's with all the colors and what did they will make. Well, essentially, the color of the autumn determines how it has been locked inside of the great so right. Autos, for example, are explicitly positioned autumns. Yellow items are items that are locked to either a row with 10 now, whether it's row column is determined by the flow off the green. So for this first grade er, the items of flowing in a row base direction. So that means these yellow items are locked to a specific rock. The grain also locked by in the opposite direction. So because we're flowing in a road based direction here, these autumns here, these grain ones I looked to specific columns instead, like I says, the difference between the yellow and brain. And then, finally, the blue audience that I looked at all it just place based on what he's remained. Essentially Okay. Now, for the second example, it's the opposite direction, so we still have that red, which is explicitly positioned. Then we have a yellow that I look to each column here and then that grain. I looked to specific rocks and then the blue once again basically go around it. OK, now, the 1st 2 greens that we're looking at using spots packing, and that's why we have a few holes inside of them. Whereas the last two, which you will look at light up, have less holes. But they're using dense packing. Okay, so what we're gonna do is we're gonna basically start off from this first grid and try and replicate this same behavior. But we're going to do it. Why? Starting off with a blank canvas. Okay, so let's get started. So the first step that the auto placement algorithm will take is to place our explicit positioned arms. So what I've got over here is basically a rule that shows those explicit items in the first grade here. So if I doubt on from it that and save, we've got at three explicit autumns. So if we have a look at the current greed that we have over here, we know that we've got item third end up in the top left here 19 this year and four is here . Now I'm going to address these in order of number. So the 1st 1 I'm going to explicitly position here, it's not before. So, coming over underneath this role, I'm gonna grab the selected for I don't know before here and Price belong. And now I'm going to sit a grid rode off. 12345 Good, bro. Five. And then a great column of 1234 Just like so. Now if I say if I come over to what I've got here and save, we can see that item number four is where it should bay compared to how it is here. Go. So next one, I'll do it's the attain. So we'll grab the selected for 13. Copy this based on the days and then we'll do once again get into the right position, which is 11 So I'm just guy Greed Road One Great column one just like that and save. And while nothing changes, but that's because it was already there. Cool. No insane. Where is that, Joey? Well, we don't study in Lauren Three on the right side and fee she two rows later. And so so study at Lauren to and featuring two columns light up. So I would do the following Just grab this selector copy that Placed. And now good greed, Rose Die. I'm gonna sit that too long. Three and they will guy, grid runner and span two just like that ever come back and see what we've got at the moment . Well, it's not the right color. Yep, that's fun. It should be spending, too. What hasn't spent two? What? Sure we're agreed. End. Ah, yeah, it might be spending to hear. Still had to say. In fact, it looks like it's actually Spain to rest. Sorry, my bad. So it's doing the right thing, and then we want a great column off lawn today. So that's a well, actually, we'll put it underneath the rest. I grid calm start. Was it that long to And then a grid column and, oh, spanned two as well. And now if I say this and that should be good column end no great Cullen. And now it is where it should pay. Yep. If you compare, the two did the same go. So the replacement algorithm always explicitly positions the autumns first. So that was done there. Cool. The next step is to now start processing all the items that are locked to roads, starting with the first row. So it's got items 7 10 and 22 year there a lot to wrote one. So when you come down and now I'm gonna show these ones the comment this year, this line, say, and make sure they come out. So I saved. And there's 7 10 and 22. Cool now. Currently they are on row one, but they're not look to row one. So if with the add more items, they wouldn't stay there. So what we need to do now is basically at in here a great row of one just like that, when we do that, well, nothing changes, but we know it's at least looked so the first right now. Now the other thing we need to do is just make sure that autumn 22 year he's paying two columns and two rows, so we'll grab the selected for that. It's like so and I'm going to set a grid road end to spend, too. And I grid home to spend too and safe. In fact, it will save now and we can see that this sign will be total between that site. Cool. So that is the autumns at all. Low to the first run. So then we moved to row to on. Do we have any arms and lock to write to? Yes, we do we have autumn 21 so come down and we'll make sure that that's look to run to the first will show it just like So we'll come back save. And while the sucks in the right position of the moment. But again, it's not blocked. So it's locket with the grid role, tooth save and being God. Bob's your uncle. We don't need to do anything else here. Maybe on we now have items three and 18 that I look to row for here. So let's make sure that there doing that now. So come here. And I made a mistake. But now we'll show those come back over to what we currently have. We can see three and 18 are still in the second, right. But we want to be in Rome for Let's do that right site. Cool. And now we can see that three in 18 I looked to the full threat, but in this situation, 18 is actually coming before three. So what I'm gonna dio isn't trying to see order off the third autumn and give it a high value order. One saif ever come and check Now, Now we do have 18. That's before three. Cool. Now that is all the items that are looked to a run. From this point onwards, we're just going toe ad the remaining items in. So with that said, I'm actually now going to remove all these display grades and all this stuff, and I'm just going to show all the items that are in this roast box containing it. It was just a little days and we come to the very top. So we know we need that either. And where this display none waas We now put greed and center center. If we come into what we currently have and save now we can say with Goldie autumns in play . Now, let's have a look at the ordering off these remaining autumns. So firstly, we can see to is before one. Right. So we got one here than two, but two days before one. So that's probably the first trains will might get in here is at the very bottom off this roast passed section, which is the speed here. Well, just Dogo. Very sparse container. I'll tell you. Second on, um, and give that a value of needed one. Start there now if I come in, Have a look we can now see. Autumn too is before one now to wanna exactly where they should bay, so we don't need to proceed any further. The next number in the sequence is five because we can see that shouldn't be in column one that's actually been locked to call him four. So let's do that. So I'm gonna grab this rule. He, uh, change it to five. And so if ever you order grid column and said that, too. This guy's 1234 full screen and save if we check Well, now we can see five is where it should bay, so it's time to get the rest of what's here. Well, six is actually not the next number, in fact, Sixes. Although idea on the bottom here. It's the very last option in this hot grid. So now what we need to do is we need to said the water value off the Six Autumn to be harder than everything else. So let's do that save. If we check now, we can see Number six is the last autumn that makes eight now come after five, which, if we check, is correct then we have 18 19 and 13 before we reach nine, which is correct. Then 11 12 48 and four live in 12 4 a and four. And then we have 15 down here in the same color. And if we look at what we currently got, it's still appear in these last position. So we need to now do a home look on number 15 to the second color. So it would. That said, We'll grab this elector again, will change the art of number 15 and we've got a great column. And I believe I said it was the second column. So let's go over and save and see if we get the same result. And we do, right? So now we've created those two gaps there, which is the same is what we have here. Then we have six day in 78 and I think they correct. Yep, they currently correct. And then we have 20 again. So 20 is damn on the column of the next long. So all we need to do here is go. OK, I'm going to grab the 20th autumn and said that was a great column. Three and South if I come over and check now, we've got the 20. You thought him in that middle position? That So, what do we have left now? What comes after 20? Well, 23 does. Because we can see 23 is being asked to spend freak homes into Rose. So we need the factor that in. So let's do that. So Okay, I'm so and will change the autumn from 23 3 And here I'm just going to use a great column off span three. And just before that, we use a creek road of span to and safe. Hopefully, if we've done everything right, this should look exactly the same as the end result via which it does cool. Now, I just realized that were being going at this for a little while. So maybe I'll just end the video here, and I'll see you all in the next video. 25. Bringing it all together part 2: Hello, everyone. In this video, we're going to be looking at free it altogether, Part two. So let's get to it. Okay, so in this video, we're going to continue on from the last video. And now look at the second grid of the four that we have on this page. This grid is flowing in a column. Vice direction is also using sparse packing. So let's get started. We will start out by once again person seeing the red grid autumns first. So which one of those? Well, we have 11 14 and 25. They're all explicitly positioned. So what again? I have it selected for this, Which is this one here which will show those islands straight out the box. So we can say there I've he now 11 14 and 25. Now we just need to position him when we walked up. So the 1st 1 I wanna position is item number 11. So we'll just copy that. Select out, bring it down. And this is now locked to Grid Road. Start of one. And I agreed column start off on three in this case and then agreed Road and well, it's just spending too and a grid Cullman, which also spends too. So if we say this and confirmed, well, it's a little hard tonight's right now, but that is in fact, in the right position. It's just that we have more columns in this example to start off with. Then we have here. Okay, So just to let you know, at the very top, er, I'm using grid temp like columns off five lots of one if I and far force of one pixels, respectively. That doesn't mean that the greats, not creating implicit columns, all rise the factory in these other items. Okay, based on the fact that reason Spice Paki. Cool. So that is why it looks a little off Long day. But it's actually not. It's in the right place now what's going for number 14 here? So if I come back down, so what we currently have, which is this year, I'm gonna now choose full tain. And when they are going to explicitly position that all, if you look at what we currently have here, it's in the last right? It's second color. That's 12345 And to what size? A grid, right, five and a great column to and safe. If I check there it is, then they okay and that's the same. It's what's here. Just keep your mind again. We have more columns over here. And then finally, 1 25 is in the third row. First column that was, Look that in sacred right, third right, first column and save and check. And there it is, right there. Cool Now, Once again, we then move on to the yellow autumns. Which of the autumn set up love to a specific column? Keeping in mind this is a column based flood. So if we can see, the first column has items 24 18 and 23 kind out. Obviously, if I come down, we can say that that won't be in that order with me. Basically, show them for now. Save this. Come back to what we currently have. We can say 18 23 and 24. I warned up in that first column, right? We need to lock it still, and then we need to change the order. A swell as make 18 spend two calls go. So let's look at first, so I'm going to sit a grid column here. So one just like Sai, and that doesn't really change anything at the moment. In terms of what was already there, however, we do want to change the ordering off. 18. I believe that's going to be the second on um, so probably the better way is to make art in 24 have a little lower order value than 18 23 . That was great, the selective for autumn 24 here, just like so. And we said Order on that to be more this one insight. If we check now, we can see 20 fours before retain, which is before 23. And that's what we want. You cool. Now we just need to make sure that 18 spans two columns, So I'm gonna do that by using Grid column and span two and save if I come to the alright tab here. We can now say that it's actually spending to Carlos because give you morning Greek column with one parameter is the same as usual. Greek columns stop, so that's why he's in Greek Colon end here. Cool. So that is the first column walked. There are the more items toe lock. Yes, this seven on this 13. So when it come down, so next selected here, which I've committed at come yet coming to that and this one's gonna show it seven and 13. So if we now save that and come back, we can see it was got 7 13 Cool. So when I looked, those two obviously great column off three. Believe it. Waas a check. Yes, it is. 123 And that's all we need to do. Because there already, you know, one so one cell and saw it so we don't need to spend a little video. So the next one we have to do is three and five, we three spending three columns and two rods. That's the next selected in here. So I'm permit that at, and we don't look these to a grid colon off full insight if I check what we've got right now. Well, we've got two problems. We do have three and five in the right spot, but five is supposed to come before three. And threes. Obviously meant to spend multiple columns and rights. So what I'm gonna do here is a little mate. Autumn three have a higher order value five. So that will get the three below the five year. And then I'm going to set a grid calm and to a span off. Was it three? We want to get three columns. Yes, span three. And they will set a grid right, spend too and safe. And now we should be getting the same result as we have a deal. Cool. Now, at this point, we've handled all the comb walks. All right, So what I'm gonna do now is locally before I'm going turn level these display grids and place items and so on, so forth from each of these sections. Because now we're gonna show all the autumns of once. So that the very top here, where is it? No. This'll on here that can they'll go to? Yeah, show all items. And if I come to what we currently have now we have this result. Okay, So if we compared to what we've got currently well, we have the problem with ordering at the moment. So item number two here is first in our grade. As you can say, six day in his first. All right. Followed by Well, actually no. 22 is first followed by six days. Then we have 12 and four. OK, so where is one of the moment? In fact, one is actually down here, so it looks to may like we need 22 6 Dane to have a low ordering than every other number there was. Just check the rest of the order here, so it was God. 1 2/4 an eight than 10. Are there non than 10. So it's still a KCIA 1 to 4. Six I non 124689 10 12 15 12. Where's 15? 15 is over here. That's fine. Cool. All right, so it's 15 16 and 22 that have toe have a low ordering than all the other numbers. The rest of these air in order. Yes, that's great. So basically will give 15 a negative 1 16 in the two and 22 83. So I will come down to basically the end of all of this. But we have the remaining autumns here, and now we're gonna basically Wow. Well, Poppy, some of the select is like so and this one will be out 22 and we'll get that in order of native three and then we'll just copy this two more times and change the number. So 22 16 and 15 bubble submit. So this would be needed one. And it's been needed to. All right, so if we don't save this, at least we should have the right ordering. So 22 16 15 then one. 22 16 15. And then what? Cool. Now we've gotten to the point well about ordering correctly. Now we just need to deal with some of the spans, our belief, because I think yes, Autumn tender spending, multiple columns and rise. And then, on top of that, we have autumns that are offset. So 1 15 looks like it's basically been locked. The last column there so we can put in here. I said, I don't last home loss, right? So we put a great drive off 12345 Just like so and save. And we'll just confirmed that that works. And there is 15 is now in its broad position based on what we have here. So we've got days to halls now. The next thing we need to do, I think 1 to 4 is correct. 24 is correct. But then six and nine Look what did bein pushed into that rock. I believe that's the nest. Next course of action. So basically, after all this, let's do that. So it will change this to six, and then we'll just copy this from a priced nine. You're the order value here because we're in the right order and said, Ingrid, row here to three save If we come in check. Well, six and non now are in the right position. It saves. Yes, I are. His age is also in the correct position. Now we've got item 10 so that comes next. As we said, this looks to be spending three columns and to rise, so let's make it do that. So coming down just underneath this select out will grab one of these. So I said, Dan changes the 10 and then we'll just go. Grid rise span two. Create column. Spend three and safe. And there we can say that 10 is in that bottom right hand corner, which is the same. It is what we have here now. If I look of what's left, it looks like it's only ardent 12 that needs to be moved and everything else is the same. 79 23 1 So 19 should go to the top. That next column, which it does, and 17 say So all we need to do now is move on 12 into the second, right? So let's just do that. That's really easy. Just copy. We've got here and paste, and then it's got grid Road to save. If I check what was God? What have I done here that does not look to be the same is what we have over there. And that's because off heaven transfers to 12 They have a chance of the 12 then will be correct. And that looks to be the same is what we have here. Awesome. So they got that is basically is easy as I can demonstrate how the order placement algorithm works insist That's great. So now I challenge you to now try it the next two examples which using dense packing So you gotta take into consideration that the cursed conjoined backwards and fill in the gaps. All right, so I want you to go. Why now And try this on your own. I already have the solutions to this. So you can basically refer to them if you're a little bit lost. But I suggest you try and do your best on trying to figure out a lab on your on. That's it. That's all I want to do in this body. I so see you won't in the next one. 26. The grid property and Autoplacement part 1: Hello, everyone. In this video, we're going to be looking at the grid property and what I placement one. So let's get to it. Okay. So that we understand what implicit and explicit grids are and basically all the concepts around what I placement. We deny how we can take the knowledge that we have so far in this section and apply it to the group property. So this is one off two videos. We'll start off for some really simple scenario eyes, and then I'll show you some coaches, probably in the next video. Okay, so in this video, what I have is five grids, I believe. 12345 Banking six. Okay, now, if the fest grid, it's flowing in a road based direction. But it has four explicit columns which have been noted here with a repeated for one. If I and there was thought basically rise that it created to be 200 pixels high, but the role implicit. So I'm sitting the mole appeasing greed overrides with 200. Okay. And in this guy's, we have an autumn that's offset it, which is Autumn Tin here. I've said that to have a great cold three. And basically we were all so easy. As a result, spots packing. So that's the 1st 1 The 2nd 1 is three months a sign, but we're using dense packing something that with the older for here over dense. So that's the only difference there. For the Fed option went out flowing in a column based direction. And I've offsetting Item eight to go from what would have been the second road into the third. Right? Self added that up here is in good road three. Okay? No, not it's also using explicit robots. So I was God, a great sublight rise here. Free Lots 200. But you can tell the columns are all of equal size. But I've denoted that with agreed all the columns of what if I This too is using spots packing the one below. It is pretty much the same for using dense packing. Now, after this one here, basically what God is a grid where the 1st 3 rows of defined. So if we come down and look what that one we can see for the rice, we have three lots of 100 pixels. So that is Teoh. Identify these first rate rise and we have three sports it, Collins said. To thrills 15 it's flowing in a row. Vice direction, but wig basically ensuring the implicit rows are 100 pixels as well. So we have four lots of 100 here. We're going to see how we can change that, using the group property as well, well, outside yet buttery rata easing. Agreed, probably. And then lastly, what I have done here is a grid where we have basically three rows that set the tone, officials high. But then we have an implicit right. Then there's to be one of pixels high. Okay, we need to know I have. We can set that up. He's in the group, probably as well. Anyway, let's get started. We'll go back to the very top. Yeah, and we'll deal with this festering. So if great template columns of repeat full one if I and road and then we go quit order. Right? So the deal with the basic ordered flood property all we need to do is we need to specify a special key word, and that is what I fly. Now. This keyword is applied to the side where you walk the floor to tank. So the moment was saying great ordered flowers, Right? So this cable to be the first that you write on the road definition side, the thing that follow is it is the very off grid or arrives. So this guy said, This is between the pixels that we have that ford slash And then we have extended column definition justice right here, and that's it. Really. So if I cut all this up related and save, we can say we get nothing changes that indicate this actually works which shines. See what I floor here to say 100 pixels save. You'll see that now we get four lots of 100 pixels. I can also take away the order fly just in the Kate that this will now apply on 100 pixel size just to the first run. So if I say this now, you can say the other three rows of shrunk to their minimum sauce. Where is the first right? Is now under pixels. So we can say that that works here. Why? Playing those two things. So I went back to what it waas which was that right there Now We don't have to worry about spots backing because that's sort of the packing, because that's what the phone, which is spice so we can move on to the next grade now because this is the same, we can pretty much copied most of what's here. Could be that break down placed. The only difference we have is that we want dense packing. So we need to do is talk dense in 20 what I fly like a bird and the size for order rise. If we do this correctly, cut that at and save once again you can see nothing has changed. If I take the dance out. Just indicated this in fact US work. We can say its using spots packing now so that I can we have to inspect Collins very similar to what we've done other than the fact that it's sort of like a where it will now be on this side. So we can pretty much scrabble this so speak. If I rise, we want three lots of 200. So I grabbed this for paid function in relation. Place it here and then basically on this side. We want out when I fly because we want to flow in a column vice direction, and then we want that one. If I we don't want a fire that will map to this Great what I calls, right? Yeah, they're placed. And you can say this great doesn't change. Okay? And just to give you an idea that you know, that flight does supply like this add save. And now we can say we get one very long comb, all right, because we say we want one column. That's what wanted five. Which means you'll get all the way across this great. But what I find from it was saying, fill in as many as we can, which in this guy's happens to be father. Them cool. So no dramas. They're pretty straightforward. Same with dense Paki. We just pretty much copy all this and because this is all the same Well, we have two. Here's put dense. If I scroll the answer that result and save, we can see that change. If we take dents out, we could say that it despises the one above with that back in. And that's older Is toe. Now for the next one. What I've got is a Greek template Rhodesia. Overpaid, afraid times 100 pieces. Which indicates these 1st 3 rides. However, the last road that's here that's now implicit. He's also got a size of 100 pixels. So in this situation, what Weaken day is we can basically ignore green template rise because it's the same size. So we have to delete that. We just got grade off. Basically what I fly 100 pixels like side and then now great tip like calls just like that . If I tuttle the sound and safe this we can see, we get the same result. Okay, just indicate that that's the case. Foreign titans out. So there I was saying, We have one royal definition of 100 pixels. We can say that implicit size has gone away and we just have that one road definition on pixels, he said. So the order flow keyword is very important. What? That back in who now? The last one? We basically have a situation where the grid template rose has a different size to the green order rise. So happen we write a grid statement to address that the answer is with her so all we can do it best is going grid. And we got order Flo s 800 pixels. In that case for these two properties, right here and then on the other side. We got a great team by columns. Repeat, blah, blah. I set in and that basically kite is full, those properties right there. But now we need to cater for the green template rights. Okay, so if I said this right now, you come down, we can say it doesn't work around there. And that's because this grid statement over rights to greet template rise. So this must follow agreed statement just like that. And when we do this, then go back to what was gone. Okay, so, unfortunately, we don't have a basic situation where we can apply implicit rows off a certain value and then explicit rose of a different value at the same time. So in this situation, we have to choose either toe have agreed Steiner, where we specify the implicit rise. All right? Or kristen, where we specify the explicit Rose like so. All right. Like, we'll just say this, and then this would become really order rose off one the pixels like, sir. And that would work as well. So they both do the same thing. Very good bye to my original very here. Which is that and all. Good. So that's all I want to cover in this video. So? So you won't in the next one. 27. The grid property and Autoplacement part 2: how everyone in this video we're going to be looking at the grid property and ordered placement, Part two. So let's get to it. Okay, so in this video, what I wanted Teoh is talk about a couple of discoveries that I made when I was playing around with the grid property. In regards to the things that we've learned so far in this section of the course. Now what? God is basically three grids that we see here, where the first grade is essentially just agreed. That has three explicit columns and three explicit rose with the first rise, 100 pixels in the next 2 200 pixels. And then we have a follow right, which is implicit, right, that said 200 pixels high using the agreed authorize. Okay, for the second example that we have here essentially what this is, is it's a grid that has absolutely no columns or rows to find on it. Okay, so I've used a great order, a rosy of 100 pixels and agreed order columns of 200 pixels that's flowing in a road vice direction. So you're probably wondering how I got this second color? Well, I got the second column based on the fact that I said the first item to have a great column too. So that force, that second implicit column to be created. So that's why we have to call ins here. So and then the last example. I basically have four items that I've set up Pusey Group Template areas. And on top of that, I'm also ensuring that great auto columns would sit the 200 pixels, which made sure that these two homes were turned pixels water each and the angry daughter rights were sent to London, which is why they're 100 pieces hot. Okay, so one of the cover these scenarios using the grid property So we'll go back to the very top. Also, just keep in mind that I've got a bunch of great areas as well for that last example. Okay, just that a, B, C and D. So ABC Day matches one, 23 and four, respectively. So it comes into the first selected that we have here which will match this first example And when I want Dio is the one trying convert this to have the same scenario just using the good property. Okay, So as we already know, when we have a template definition that has a size, it's different to green order flows. We couldn't necessarily use the grid property to Dubai. We would do something like this. We have grid. And then we got what I flower under pixels and that would cover these two problems right here. And then we have a column definition, which is straight. Lots of one in five, right? And then underneath that we grab our greed template, Rose. But I'll just copy here heist. And then I come here, these two bto save and we got the same result. Okay, so you pull your asking. Well, what's the problem here? Well, it's not necessary problem. It's just something I discovered when I was playing around with this. So what you can actually do is say that we remove this repeat and make it to lots of 200 pixels, like so right. What we can do, or what I found we could do it is that we can type this track list and we actually dump it right next to the water flowed from Key West. And this will actually give you the exact same result, as we have here, does it save? We get no change now? How does this work? Because I said in the previous for the I that the first value after auto flow is only going to refer to the sides off the implicit run right, which is this right in here. But the 1st 1 is also 100 piece ALS and these next two or said 200 pixels. All right, so it's behaving as if this has been identified as a track list for green template rods, but the same time it's acting as if it understands this big as being we want. It's a floating around vice direction, and the Havel rose that implicit be 100 pixels. Well, I don't doubt the documentation on this, and I couldn't really find anything that suggested that this should work. But when I tested it, multiple browses offended that that's they say if you basically, if you have a situation where the very first track is the same size as there are many implicit tracks, you can actually fit it'll inside the grid statement by doing something like this all right , probably wouldn't recommend it. I would probably recommend that you do it the otherwise I said, which is this way and hope, sir, when she is that way, and that's probably the more clear way of understanding. But I just want to point out that this white works as well. So this is something to keep in mind now. The other thing I want to quickly cover here is the fact that how do we map to implicit sauces into one grand statement? The answer is you can't okay, so if I have the Greek key would and we want to float right based direction, we have to put the order fly on the roadside and then specified size. What we can't do is we can't add all that flow on this side as well. To set the implicit size for the columns, this will actually write it. So if I come into stuff out inside, you can see that the grid no longer behaves as it should. It still has two columns, but that's because of the fact it up here. We're forcing the first item into the second column, right? So we're creating that car, so it's just say OK, we're using auto by default for the columns because this breaks it say Okay, well, what I for the two columns, therefore they'll be equal sauce, the rose. Also on 100 people high in this because the rule also breaks so we can't use to lots of what I fly. And that makes sense because we can only ever flowed in one direction. So if we want to do something like this, what we need to do is specify an initial size for the first column here to be 200 which is the same size of off the grid order columns and then underneath it. We just need to repeat this property just like so. If we do this, then we get back to what we had here. Okay, well, we have a lamp listed Rose being 100 pixels high and oil visit columns being joining people's high at what's right. So in this case, we had we do have a column definition. I have 200 pixels, but then the following columns will be 20 pixels in size. Implicitly. Okay, So just another gotcha that I thought that you may not be aware of. You might run into at some point in the future that for the last one, I wanted to explain quickly how you could basically set out implicit columns and rows when using greet imply areas. Well, you might think, OK, we'll set about gridlock. We normally would. So we got grid A B. But then, if you remember, we had the special for an explicit size. So we can't basically use the grid property to specify only implicit sizes. We have to explicitly set here a sauce. In this case, I'm just going to set Oh, sorry. Not 200 100 for the rice, like so? And then get it the next line, your CD and then to sorry, 100 pixels again, Looks I And then you would have your ford slash and you have your two in pixels. Right? But if we do this at the moment, this is not gonna be enough. All right, All this is gonna dio is if we come to the very bottom. It's going to create basically two columns and two rows where the first column is only defined to be 200 pixels wide. As we say here, we want them to bay 200 pieces wide for both columns. That's not the case. Yeah, so we either have to come in and explosive Senate lock. So to which we get a result. Or if for some reason, we might have a situation where in another implicit column market created. And when you want to cover for that, then basically, we need to take these two statements well for the rise as well. This is just to ensure that for any extra columns or rows ticket created, they'll be the same size. Is these ones here every safe this. Now we can see me at the same result. Obviously, if you're trying to do something like this might be better. After sticking with what you have up here and using routes and but areas in order columns, Ingrid will not rise rather than trying to force it to be used in the grid property. But I wanted to be complete and say that you can call in to do it, but it's not so simple. And that's all I want to cover in this video. So see you Whoa, in the next one 28. What's in the project: Hello, everyone In this video, I was just going to quickly look at the project work. Okay, It's officially congratulations on getting to this part off the class. Now I want to quickly talk about is the project leg. So not is may examples for this class that we had in the previous one, but these ones will be a little challenging. Okay, so the first example that I want you to work on is basically another image gallery. Now, what this one does is as you grow the width of the vice over time it goes from heavy one common white, this to growing into two columns and then eventually three. And finally you will get to four calls, and then it will quiet. Stop there. Now, you need to be out of build this image gallery without using media queries. Okay, so you have to use the knowledge that you gathered from the class to try and build this layout without the use as a media query. Okay, that's the 1st 1 So what it looks like from the very start is you just have it lined up like this. And as you can see right now, it cry just stays is one column, and we just could just continue to grow and that's it. So what I got from this point of view here to this All right, that's the first problem that you have to deal with. And you think about how you can do that without media queries. The 2nd 1 is probably a little bit more challenging, and that is we're going to build a replica off the old, tall by system that was used on Twitter. So it's a responsive version. So there are many inquiries in this one, and based on the width of the device, what you will see will be different. Okay, so the first thing you'll have is that you'll be you'll have to build the portrait mode version of the APP, so you've just got the feed available on the screen. But as I grow out the width of the device to certain with like so well, when she will happen is when it gets there. You now get this lion. We're all of a sudden there. We have two columns where one is a fix with on the left. Another one's fixed within the right, just like So as you can see, it stays in the middle like that. But then we have tiles of the different sizes here on the left. So we're gonna make sure that the tiles are the right heights and things of that nature. And then ultimately, we need to make sure that this feat tile kind of spans all the tiles here as well as continues to grow beyond the links time. OK, so as you can see here at the moment on this particular you are that I've got here, that it's growing a little bit past the legs. Now, if I was to add hope under text inside this feed area, you would say that will continue to grow. OK, so that's the second part off this life. They're finally as I grow Atmore, Inuit space direction, you'll get a three cold player where the profile in the trendy on the left hand side, the feed is in the middle and spans everything. And then you've got the noticed fuller and links on the right hand side. Now the key is here. You have to use CSS grid to do this and you can't lose the heart of each of the tiles. They have to stay the same as they were in the two column. Wow. All right, so this will be pretty tricky when you try it for the first time, but I'm pretty in there as a pretty complicated challenge because of the end of the day. This is the consul adds that you want to build in the real world. Okay, so that's that one. And this is how it looks before you start. So you end up with all the tile shining on my ball. And as you can see it, Comet, just stay thought that that's where you'll be Starting from the next one is a movie gallery . Now this one is basically, for the most part built. Except there's a couple of issues in different, uh, sizes on different devices. So what we're looking at here is the final product. So we can say we got a movie gallery weaken squirrel from left to right. It shows a bunch of movies here, important married. You consider titles at the very bottom of each movie, and a bit of a description there as well. Okay, if I rotated over, you'll say that we get a different look and feel right. So all of a sudden, without the fun now here on the left, we've got the title in the text here on the right, but at the top and then other than that, it looks similar. OK, if I come to tablet and I come back to the portrait version like side, you can see this pretty much. That's the same as it did on mobile or more in portrait mind. But let's fleet the side off if I look at that and then I look at this, they pretty much society. So you have to ensure that that state's preserved when switching back to a bigger size device. In Portrait Man. However, this is where the key factor changes. So when we go into landscape mode, all of a sudden the grid changes. So if God, our first movie which kind of spans multiple rows and columns here but then after that, each movie commander takes up a cell right in a two road layout, and then the number of columns is based on the number of movies, and then finally, at the very end here we have what we I've referred to is a feature movie which spends two columns from its current position. OK, now that's the final it product. Obviously, when we start is very different. So already you can see that the text in portrait murder is not in the right spot. We could also see that we're not swelling from left. Perahia. So we're flowing in a road based direction, right? So we have to change the direction of floor here and things like that. If I write it into, uh, basically, let's get murdered. It kind of looks over right right now. But again, she can see it's no flying in the right direction. So we need to fix that. If I come Teoh iPad, we can say it's still broken here as well. So we need to address that. And then finally, when are rotating to landscape while it doesn't really work it all Okay, it's pretty broke in here. So what I would suggest for this challenge is that you start off with the pixel or anything off a mobile size in portrait mode. Fix this problem first, then rotated over, fix anything that might be broken as a result off anything you change here which might happened. And then eventually your iPad here you will probably have other breaks that maker fix those rotate over and then create that you are lad that we saw over here. Okay, so it's a lot to do. But, you know, it's a good challenge for you to take up now in terms of how you know what to do, I've added is part of each folder Bahia a set of instructions, you know, that's associated with each of the examples as well as a before and after. So the before is the card that you see here that's broken and stuff like that, and that's what you'll work against. And then the after is basically the file out port that you see over here, right? Based on the instructions of giving him okay, that's the important thing to understand. And now all you have to do is start working at it. And with that said, congratulations. If you've gotten to this point and you barely get through these challenges great stuff. If you're stuck and you're unsure what to do, you always reach out to me here. And I will do my best to help you out. Okay. With that said, congratulations on completing this class and I hope to see you in a future one