Mastering Layouts: CSS Grid and Flexbox Essentials

1. Class Intro: Hello, and welcome to our new class bustering layouts, CSS grid and Flexbox essential. Hello. By name is Jota short car and full Steck table and online instructor. This comprehensive course is designed to help you build response, flexible and professional looking wavesite, using two of the most powerful Ces tools. CSS grid and CSS Flexbox. CSS grid is a game changing two dimensional layout system that allow for precise control over both row and columns, and Flexbox simplify one dimensional layout. Creating perfect alignment and spacing for dynamic adaptable designs, and we are going to start this class with Ces grid. What is Css grid layout? Then we learn, Cess grid, building row and columns. Next we will learn, Ces grid gap putorial. Then grep, grit spani grid line Name, grid am, minmax function, implicit explicit grid, grid tape alignment, track alignment, autop auto feet, grid feet, Grid water property, nested grid, overlaving grid items, et cetera. Then we're going jumping to the CSS Flexbox section. He bar, flexbox reaction, Flexbox wrap, flexbox flow, Flexbox justify content, Flexbox alignment, Flexbox an content, Flexbox Ansel, flexbox order, Flexbox brow property, flexbox basics, string, margin ato, C flexbox, nested flex, at last, here we create a project using CSS Flexbox. He will create a dropdown, navigation main. This is the complete course about Sess grit and Sess Ples box. By the end of the class, you will be confident to using Sess greet and pledge box to create responsive, flexible layout that adapt simply any device. Whether you are a beginner or looking to enhance your b des skill, this class will equip you with everything you need to muster b layers. What are you waiting for? Let's start together. 2. What is CSS Grid Layout: Hello, guys, welcome back. In this tutorial, I'm going to introduce you what is CSS grid and how it's work. Why should we use CSS grid? The first nefdes, it's a two dimensional grid system. It's new layout system. We call it two dimensional because we can handle rosen columns together. Our second benefit is, grid layout replace float layout. We don't need to use float property anymore, like margin tier, and we don't need to focus on float left and float right. We can create layouts very easily. Our third benefit is, it create our code very first and ten. Because we don't need to focus on float properties, and it increase code readability. Our fourth benefit is, we don't need to use any CSS framework, like bootap, foundation, materialized Cass, et cetera. Because if you understand grid properly, then you don't need to use any framework. Because you can handle all the things with Css grid. Let's try to understand how actually grid works. Suppose this is a deep. Inside this deep, we have six different deeps, and we call this structure grid system. Without using float and margin, we can provide gaps here, and we can handle it together. We call this parent container is grid container. To create this grid container, we need to use a CSS property in our parent, which is display property, display grid. When we use display property grid, it automatically assume this parent container as a grid container. As you can see all the items on this deb, we call it grid items. Here you can see an individual deb, we called it grid cell, and here you can see some lines between these deep, and we call it grid line. Here you can see four grid lines. These are all vertical lines. Here you can see a gap between these two cells, we call it gutter. Similarly, these lines are work in vertical. As I told you, it's work in two dimensional, and we can handle it very easily, and it's worked like table cells, row and columns. Here you can see according to the structure, we have two grid row in our image. Here you can see in yellow borders, we call it grid columns. Here you can see a gap between rows and columns, and we called it grid area. In our upcoming videos, we're going to understand how we can create grids. In our upcoming video, I'm going to cover all the grid properties in this tutorial series. We are also going to learn how we can create a beautiful layout using the grid properties. Here you can see the browser's name, which can support our grid system. Internet Explorer doesn't support grid system, H supported, Firefox supported, chrome supports, Safari supported, and also operator support. Most of the time, we are work with Chrome Safari and Firefox. Thanks for watching this video, Statute for our next Tutorial. 3. CSS Grid Building with Rows & Columns: Hello, guys, good to see you back. In this tutorial, we're going to learn how we can create grids. We are going to start with two properties. Our first property is Greek tablet column, and our second property is Greek tablet row. Let's start the practical and try to understand how it's work. Here you can see, I already create a esteml document, and I open this estel document using Live Server extension. In our right side, you can see our web browser. First, I'm going to create a D where I'm going to create a grid container. Dep Also, I'm going to assign a class to this deep class container. And inside this deep, I'm going to create six other deeps, D, and I'm going to set a class item and item one. I'm going to duplicate this deep for five time. Here I use multiple classes, and I'm going to change the class name. Item two, item three, item four, item five, and item six. Inside this deep, I'm going to type some text. First, second, third, four pi, and last one is six. If I set this file, here you can see all the deeps, first, second, third, fourth, fifth and sixth. First, I'm going to set a background color to this container, dot container background gray. I set this file, here you can see the result, and also I'm going to assign a w to this container. W, 700 pixel. Also I'm going to provide margin to this container. Margin, for top, I'm going to use 50 pixel. For Lp, I'm going to use zero. For bottom, I'm going to use zero, and F p, I'm going to use 50 pixel. If I set this file, here you can see the result, and now I'm going to provide different color for different items. So I'm going to create a selector dot item one. Also I'm going to set a background to this item. If I set this file, you can see the result, and now I'm going to duplicate this item multiple time. For item two, I'm going to say orange color. For item three, I'm going to say green color. Or item four, I'm going to say yellow color. O item five, I'm going to say blue color. For item six, I'm going to say purple color. If I set this file, you can see the results. Larry can see all the color in our t. Let's back to the parent D, which class is container? I'm going to use a property, which is display, and I'm going to use display grid. If I set this file, here you can see, there is no changes because we do not create row and column to this grid. First, I'm going to create columns, so I'm going to use grid template column. Here we can mention how many column we want. With that, we can mention column widths. Suppose I want two columns, O first columnies, 200 pixel width, and our second columnies, 250 pixel width. If I set this file, here we can see, it's create our columns. Our first column take, 200 pixel width and our second column take 250 pixel width. Here you can see in one row, we create two columns. Suppose I want to change first column weight, something 350 pixel. If I set this file, you can see the column width. Similarly, we can set height using another property. Let me show you. Create tate rows. Here we can define how many rows we want. Here you can see, we have total three rows in our parent container t. For our first row, I want to set 100 pixel height. If I save this file, here you can see the result. It's apply for our first row only. For our second row, I want to set 200 pixel height. For our third row, I want to set 100 pixel height. If I save the file, here you can see the result. If you notice, it doesn't affect our container width, which is 700 pixel. Not only that, we can add another column to this d. For this, first, I'm going to reduce the value of this first column. 150 pixel. For our third column, I'm going to take 150 pixel once again. 150 pixel once again. If I set this file, here we can see the result. Now it create three column. Here we can see for our first row, it set height of 100 pixel, and for our second row, it set height of 200 pixel, and there is no third row in this container. If we had third row in our container, it's going to set 100 pixel height. Let me show you. I want to duplicate this item once again. I I set this file, sorry, we need to dublgate our deep, not this elector. If I dublgate this deep and set this file, here you can see the result. Here you can see for our third row, it create 100 pixel height. Because we mentioned 100 pixel height for our third row. Here you can see a blank space, and now I want to fill this blank space with our third column. For this, we need to use a property, which is auto. If I set this file, here you can see, it fill the area with our last column. It's going to fill all the remaining space with our third column. Suppose I want to change our second column with, 100 pixel. If I set this file, you can see the result. If I use auto for our second column weight, and if I use this value for our third column weight, and if I set this file, here you can see a result. Now you can see our first column take 150 pixel weight and our last column take 100 pixel we. And our bland space covered with second column because we use auto value for our second column. Let me show you one thing. If you use Firefox or Chrome browser, just press E 12. It's open developer option in your browser. If you highlight the continent deep, here you can see an option named grit. Also you can see the property, display grit. Also you can see a grit icon air. It's called grit Editor. If you click on it, here you can see a lot of options. For now, I'm don't going to explain it. I will explain all the things later, so I close it. But if I click on this, grid option, here you can see some line, and also you can see the line numbers, and we call it grid lines. It only possible if you use display grid property. Here you can see, we use pixels, but we can use percentage also. Let me show you. Suppose I want to use two column. For first column, I want to use 40%. For our second column, I want to use 30%. If I set this file, here you can see the ds. Our first column cover 40% area of our total width of container. And now I want to use third column, and for our third column, I'm going to use auto win. If I set this file, you can see the result. Our first column take 40% or second column take 30%, and our third column also take 30%. Because our first and second column take 70%. If I -70% from 100%, The remaining value is 30%. That's why it's take 30%. Not only that we can use pixel with percentages. Suppose for our first column, I want to use 100 pixel. If I set this file, you can see the result. Our first column is 100 pixel and our second column take 30% of our container width and our third column cover the remaining space. Not only that there is another unit, which is Afer means fraction. Suppose I 12 column of one Afer and another one is one A. If I save this file, here you can see it half our container d. Our first column take, first half and our second column take or second half. If I use another one a value and save this file, here you can see it create total three column, and all the columns take similar width, similar width. It's equally divide the container width, which is 700. If I use two a value for our third column, and then save the file, here we can see our third column take two times space then our first column and second column. Here, you can see we can control grids without using float. Next, I'm going to use another property which is grid gap. Let me show you. I'm going to use 15 pixel. If I set this file, here you can see, is provide equal gap between rows and columns. If I click on this grid option, you can see it. Now you can see it clearly. In the next tutorial, I'm going to explain you clearly, and there is another unit which can we use as a grid template column value, which is repeat. Let me show you. Repeat is basically a function. Suppose you want two column with equal width. In our first parameter, we need to pass how many column we want. In our case two, and then you need to pass the width size, which is 150 pixel. If I set this file, here we can see the result. Here we do need to type the width value multiple time. If we want four column, just we need to type four here. If I save this file, here you can see the result. It creates four columns with same width. For now, I'm going to use two columns. With that, I want to use one a column. Yes, we can do it. Type one f R. If I save this file, here you can see the result. First, we create two equal size with column, and then it covered the remaining space with our third column. Similarly, we can use percentage value and pixel value here. Let me show you. Suppose I want 40% column. If I save this file, here you can see the result. Similarly, we can use our fraction unit in our rules. Not only that, we can use fraction unit for our rules. But before I'm going to set a height to our parent container. Hight. 700 pixel. If I set this file, here you can see the result. Now I want two row with equal height. So I'm going to use refit function, two row with one f height. If I set this file, here you can see the result. Here you can see it's equally divide over rows. This value is only apply for two rows first and second. If I use three and then set the file, here you can see all the three rows are equally divided. Their height is equal. Similarly, we can use pixel value here. Suppose for our first row, I'm going to use 100 pixel. For our second row, I'm going to use 30%. For our third row, I'm going to use one AR unit. If I set this file, there you can see the result. I hope now the concept is clear for you. These two properties are most important to create a grid structure. Our first property name is grid template column, and our second property name is grid template role. In our next tutorial, we're going to understand what is grid gap. Thanks for watching this video, stay tuned for our next Tutorial. 4. CSS Grid Gap Tutorial: Good to see you back guys, in this tutorial, we are going to learn a new property, red CSS grid, which is CSS grid gap. We have total three property related grid gap. Our first property is grid row gap, and our second property is grid column gap, and last one is grid gap. Let's try to understand how grid gap property work. Here you can see a gap between grid items, we called it grid gap. If it come with row is, then we call it row gap. If it come with column wise, then we called it column gap. Let's start the practical and try to understand how it's. Here you can see side by side, I open my visa studio Creator and my browser using Light server extension, and I already created estemL document in my directory. Here you can see, total two grid columns with one e value, and have total three rows in our grid, 100 pixel, 150 pixel, and 100 pixels. Between these items, I want to put a gap. Maybe row is maybe column wise. First, I want to use row is gap. I'm going to use a property grid row gap. And I want to assign ten pixel gap between these roles. Let me show you ten pixel. If I set this file, here you can see the result. Let's increase the value, 30 pixel. Here you can see the gaps between roles. You can increase the gap size, how much you want. This is row gap. If you want to space between column wise, then you need to use grid column gap property. Let me show you. I'm going to type grid column gap. I'm going to use 20 pixel gap between columns. If I save this file, how are you see the result. Here we can see row gap is 30 pixel and Column gap is 20 pixel. Not only that, we can use certain property for these two properties. For these, we need to use d gap property. Let me show you gap. First, we need to pass row value, and then we need to pass Column value. For row, I'm going to use 20 pixel. For column, I'm going to use 30 pixel. If we use d gap property, we do need to use this property anymore. I'm going to remove it. If I set this file, here we can see the result. The distance between row is 20 pixel, and the distance between column is 30 pixel. If I use equal value for row gap and column gap, 30 pixel for row and 30 pixel for column, and save this file, here you can see the result. Now I want to show three column in our container. I want to type, repeat column C. If I save this file, here you can see the result. Also, you can see this similar gap between grid items. Here you can see a blank space because we use three different row sides. If I remove this one, mean last one, and set this file, Now you can see there is no gap. Our first row height is 100 pixel and our second row HT is 150 pixel. I hope now it's clear for you, what is GID gap property. Thanks for watching this video, stay tuned for our next Tutorial. 5. CSS Grid Items Positioning Tutorial: Once again, I'm back with a new tutorial reed Css grid. In this tutorial, we are going to learn Cs grid it position. Let's try to understand what is grid items are. What is the meaning of grid item position? Here you can see a parent deep and we called it grid container. All the deep inside the parent container, we called it grid items. Now the question is, what is the meaning of positioning? Suppose you want to move grid three item in PP place. Also you decide to move Pi one is third place, something like that, and we called it grid positioning. As you can see, we move the third item in fifth place. Similarly, we move the fifth item in third place. Related to this alignment, we have some sess properties. Let me show you. As you can see, we have proto seven seses properties, like grid row start, grid row end, grid row, grid column start, e. At last, we have a shortened property named grid area. Let's jump into the vessels to the coator and try to understand how it's so. Here you can see, I already create an estimate document, and I open my browser and my cod heater side by side. If I show you, here you can see, we have a parent container. Inside this parent container, we have total six deep. I mean six grid items. As you can see, every grid item color is different. At first, I'm going to move the first grid item into the sixth place. And similarly, I'm going to move the six grid item into the first place. As you can see, we already create our selectors. Item one item two, item three. As I told you earlier in this tutorial series, we have a browser option in our console, which is grid lines. Let me show you. Just select your browser and press pw me deb per mole. I'm going to open this panel bottom of my browser. I'm going to press this option. Here you can see a option in my pen container, which is grid. If I click on it, here you can see some lines. Now you can see grid line numbers. You can see it row wise. Also you can see it column wise. In this tutorial, we're going to understand what is the use case of these lines. Let's jump into the our first item selector, W is item one. As I told you, I'm going to move this first item in six position. At first, I'm going to use a property, which is greed row start. At first, we need to move this grid item in second row. As you can see, this is the second row. I'm going to type two here. If I set this file, now you can see our first grade item move into the second row, and also we need to declare the end position. For this, we need to use another Sess property, which is grid row n. Once again, if I show you my grid lines, here you can see, or n position is three. That's why we need to pass three. If you use grit ron property, maybe it creates some trouble when you responsive OF side. If I set this file, here you can see, there is no changes. But it is good manner to use this property. Now we need to work with columns. As you can see, we need to move this grid item third position. For this, I'm going to use another cess property, grid column third. Here, I'm going to set three. If I set this file, you can see the result. We successfully move our first read item in sixth place. Also, we need to declare the n position of this column, read column. As you can see, our row end in fourth position. You need to pass four. If I set this file, here you can see there is no changes. It's not mandatory, but for responsive purpose, it's very important. Now I want to move this fourth item in first position. For that, I'm going to copy the code, and I'm going to jump into the fourth item selector, and I'm going to pass the code. Our starting rows, type one, and our ending row is two. Similarly, as you can see, our column start with one and end with two. So to type column start one and column two. If I sit this file, here you can see the result. We successfully move our fourth container in first place. But the important thing is, we do not change our etermal structure. Here you can see our eteral structure. Using CSS greet properties, we can change their positions without changing their actual structure. Now I'm going to show you shorthand method, all of these properties. Now I want to move the fifth item in first place. I jump into the fifth item selector, and then I'm going to use a different cases grid property. If you want to create shorthand for row, then you need to use grid row property. Let me show you. Grid row. First, we need to provide the starting row position, which is one, and then you need to use s, and then you need to provide ending row position, which is two. Similarly, we have shorthand property for column, which is grid column. Let me show you. Our columns start with line number one and end with line number two. If I sat this file, here you can see, we successfully move our fifth grade item in first place. But what about fourth grade item? We do not remove fourth grade item from this container. It still exists in the first place. Just item five, overlap the fourth one. That's why we cannot see the fourth one. Not only that, we have another shorthand of this property. Using this shorthand, we can pass four value at once, which is grid area. Let me show you. Suppose I want to move the sixth item in second place. For this, we need to provide row starting point and column starting point. Our row starting point is one, and our column starting point is two, and then we need to provide row end point and column end point. Our row end point is two and our column end point is three. If I set this file, here you can see, we successfully move our six container in second place. Just you need to use one CSS grid property, which is grid area. Just you need to remember, first, you need to provide row starting point and then you need to provide column starting point. Next, you need to provide row ending point, and you need to provide column ending point. I hope now it's clear for you how row and columns are work. There are a lot of methods we can position our grids. In my upcoming videos, I'm going to teach you all of them. In our next tutorial, we're going to learn how can we span our grid items. Suppose you want to span your third item. I just want to fill this blank area with this third item. Means it's going to take two column eight. I recall this method span. So stay tuned for our next tutorial. Thanks for watching this video. See you soon. 6. CSS Grid Items Spanning Tutorial: Good to see you guys once again, I'm back with a new tutorial related cess grid. In this tutorial, we are going to learn Ces grid spanning. But before start the practical, we need to understand what is the meaning of span? Let's simplify it. Here you can see a grid container. Inside this grid container, we have proto six items. If you notice you can see every d item w is the same, and now I want to extend d1w. I want to extend item number one up to two item. Similarly, I want to extend item two, row is, something like this. For item one, we use column span. For item two, we use row span and other items automatically arranged at his own place. Let's start the practical and try to understand how it's work. Here you can see, side by side, I open my ises to the cotter and my browser using light server extension. As you can see, we have total six grid item in our parent container, and we arrange it serial. Let's start on the grid lines. I'm going to press two. If I click on this option, you can see the grid lines, and now I want to span our first item Column wiles, and I want to extend this column up to line number three. I'm going to type grid column n three. You already know that item n is our first item. If I save this file, here you can see the result. Successfully span our first grid item. Column one. If you notice, you can see all the grid items automatically change their places. You can see that item number six has came down and we do not specify any height to our third raw. That's why it's looks small. Now I'm going to specify height for this third draw, hundred pixel. If I set this file, now you can see the result. Our first row height is 150 fixel, and our second row height is 150 fixel, but our third row height is 100 pixel. Once again, I'm going to turn on my grid lines. And now I want to extend our second item row wise, and I want to extend it from this point to this point means four. For this, we need to work with these two properties. I'm going to copy this properties and paste it here. I'm going to change great row end point, which is four. If I set this file, here you can see the result. Now it's look like a web page. This is our header, and this is our side bar. Not only that, we can use short end property for this. Let me show you read row. If I comment out this two property, and if I type one, slash, four, and if I set this file, here you can see the same result. There is no changes. I hope now it's clear for you how spellings are work. Let me show you one thing. Here you can see, we have total three column with one F value. For this example, I'm going to comment on this property. Once again, I'm going to turn on the grid lines. Here you can see, we have total four column line in our structure. But what happened? If we pass five value here, if I set this file, here you can see, it extend our column with default value. Now we have total four column in our container. But here you can see, we do not declare four column. We just declare only three column. We can extend our grid item beyond the container. Then it automatically adds the grid item according to the fraction value. But this is not the good practice. I'm going to use four. If I set this foil, you can see the result. Now I'm going to fix the third item in his absolute position. For this, inside the item three selector, I'm going to type grid row. Also, I'm going to turn on the grid lines. Our third item start from R number two and end up two row number three, and O next property is grid column. Also it start from column number two and end at column number three. If I set this file, you can see there is no changes. This is the absolute position of third item. Now I cannot move this grid from this place, and now I want to extend second column up to line number three. For this, I'm going to use grid column property. And our column strut from line number one, and end at line number three. If I set this file, there you can see a different result. Because we already place our third dip in that position, so our second grid item cannot take its place. Then is automatically shrink down. But if you notice, you can see we use only grid column property. We do not use grid row property. If I use grid row property, let me show you. Row, and try to move this item in this place. Let me show you. But first, I'm going to turn on the red line. Our row start from line number two and end up to line number three. If I save this file, now you can see a different result. Now it's overlap each other. If you want to see the see item completely, then you need to use D index property. Let me show you. I'm going to type the property name. Z index. By default, it's come with zero. So type one. If I set this file, now you can see the second item with completely. Our third item still exist behind the second item, and now I'm going to show you the different value that we use for spanning, which is span. Let me show you. Sum type, span, and I want to span our first item up to four column, Span, space four. If I set this file, sorry, we don't have four column in our container. That's why it extend our column and create a new grid line. For that, we need to use span three. If I set this file, now we back to our old result. If I show you the grid lines, here we can see total four lines. This value work with grid item numbers, and this work with grid line numbers. This is the main difference between two values, and also we can span it wise. Let me show you. Span T. If I set this file, now we span our first container, row is also column wise. Because we use ZD dex property for our second item, that's why our first item do not cover the second item. I know it's a little complicated. But I'm trying to explain it simply. Not only that we can use this value with this different value. Let me show you. Span two. If I set this file, how you can see the result. For now, I don't need it. So to undo it. Also, I'm going to change the grid row end value. Two. Once again, I'm going to turn on the grid lines. Suppose we have a lot of columns in our container, and I want to extend the red grid item from beginning to end of this container. But I don't know how much column line we have. For this, we can use minus points. Here you can see a line number minus one. Remember, our last line number always start with minus one. We can use the minus v here. Let me show you. If I type minus one and set this file, here you can see there is no changes. I hope now it's clear for you how spannings are. Thanks for watching this video, stay tuned for our next tutorial. 7. CSS Grid Lines Naming Tutorial: Hello guys, good to see you back. In this arial, we're going to learn Css grid line naming. In our previous tuorial, we use grid lines to span our grid items. But in this terial, we're going to learn how can we assign line name, how can we use the line name as well? Let me simplify it. This is our header item, and this is our sidebar item. To create this sidebar item, we need to use grid ra property and grid column property. In grid ra property, first we need to pass Line starting point, and then we need to pass line ending point. But in this tutorial, we don't going to use line numbers. We are going to create our own value name. As you can see for starting point, I use Sidebar Start, and for end point, I use sidebar n. Let's start the practical and see how it's w. Here you can see, side by side, I open my user studio Coraor and my browser using Lp Server extension. I already create a simil document for this example. Here you can see a web layout, which I create using grades. Here you can see a header, a maneuver for different boxes, and a sideware, and last a footer. Here you can see the container and all the deep inside this container. I create this layout using spanning. Let's jump into the container deep selector. Here you can see, we have total three grid column with one A value. Also you can see, we have total fib row with different sizes. For header, I use 150 pixel height. For maneuver, I use 50 pixel height, and for our third row, once again, I use 150 fixel height. For footer, once again, I use 50 fixel height. Here you can see, I span my header from beginning to end from one to minus one. Here you can see, we use grid line value for that. I'm going to turn on my grid lines using developer mode. And you can see the line numbers. This is not a very complex template, but sometimes we need to face difficult templates or a very complex template. In that case, it's very difficult to remember these numbers, and it can create very big problems. To resolve this problem, we assign a name to these lines, and we call this process grid line naming. So Let's see how it's work. First, I'm going to start with rules, and we need to assign these line names with these values. For grade line number one, I'm going to use a name which is header start. Let me show you. First, I'm going to use square ases. Instead the square ***, I'm going to assign a name for our first line, header start. You need to remember you cannot provide pace between two words. And I'm going to turn on rap. Otherwise, you cannot see my lines. You can use high pens, underscore, or any other character. If I start this header, also we need to end this header, and I want to end this header in room number two. I want to use square verses once again. Ist the square verses, I'm going to type header end header, end. If I set this file, here we can see there is no changes. Now I'm going to show you how can we use these names in our value? In our gridro property, I'm going to type header Start, because this is our starting point. For our end point, I'm going to use header end value. If I save this file, here you can see, there is no changes. Our names are worked properly. Let's jump into the menu section. Let's create a starting point for menu. For this, we don't need to use another square basis. Just want to use a space between header end and menu start point. For menu start point, I'm going to use Menu Start. I'm going to use Menu start name. Start, and to end this menu, after 50 pixel, I'm going to use menu end name. Menu end. And I'm going to use these names in our grid properties. Let me show you. So I'm going to copy the menu start name, and I'm going to repress two with this name. For our menu end value, I'm going to use menu n name. If I set this file, here you can see, there is no changes. It's worked very perfectly. Similarly, you can take names for all the rules. This line naming method are very helpful when we work with complex layouts, and now I'm going to name our columns. Here you can see, we have proto three columns. But if you notice, you can see, we use repeat value here, and I use one for value for three columns. How can we assign name for repeat values? There is two methods you can assign name for your columns. Either you type one F three time and every time you use these brackets. Otherwise, we can assign name with this repeat value. Let me show you. Before one F for value, I'm going to use a name, which is call Start. After one F value, I'm going to type call nd. You can type any name as you want. But there is a problem. It's going to use Cal start and called N three times. First, it's going to use call Start here, and then it's going to use called end here. Once again, it's going to use call start here, and then it's going to use call end here and it keep going on. How can we use it properly? For this, first, we need to type cool start. And then we need to assign from where our columns start. Our columns start from one, so type one. For end point, I'm going to use call end, call end. Because I span up to three column, so I'm going to use three hair. You don't need to notice line number here. You need to notice how many columns you want to use. If I set this file, here you can see there is no changes. There is no problem. It's worked perfectly. Now I want to span our header up to two column. I want to use two heir. If I set this file, you can see the result. It use two column value for header item. I want to back to my old position. Some to use three. We can use the same value for our menu columns. Let me show you. Some to copy the value, and I'm going to replace with this one. Because our menu item takes the same amount of column area, that's why we can use this value. If I save this file, you can see there is no changes. In that way, you can assign any name for your lines, and you can use it multiple times. I hope the concept of gridline namings is clear for you. Thanks for watching this video, stay tuned for our next tutorial. 8. CSS Grid Area Naming Tutorial: Good to see you guys once again I'm back with an tutoria re CSS grid. In this Tutoria, we're going to learn CSS grid area name. In our previous tutorial, we learn about grid line name. But in this tutorial, we are going to learn grid area Nam. We use this method to position our grid items. Let's see what type of properties we have that we can use for positioning. Our first property is grid template areas, and our second property is grid area. Let's start the practical and try to understand how it's work. Here you can see in our previous tutorial, we create a basic layout using grid properties, and here we assign names for grid lines. Using these names, we position our item and span our items. Now I'm going to create the same template without using grid row property and grid column property. We don't need to use line names for that. Here you can see, I have another estable file, grid Atmel, and I'm going to use this template. At first, we divide this grid into a three column with one a value, and we already have fib rows for header for menu, for boxes, and for footer. Now I'm going to assign a different name for every grid item. For this, I'm going to use grid area property. Inside this grid area, you can take any name. I'm going to use same name for that, which is header. And we don't need to use inverted codes for that. Similarly, I'm going to use the same property for every grid item. For menu, I'm going to use the same name Menu. For box, I'm going to use box one. For box two, I'm going to use box two. For box three, I'm going to use box three. Similarly, for box four, I'm going to use box four. For side bar, I'm going to use the same name, which is sidebar. For foter, I'm going to use poter. If I save this file, here you can see, everything is disappeared. Because we do not use any positioning, that's why items are gone. In our parent dep, I'm going to use a new property. Let me show you and our property name is great template areas. Great template areas. Inside this grid template areas, I'm going to use double codes. Let me show you one thing. I'm going back to my old file. Here you can see my previous layout. If I press equal and turn on grid lines, here you can see et three column in our structure, and our header section use three column for that. So I'm back to my new layout, and here I'm going to use this header name three times. Let me show you. I'm to copy the name, and I want to paste it here. Header, header, and header. For three column, I use this name for three time. If I say this file, here you can see the result. But if you notice, it leaves a blank pace because it expects six row in our greet structure. Here we just use one row. Once again, if I show you my old layout, here you can see our menu, also use three columns. Inside the double codes, I'm going to use menu name for three time. If I save this file and show you my layout, here you can see the result. Once again, I'm back to my old layout. Here you can see. In our first column, we use box one. In our second column, we use box two, and In our third column, we use side bar. I'm going to rig this line. For our first column, I'm going to use box one name. For our second column, I'm going to use box two name. For our third column, I'm going to use sidebar name. We use this column names for our third row. Once again, I'm going to get this line. Here you can see, our fourth row, start with box three, then come box four, and then come sidebar once again. I'm going to type box three, box four, and then come sidebar. In our last row, here you can see, we use three columns for our footer. I'm going to use this foot name three time. F double TER, footer, footer and footer. And semicolon to in this line. If I sat this file and show you my layout, here you can see, we successfully create our old layout without using grid row and grid column property. This is the second method that we can use to position our grid items. Just we need to use two properties for that. Our first property is grid area and our second property is grid tablet areas. This kind of positioning technique is very useful for small projects. If your layout is not complex, then you can use this process. But if your project is more complex and ag, I don't recommend to use this process. If you notice, here you can see, we use three column names for every row. If I remove one of the columna, any of the row, so I'm going to remove menu. If I set this file, here we can see everything is gone. Because we use three column, that's why we need to pass three column name. If I set this file, once again, here you can see, now it's look perfect. And now, suppose you want to use two column for menu section. In that case, you need to pass dot hair. If I set this file, now it's work. If you want to use menu item only in second column, in that case, just you need to pass another dot before the menu dot menu dot. If I set this file, you can see the result. We can align our grid item and we can position our grid item just using dots. But you cannot use this dot, middle of this two column. Let me show you. If I remove header from this place and use a dot and set this file, it can destroy your layout. Once again, I'm going to repeat this process, how it's work. At first, you need to use a property name grid area for every grid item, and then you need to assign a name. You can use any name for that. Then inside the parent container selector, you need to use a property, which is grid template areas. Then you need to remember how many column you assign to this grid structure. According to my layout, here you can see, I use three column. In every row, we need to pass three u, and here you can see, we span our sidebar row also. That's why I use this sidebar name in row number three and row number four. I hope now you understand what is grit area naming. Thanks for watching these videos and stay tuned for our next tor. 9. CSS Grid MinMax function Tutorial: Hey, good to see you back. Once again, I'm back with a new tutorial related cess grit. In this tutorial, we are going to learn cess grid MinMax function. Using this function, we can dynamically change rose and columns height. Let's start it. In this tutorial, we are going to learn two other values without minmax. First one is Max content, and second one is men content. Let's see how we can change height and weight dynamically. Here, you can see side by side, I open my visto Cortor and my browser using Lp server extension. And I already create a estable document. As you can see inside my parent container, we have eight different grid sales, and we declare four column for our grid cales with one F values. We also have two rows with 175 pixel height. Let's start the practical. Let's start the practical. As you can see in my first grid item, there is a text name first. I'm going to insert more texts inside this grid item. Luram, 20. It's going to add 20 word inside this grid item. If I set this file, here you can see the result. Let me reduce some words, and then I'm going to set this file. Here you can see, it break downs our lines according to of this grid item. But what happened? If I use max content value for our first column, let's use it. I'm going to use max content value for our first column. If I set this file, you can see the result. Here you can see, there is no line break for this paragraph, and also it overflow from the container with size. If we use this value, it's not going to break our lines. It's going to print all the paragraph in one line. It's not a very useful thing for our real projects. I'm going to reduce some world from this paragraph. Then I'm going to save this file. Let's reduce some more words. Now it's look perfect. Now I'm going to add some more text in our fourth content. Lam ten, and I'm going to say this file, and then I'm going to use our next value for this column, which is men contain. If I set this file, here you can see the result. It dynamically change the eighth according to the biggest word of this sentence. Also, I'm going to add more text in this item. Let's add more text. Lam eight. If I set this file, here you can see our text overlap the grid item. To solve this problem, we can add minimum content value in our row. Let me show you. I'm going to remove 170 pixel value, and here I'm going to type Man content value. If I set this file, now you can see it set the great item height, according to the text area. Suppose I want to add 51 paragraph in our seventh item. I'm going to jump into the seventh item, and I'm going to type Lum, 50. If I set this file, here you can see, here you can see, according to the text size, it's change height and weight. It's going to consume minimum height and minimum eight according to this text. That's why this vueme is main content. And now I want to fix the minimum height of our role. So I'm going to remove some or from this text. Then I'm going to set this file. Now I'm going to use minmax function to set a fixed height. Let me show you. I'm going to use Mn Mx function here. MinMax. Inset this parentheses, and here we need to pass the two value. For minimum size of pro and for maximum size of pro. Suppose our minimum row height is 175 pixel. For maximum, I'm going to use men content property. Because I want to change the height according to this content size. If our content take more than 170 pixel height. If I save this file, here you can see by default, our row come with 170 pixel height. But as you can see in our first row, it takes more than 170 pixel height. Be it content size take more than 170 pixels. For our maximum value, we use main content. That's why it can take as much height it want. Min Max function is very useful for our rows. Here we set minimum value for our item height. But if our content take more height, then we can use main content value as maximum value. But what happened? If I set 200 pixel maximum height? Let me show you. If I set this file, hell, you can see, by default our second row take 175 pixel height. But our first row extend up to 200 pixel, and then our content overflow from this item. That's why we refer to use main content as max size. Main content. Now it can hold the all content in our row, and now I'm going to use MinMax function as a column value. Let's use it. For our first column, I'm going to use the MinMax function. And I'm going to set a minimum width of this column, which is 150 pixel. Also, I'm going to take 200 pixel for max width. Here you can see we already set maximum container width, which is 700 pixel, but I'm going to use percentage value in this place, 80%, it's going to make our web page more responsive. If I set this file, here you can see the result. Let's add more content to our first column. Um six. Here you can see, our first column take maximum width of 200 pixel. If I increase the maximum width size, 300 pixel and then set this file, now you can see the changes. By default, it's going to take 150 pixel width, and it can extend up to 300 pixel. After that, it's going to break down our lines, and now I'm going to use 200 pixel for our minimum width. If I turn on my developer option, and I select this content. Here you can see the maximum width of this content is 300 pixel. If I try to make it responsive, and then I select this item, here you can see, the minimum width of this item is 200 pixel. Because we already set a minimum size to this column. Similarly, if we scale our window, let me show you. And then select this item, you can see it cannot extend the with more than 300 pixels. I hope now it's a little clear for you how it's work. If I use percentage value in our maximum size, let me show you. 60%. Then set this file, now you can see a different result. It's going to take 60% width of this container. We can use percentage value, e value, pixel value, et cetera. But if I reduce the browser size, and then it's going to stop at 200 pixel width. We cannot scale down our first column more than 200 pixel. I hope now it's clear how main value and max value are work. Thanks for watching this video and stay tuned for our next tutorial. 10. CSS Grid Implicit & Explicit Grid Tutorial: Good to see you guys, once again, I'm back with a Nutririal, and in this sural, we are going to learn implicit grid and explicit grid. Let's see what is that? Here you can see, side by side, I open my visuo studo coreor and my browser using pSeral extension. As you can see in my parent container, we have total eight grid cells. At first, I'm going to say within height. At first, I'm going to use grid template column value. Greed template columns, and I'm going to create two columns with one e value. For this, I'm going to use repeat value. Repeat. Two column with one e value. If I set this file, you can see the result. Also, I'm going to say row height. For this, I'm going to use great temperate root property. But I'm going to say three rows height from this four row. I'm going to use repeat value once again. Repeat three row 100 pixel value. If I set this file, you can see the result. Also, I'm going to provide gap between these cells. So type, read, gap property. 20 pixel. If I set this file, you can see the result. Here you can see, we just defined two column size and three row size. But we have total eight cell in this structure. We do not style our seventh grid item and eight grid item. Suppose we dynamically extract the data from the server, and I want to show this data in our seventh and eighth column. For this, we need to set height. But we already defined height using grid template rows property. What are these columns? How can we set height to the columns? Let me show you something. If I press p t and show you my developer toolbar and click on this grid icon. Here you can see some grid lines. As you can see, we style o and two columns. We call this structure explicit greed because we explicitly define this area using these two property, and this one that we not defined, and we called it implicit greed. To style this implicit grid, we have some new properties. Let's see it. Here you can see, we have total three property related implicit grid. Our first one is grid autos, O second one is grit auto columns, and our last one is grid auto flows. Let's start the practical and try to understand how it's work. After a grid gap, I'm going to use our new property, which is grid auto ose. Some type, grid auto robes. Here we can define our implicit grid row height. For our implicit item, I'm going to define 50 pixel height. If I set this file, now you can see now the implicit grid item height is 50 pixel. If we add more cell to this container, let me show you some to duplicate this line two time and set this file. Now you can see it automatically set 50 pixel height for these grid items. For now, I'm going to delete thee columns. I don't need it and set this file. Here you can see when we add a new cell, it's going to add row is. But now I want to add new cell column wise. For that, we need to use another value, which is grid auto flow, Soil type, greed, auto flow. It's come with two type of value. Row and column. By default, is work with row. But here I'm going to use column. If I say this file, now you can see the result. Because we already defined three in our explicit grid. Then after three, it's going to add all the sales item column wiles. Harry you can see do not define any column size to this grid item. It's tack eight according to this te size, and now I want to assign it to our implicit grid. For that, we need to use a property, which is grite auto columns. And here I'm going to provide 0.5 f value for our implicit grade. If I set this file, here you can see the result. Our explicit grid column take one f value, and our implicit grid column take f value. If I add some more column to this container, let me show you and then set this file. Now you can see, it's also take 0.5 value according to this grid item. This is our implicit grid and explicit grade. I hope now it's clear for you. Thanks for watching this video, St tuned for our next tutorial. 11. CSS Grid Items Alignment Tutorial: Hello, guys, good to see you back. In this tutorial, we're going to learn CSS grid item alignment. In our previous video, we'll learn about how can we create layouts using CSS grid items, and how we can position these items. But in this tutorial, we're going to learn about horizontal alignment and vertical alignment. We have total six property related CSS grid alignment. Align item, justify item, place item, align self, justify self and place self. Let's start the practical and try to understand how it's work. Here you can see side by side, I open my esos tough codaor and my browser using Lp server extension. I already created STE ML document named index dot STL. Here you can see we have total ten grid items. Our first six grid items are explicit grid item and our last four grid items are implicit grid items. Here you can see our explicit grid item HT is 100 pixel, and our implicit grid item HT is 50 pixel. Now I want to span my fifth grid item, and I want to span it row wise. For that, I'm going to jump into the item fifth selector, and here I'm going to use the Sess property, which is grid row. Here I'm going to span this item up to two row, type, span and then I'm going to pass two. If I set this file, you can see the result. Here you can see our tin grid item, and I want to span this red item column wise. I'm going to jump into the itent ten selector, and here I'm going to use Sess property, which is grid column. I'm going to type grid, column, and I want to span it up to two column. If I set this file, you can see the result. H is span item, wise, and here is span item column wise. Let's start the alignment. First, I'm going to cover vertical align. For that, we need to use Align item and align self property. These properties are came with four values. Let me show you. First one is start, end, center, and stretch. If we use start value, it's going to place our content, start of this container, means in that place. If we use n value, it's going to place our content in that place. If we use center, it's going to place our content center of the grid item, and stretch is our default value. Once again, I'm back to my Visual Studio codator, and now I'm going to jump into the parent container. First, I'm going to use a Sass value, which is align items. So to type Align items. I'm going to use our first value and our first value is center. If I save this file, here you can see it align our content center. And this is our vertical alignment process. If I show you my grid lines, here you can see it clearly. As you can see, this is our grid item, and this is the content inside this grid item. As you can see, it pres our content middle of this item because we use align items center. But what happened to our fifth item? According to this line, it align our content, end of this grid item, but it is not. Because we span our fifth grade item. That's why it use two items. According to item, it center the content. Also, you can see the same alignment for our implicit grid items. Now I'm going to use end value, some type, en D. If I st this file, now you can see the alignment. H you can see it align our content, end of this item. Similarly, if we use start value, let me show you. And then set this file, you can see the alignment. Here you can see it aligner content, start of this item. Our last align item value is stretch. Let me show you. If I use this value and set this file, it's a default alignment positioning. It's not very important one. It's a default value. For now, I'm going to use center value. Now I'm going to talk about Align self. What is align self? Here you can see all the item content are Align center. Now I decide to align our third grade item differently. I want to say I want to use align end value for this third item. I'm going to jump into the third item selector. For this kind of alignment, we need to use align self property. Some type, align self, and here I'm going to use end value. If I set this file, you can see the result. If I turn on my grid lines, here you can see, all the contents are aligned in center, but our third grid item align at end. We can use this property only in individual sale, not for the whole container. Now it's clear for you. If we want to apply alignment all these items for that, we need to use Aligned item property. If we want to apply in individual items for that, we need to use aligned sale property. Now I'm going to talk about horizontal alignment. For horizontal alignment, we need to use two property, ify item and justify self. It's similar to our previous one. We need to use same value for that. Start end center and stretch. Let's start the practical. Once again, I'm backed by iso studio correator. I'm going to jump into the parent container. Now I want to align our content horizontally center. For that, we need to use a property, which is justify item. And our value is center. If I set this file, here you can see the result. If I turn on my grid lines, you can see it clearly. It horizontally centered our content. Similarly, if I use different value, and then set this file, now you can see the result. Now you can see the content end of this grid item. Similarly, we have another value, which is start. If I set this file, you know the result. It horizontally align our content, start of this bt item. If you want to move your content, left side, then you need to use start. If you want to move your content, right side, then you need to use end. As you know, stress is our default value, so I don't going to explain it here. Now I'm going to talk about justified self property. Suppose you horizontally centered your first item. For that, we need to use justified self property. Let me show you. Here I'm going to use justified self property. I'm going to use center value. If I save this file, you can see the result. If I turn on my grid lines, you can see it clearly. If you need to align your content individually, you can use justified sale property. Similarly, you have total three value for that. Center, start and end. Now I want to talk about two new properties. Place item and place sale. Place item is a short end up, align item and justified item. If you want to use this value in one line, then you can use it. In this property, first unit to pus, align item value and then need to puss justify item value, and between them, you need to provide a space. Similarly, we have place sell property. This is for individual grid items. First unit to pus, Align sell value, and then unit to pus justify se value. Let's see practical how it's work. Once second, Ivaci vos to the creator. For now, I'm going to comment out this two line. First, I'm going to use place item property. So I'm to tie place items. As you know, first we need to pass, aligned item value and then you need to pz justify items value. Our first value is center. And our second low is star. Now I'm going to set this file. If I set this file, here you can see the same result. There is no changes. You can use this value this way or that way. It's totally on you. Next, let's see how place cell value is work. As you know, it's work individually. In our item two, I'm going to use this property. Place self. First, we need to plus Align cell value and then you need to plus justified cell value. I want to provide center, and I justified cell value is also center. If I set this file, you can see the result. It's center or content horizontally and vertically. So I hope now it's clear for you how place self and place items are work. Thanks for watching this video, stay tuned for our next Tutorial. 12. CSS Grid Tracks Alignment Tutorial: Hello, guys, good to see you back. In this tutorial, we're going to learn about CS's grid track alignment. To alignments our track, we have total three property. Align content, justify content, and place content, and Place content property is a shortened version of Align content and justified content property. Let's try to understand what is grid item track. Here you can see, side by side, I open my dos to your coortor and my browser using Lip Server extension, and I already create a StL document named index dot STML. Here I'm going to use the same grid structure which I use in my previous tutorial. Here you can see put ten grid items. As you can see, we span our fifth grid item rows, and we also span our ten grid item Column. At first, I'm going to reduce the column wed. Let me show you. I'm going to reduce one e value and I'm going to type 150 pixel. If I set this file, you can see the alignment, and also I'm going to increase the container height. So I'm going to use height property. Hight 750 pixel. If I set this file, you can see this space. Now I'm going to show you how can we use align content and justify content. But first, we need to understand what is justified content. We use justified content for horizontal alignment, and we have total seven value related, justified content, start, end, center, stretch, space around, space between, and space evenly. Our last three value we use for content property. Let me show you how it's wore. Once again, I'm back to my Visual Studio code editor. At first, I'm going to turn on my grid lines, so I'm going to praise EP til, and then I click grids, and how you can see the grid lines. Now I'm going to use the justify content value. At first, I'm going to use center value. If I set this file, you can see the result. Here you can see all the grid items together, move to the center of this container. Using justified item property. We can center our content inside these items. Using justified content property, we can align our grid items inside the container. Using justified content, we can move the whole track. Similarly, we have another value, which is end. If I set this file, you can see the result. Horizontally, it move our grid items, end of this container, and start is a default veu. Let me show you. If I set this file, you can see the result. Now I'm going to talk about our three new values. Our first value is space between. So I'm going to type space between here. If I set this file, you can see the result. If we use space between value, then you're going to provide the remaining space between our grid items. As you can see, it split our grid items n to n. But if you have three column, let me show you so to pass three here. And then set this file, here you can see the result. As you can see, it put our second column center, and it split our blank space two P. For now, I'm going to use two column. Our next value is space around. Let me show you. If I set this file, here you can see the result. If we use this value, as you can see, first, it provide a space, then our grid item, and then you can see the similar size of space two time. Then once again, our column and a blind space. You can see the equal space left and right. Also you can see the same amount of space after first column. Similarly, you can see this space before the second column. You can see the more space in center, and our next value is space evenly. So to type space evenly. If I set this file, here you can see it's pretty similar to space around value. But there is a basic difference. The main difference is, you can see the same amount of space between our great items. If this space size is one a, you can see the same amount of space before and after the column. This is our justified content property. We basically use it for horizontal alignment, and this property work with grid tricks. Let's talk about align content value. We use align content property for vertical alignment. As you can see, there are total seven value for this property, start, end, center, stretch, space around, space between and space evenly. We already know about this four value. But in this tterial, we're going to learn space around space between and space evenly. Let's back to the practical. Here you can see our grid container height is 750 pixel. I'm going to type this property name, which is align content, our first value is center. If I set this file, here you can see the result. If I turn up my developer mode, now you can see it clearly. As you can see, it vertically centered our content. Similarly, if I use end value and then set the file, now you can see it put our grid structure end of this content. As you know, start is our default value. But now I'm going to use a value name space between. So type, space between. If I set this file, here you can see the result. Here you can see it put our first grade item and our last grade item end to end. Here you can see the spaces between all the grade items. This is the use case of space between value. Let's jump into the next value, which is space around. So type, space around. If I set this file, now you can see the result. This value, going to provide the space, top of the content and bottom of the content. Suppose it provide ten pixel pas top of this grid item, and it's also going to provide ten pixel pase bottom of this item, and then come id gap area. Once again, top of this third item, it provide ten pixel pase. In that way, it's work. Our last value is space even. So to tie pace evenly. If I set this file, here you can see it provide same amount of space, top and bottom of this item. This is the use case of these values. Let me show you one thing. Here you can see, we span our column 102 time. I'm going to remove the grid column property from item ten. And now I'm going to span the item seven. So to paste it here. If I save this file, here you can see a gap. Here you can see unfilled space. If you are working with complex grid structure, sometime the kind of problems are ok. If you want to solve this kind of problem, we have another property, which is grid auto flow. Let me show you. So type, grid auto flow. As you know, we have put on two type of flow, row is and column wise. I'm going to use row is. If I set this file, here you can see there is no changes. But if I use another value with this, let me show you. I'm going to use a new value, which is dens. If I set this file, here you can see, it put our eight grid item in the blank space. If we use this value, then it's not going to unfill the blank space. I hope now it's clear for you, what is grid tracking. Please stay tuned for our next tutorial. Thanks for watching this video. 13. CSS Grid Auto Fill & Auto Fit Tutorial: Hello, guy is good to see you back. In this uteral, we are going to learn auto field and autofit property. Using these properties, we can control grid width. Let's start the practical and see how it's work. Here you can see, side by side, I open my isos to a cod or and my browser using psaver extension, and I already created estel document. Here you can see a container, and inside the container, we have total four grid items. As you can see our container with is 700 pixel, and we use dis the grit property. And now I'm going to say within height to these items. For now, I want to use two column with one f value. I'm going to use grit template column property, and I'm going to use repeat value. Repeat two with one F value. If I set this file, you can see the result. Also, I'm going to provide height to our row. I'm going to use grid template column row property. Once again, I'm going to use repeat value. Two rows with 150 pixel height. If I set this file, you can see the result. Suppose I don't want to use fraction value. I'm going to type 100 pixel. If I set this file, now you can see the result. Now our column is 100 pixel. With that, I want to show three column in our room. If I set this file, you can see the result, and now I want to adjust our fourth gig item in this place. For this, we need to use two values, autofill and auto fill. Let me show you. In this place, I'm going to type auto fill. If I set this file, you can see the result. It automatically set our fourth gig item up to the third gig item. Similarly, if I use the auto ft value, let me show you accept this file. He you can see, there is no changes, but there is a basic difference. If I use autofit value, it's going to create extra track. Let me show you. So type auto fill once again. If I turn on my developer toolbar and click on this grid icon. Here you can see, there is a space for three grid items because our container v is 700 pixel, and we set our grid item with 100 pixel. That's why we have a space for three grid items. But if I use auto fit value, let me show you and then set this file, and then turn on my grid lines. Here you can see it do not create extra track lines. It create the track according to the grid items. Suppose I want to shift our fourth column end of this container. I'm going to use grid Column end value. Greed, column n, and I'm going to st position minus one. If I set this file, here we can see there is no changes. Because auto feet property doesn't create extra trach. But if I use autofill property, let me show you and then set this file. Now you can see the result. If I run on the grid lines, now you can see it clearly. Because autofill property create extra column, that's why we can move our fourth grade item end of this container. This is the main difference between auto field and auto feet value, and now I'm going to use Min max function for our column. I'm going to remove this one and set this file. First, I'm going to tie auto feet and then I'm going to use minmax function. I want to set minimum container width is 150 pixel and maximum up to one e value. If I set this file, you can see the result. But what happened? If I reduce the container width so type, 70% container width. If I set this file, here you can see, you can see our fourth grade item shrink down. If I show you my computer section, Here you can see, now our container width is 546 pixel, and we set our minimum item width 150 pixel. If we multiply 150 pixel with four, it's going to return 600 pixels. As you already know, our container width below then 600 pixel, that's why it shrink down our fourth grade item. If I increase the container width, let me show you. Now you can see, it set our fourth grade item in our first row. If I show you my container width, here you can see it's above 600 pixel. That's why it fit into this row. And similarly, if I show you my grid item width, here you can see, our grid item width is 167 pixel, we cannot reduce our grid item width below then 150 pixel. If we try to reduce our grid item width forcefully, let me show you, here you can see, it shrink our grid item in the second row. If we try to reduce more, here you can see, is also shrink our third grid item in the second row because we cannot reduce the grid item width below the 150 pixel. Without using media query, just using auto fit value, We perfectly create our container responsive. Similarly, if I increase the browser width, here you can see all the grid item in a single row. If you notice you can see, it also increase the item width. Now the item width is 245 pixels. If you want to show all the grid item in a single row, then you should have 600 pixel minimum container width. If I reduce browser width too much, and increase the container width percent is, something 85% is, and also I'm going to increase the minimum width, so I'm going to increase it up to 300 pixel. If I set this file, now you can see total four row. Now it's look like total responsive. As you can see, we set height for two rows, 150 pixel height. I hope now the concept is clear for O, what is auto field value and auto fit value. Thanks for watching this video, stay tuned for our next tutorial. 14. CSS Grid Fit Content Tutorial: Hello, guys, go to see you back. In this tutorial, we are going to learn a new property related Sess grid, which is Fit Content. Let's see how we can use it practically. Here you can see, side by side, I open my isoto Codaor and my browser using Lip Sever extension, and I already create a STML document named index dot STML. Here you can see inside the parent container, we total six grid items. Basically, fit content property working like Max W property. Let's use this property. So I'm going to remove the previous one. I'm going to tie Suppose I want to show two columns using fit content. So I'm to type fit content, and inside the parentheses, and I'm going to say 200 pixel maximum width for our first column. Similarly, for our second column, I'm going to use fit content property. For our second column, I'm going to use 400 pixel maxw. If I save this file, here you can see the result. Here you can see for first column, we take 200 pixel width. For second column, we take 400 pixel width. But if you notice, you can see our item e is according to content size. Let's take another column with one F value. Some type one F. If I set this file, you can see the result. If we set fit content value, we cannot extend our column, more than 200 pixel. Similarly, we cannot extend our second column, more than 400 pixel. Let's add some content in our first item. Inside the first item, I'm going to type um, 30. If I set this file, here you can see the result. If I turn on my grid lines and show you my sale width, here you can see our first grid item extend up to 200 pixel. If we use fit content property, we cannot extend with more than 200 pixel. Similarly, if I add more content in our second grid item, let me show you and then set the file, here you can see the result. If I show you my cell size, here you can see it extend up to 400 pixel, not more than 400 pixel. Be we sit maximum width of this grite cell using fit content property. For our third column, we use fraction value. It can change its size according to the content. Basically, this technique is very useful for image gallery. Also, you can notice we cannot see the whole content in this item. For this, we can use minmax function in our roles. Let me show you. So to remove this one, and I'm going to say, Min Max. Instead the parentheses, here we can set minimum height for our grid item. I want to set 200 pixel minimum height. Then if you want to extend the grid cell height according to the content. For that, you can use main content function. Let me show you I N content. If I set this file, here you can see the result. Now it's look perfect. We learned about main content property in our previous tutorials. I hope now you understand what is the use case of fit content property. Thanks for watching this video, stay tuned for our next tutorial. 15. CSS Grid Order Property Tutorial: Hello, guys, good to see you back. In this tutorial, we're going to learn a new griditem positioning property, which is water property. L et's see how we can use this property. As you can see, side by side, I open my video sto Cortor and my browser using Lp Server extension, and I already create estimL document named index dot estim. Here you can see inside my parent container, we have total six grid item. Using water property, we can change grid cell position. Suppose you want to move first grid cell in sixth position. For this, you can use water property. In our previous tterials, we learn about positioning. But in this tterial, we are going to position our cells using water property. Suppose I want to move the item one in six position. For this, I'm going to jump into the item or selector, and I'm going to use water property. Water. Here I'm going to pass one value. If I set this file, here you can see it automatically move our content in the ust position. Watering start from opposite direction. That's why it's come to the dust place. Similarly, if I use zero value and then set the file, here you can see, there is no changes in water. Zero is the default value of this propriety. But if I pass water two and then set the file, here you can see, it's also come to the first place because there is no water one. Suppose now I want to move our second item in first water. For that, I'm going to jump into the item to selector, and I'm going to type water propriety. Water one. If I set this file, here you can see the result. Now, this is our water one position. Now, suppose I want to move the fourth item in third position. Let's jump into the fourth selector, and I'm going to type water three. If I set this file, now you can see the result. This is our water one position, and this is our water two position, and this is our order three position. First, we, water our item one in second position. Let's come to the second position, and then we water our item two in first position. Let's come to the first position. Then we water our fourth item in third position, and you can see the result. It's come to the third position. As you can see, we do not work with third item, fifth item, and sixth item. It has came forward. Suppose now you want to move the third item behind the fourth item. I'm going to use water property once again. Water, and I'm going to pass four value. If I set this file, you can see the result. Now you can see our third item came to the sixth position because we use four value, so our first water position is this one, and this is our second water position, and this is our third water position, and this is our fourth water position. Now it's square for you, how it's work. Thanks for watching this video, stay tuned for our next tutorial. 16. Nested Grids Tutorial: Hello, guys, good to see you back. In this tutorial, we're going to learn about nested grits. Let's try to understand what is nested grid. Here you can see a grid container, and inside this grid container, we have total six grid cells. Now you decide to add more grid cells inside this grid cell. Then you need to convert this grid cell into a grid container, and then you can add more grid cell inside this container, something like that. We call this whole system nested grids. Using nested g rid, we can convert a parent grid cell into a grid container. Let's start the practical and see how we can create it. As you can see, side by side, I open my visual sto codaor and my browser using Lp server extension, and I already create a estL document, named index dot STML. As you can see in my parent container, I have four grid cell, and now I want to add more grid cell inside the fourth grid cell. For this, we need to use display grid property for item four. Inside the item fourth selector, I'm going to use display property. Display grid. Now it convert our cell into a grid container. Now we can add more grid cell inside this container. Let me show you. I'm going to remove this text and inside this d, I'm going to create four more d d dot sub sub one, and I'm going to duplicate this line three times. Also I'm going to number in their class name. Sub two, Sub three and sub four. Inside this grid cales, I'm going to type A, B, C, and capital D. If I set this file, you can see the result. As you can see, we create four grid cells inside the fourth container. Now I'm going to assign to our sales. For these, I'm going to use grid template column property. Greed template columns, and I want to assign two column with one F value, one if R, one F. If I set this file, you can see the result. Let's set a background color to this deep. Otherwise, it's not going to be visible. I'm going to select item four, inside the item four, I'm going to select all the deeps. Then inside the css background. Rad. If I save this file, you can see the result. As you can see, there is no gap between these cells, so I'm going to use grid gap property. Read gap, ten pixel. If I save this file, now you can see the cells clearly. As you can see inside a parent grid container, we have to tel four cell, and then we convert our fourth grid cell into a grid container. Inside this container, we also have four grid cells. We call this process nested grid. Using this inside a grid item, we can insert more grid items. Also you can insert more grid items inside this sub grid items. Suppose you want to insert four more grid items inside this cell A. Then once again, you need to follow this similar procedure. First, you need to use display property grid for this sale, and then you can add more grid item inside this cell. If I show you my developer toolbar, here you can see inside this grid, we have another grid structure, and you can see the grid lines of this grid structure. If I show you my layout section, here you can see in grid overlays, we have total two grid system. Our main container grid system and next our overlay grid item system, and you can turn off and turn on your grid lines according to your choice. Thanks for watching this video. I hope nos clear for you what is nested grid. Stay tuned for our next tutorial. 17. Overlapping Grid Items Tutorial: Good to see you back guys, this is our last tutorial related Sess grid. In this tutorial, we're going to learn what is overlapping grid items. Moving forward and let's try to understand what is that? Here, you can see a grid container. Inside this grid container, we have total three grid item. As you can see, items are overlapping each other, and we called it overlapping grid items, and now you want to green one came first, something like that. Let's see how we can create the overlapping grid items. With that, we are going to learn how we can change the stack water of the grid items. Stack arder mean z index. Let's study the practical and try to understand how it's work. Here you can see side by side, I open my result studio codeor and my browser using Life sero extension, and I already create a estimL document named index dot estemL. As you can see, I already create a grid structure, and there are three grid items in this grid structure. As you can see, our container is 400 pixel, and our column is 200 pixel, and also our row T is 200 pixel. Let's try to overlap the grid items. At first, I want to span our red grid item. I want to span it up to two column. For this, I'm going to use grid column property. One, from column one, two, span two. If I set this file, you can see the result. We span our item two column. Also, I'm going to span this item row wise with two column. Let me show you. I'm going to use grade row property, grade row. From row one, span two, row two. If I set this file, you can see the result. Now our first item span up to two column and two room, and our second item and third item is our implicit grid items. Now I'm going to assign a maximum width, all of these grid items. As you know, we use this item plus all of these grid items. I'm going to use max width property. So to type Mx with, 200 pixel. If I set this file, you can see the result. Now I'm going to align our first cell vertically. Some to type, align see star. If I set this file, you can see the result. If I show you my grid lines, you can see it take full area. Because we use align self property, that's why it look like smaller. If I comment out this property and set this file, you can see the result. But to create overlapping grid items who need it. I'm going to undo the comment and set this file, and now I want to move our second item center of this page. For this, I'm going to use same properties for item two. If I place the code, and set the file, here you can see, it overlap our first grade item. But I want to place it meddle. I'm going to use Align self property, Align self center. If I set this file, you can see the result. We vertically align our item center of this container. Now I'm going to horizontally center this grid item. For this, I'm going to use and justify self property, ify self center. If I set this file, you can see the result. For our third grade item, I'm going to use sem property. But I want to align our end of this container. I'm going to use align self end. And also justify self n. If I set this file, you can see the result. I don't need this orange background color, so I'm going to remove it. Now all the greet items are take same amount of area. We just align the items, start, center, and end. But the column size and position is same. Now I'm going to add some text in all the items. In item one, I'm going to tie Lam 15. It's going to add 15 word character. It can add 15 word paragraph in our item, and I'm going to copy the paragraph, and I'm going to paste it in our second item. Also in our third item. If I set this file, you can see the result. Hey, we need to add more character to overload this item. I'm going to paste this character once again. If I set this file, now you can see it's overlap each other. Now I'm going to show you how can we change the stack water of this item? To change stack water, we need to use our old property, which is Z index. Now I want to bring the first item to the forefront. For this, I'm going to use Z index property. I want to tie Z index one. If I set this file, you can see the result. You can see it came on top, and now I want to bring the orange item top of the. For this, we need to use Z index two value. I'm going to tie Z index two. If I set this file, you can see the result. Now it's clear for you how we can control the overlap areas. Now, let's see if I remove all the alignment of this container. And then set the file, you can see the result. Now all the grid items are still exist in the same place. And now I want to show our green grid item for these, we need to use Z index value once again. Z index three. If I set this file, you can see the result. I hope now it's clear doubt about overlapping. Thanks for watching this video, stay tuned for our next todo. 18. What is Flexbox: Hello guys, good to see you back. This is the introduction video of CSX Flexbox. Let's try to understand what is Flexbox. Basically, Flexbox is a new module in CSS three. It's make alignment very easier in different direction and different water. It gives container the ability to expand and shrink elements to best use all the available space. This is the best way to use all the available space. Our next point is CSS Flexbox layout replace float layout. Similar to the grid layout, it also can replace float layout. It made our job very easier. Using Textbox, you can create one dimensional layout very easily. CSS grad is not one dimensional, it is two dimensional, but Css flexbox is one dimensional. You cannot handle row height and column width together. At a time, you can handle only one dimension. Row, otherwise, column. Suppose this is our main container. Inside this parent container, we have four sub deeps. We call the container flex container, and if you want to create it flexbox, then you need to use display property. Display flex. In our parent container, we need to use this property, and then it convert into a flex container. All the items inside the flex container, now they are flex items. As I told you earlier, flexbox work in one dimensional way. Rows otherwise column wise. If we talk about rows means horizontal way. For that, we call the axis main axis. Otherwise, you can call it row. If I talk about vertical dimension, then we call it cross axis. Otherwise, you can call it columns. Let's see a little demonstration, how we can use a flex box. Here you can see, side by side, I open my iso so coreor and my browser using Live Sever extension, and I already create a estimL document, named index dot estel As you can see, there is a parent deep, which classes container. Inside this parent container, we have total four items. As you can see, we use different classes for all of this. Item one, item two, item three, and item four. I already set a background color to all the subdeps. As you can see, our parent container is 600. Also I set a background color, margin, and border to this parent container. Now, if I want to make it flex container for these, we need to use display property. Display, and I'm going to use flex value. As you can see, we have total four row in our parent container. If I set this file, as you can see, it automatically save all the items in one row. Now it's a little clear for you. When we convert our parent container in a flex box, whatever item in our container, it's come in one row. In our upcoming tutorial, we're going to learn some new properties. Let's see the properties. A total 12 property that you can use with flex box. Flex direction, flex wrap, flex flow, flex grow, flex shrink, flex basics, flex, justify content, align content, Align item, Align self, Atlast water. For alignment, we use this property, and we already learn about it in our grid chapter. In our upcoming video, I'm going to cover all the properties. Thanks for watching this video, stay tuned for our next Tutorial. 19. CSS Flexbox Flex Direction Tutorial: Good to see you back guys. In this trial, we're going to learn what is flex direction property. Let's see the values of this property. As you can see, we have Trotal four values related CSS flex direction, row row revers, column, and column reverse. And row is our dif value in this property. Let's start the practical and see how it's work. Here you can see side by side, I open my visuo so Corator and my browser using Life Sever extension, and I already create a estim document, named index dot estimL. As you can see in my document, there is a container. Inside this container, we have total four flex item. As you can see, we already convert our container flex box. You already know that if we use the flex property, then it put our items in a single row. In this tutorial, we are going to talk about flex direction property. This property is related to container, not the items. I'm going to use it up to display property, and I'm going to type flex direction. Our first value is row. If I set this file, here you can see there is no changes. As I told you, row is the default value. If you use it, it's not going to effect on your structure. By default, row follow the lap to right direction. But if I use row reverse value, let me show you and then set the file, now you can see the result. Here you can see it's reverse the order of our item. Now the direction is right to lap. This is the use case of row reverse value, and our next value is column. Let me show you. I'm going to type column. This value works vertically. If I save this file, you can see the result. Basically it follow top to bottom water. As you can see, first, second, third four. If you want to arrange it bottom to top, then you need to use another value, which is column reverse. If I save this file, you can see the result. Here, you can see our first item came to the bottom, then come second and then third, and our last item came to the top position. It's basically change the direction from bottom to top. If I use only column value, then the direction will be top to bottom. This is the flex direction property. As I told you earlier, it's work on one dimensional way. At a time, it's work with row wise, otherwise, column wise, and you cannot handle row and column together. I hope now the flex direction property is clear for you. Thanks for watching this video, stay tuned for our next tutorial. 20. CSS Flex Wrap & Flex Flow Tutorial: Good to see you back guys again I back with a tutorial related flexbox. In this tutorial, we're going to learn what is Flex AP and flex flow. These two new properties are very important in our flexbox. Without further discussion, let's start the practical. As you can see, side by side, I open my viso studio correor and my browser using Live Server extension, and I already create estemL document named Index dot estemL. Harry you can see in our container, we have total four flex item and our container size is bigger than flex items. If I increase the flex item in this box, otherwise, if I reduce the container width, in that case, items are overflown to this container. Let me show you. I already create six other flex item, and I'm going to uncomment this deep tags, I'm going to say this file. Now you can see we have total ten flex item in our container. Now I'm going to reduce the container width. Using width property. So I'm going to type w 400 pixel. If I set this file, here you can see the result. Here you can see flex items are overflown to this container. Similarly, if I use height property and increase the height 200 pixels, and set this file, you can see this result. But if I change the flex direction, let me show you flex direction. Column and then set the file. Now you can see, once again, flex items are overflown to this container. To solve this problem, we have another flexed property, which is Flex RAP. Basically, Flex AP has three value. No ap Rap and p reverse. No EP is our default value. If you use or not, it's going to overflow you data. Let's see how it's work. For this, I'm going to use flex direction row, and also, I'm going to set a width of this container, W 400 pixel. If I set this file, you can see the result. And now I'm going to use Flex rap property. Flex rap. At first, I'm going to use no value. If I set this file, here you can see there is no changes because this is the default value of this property. So it's not going to affect the flex items. If you want to wrap it, you need to use p value. Let me show you. If I set this file, now you can see the result. Now you can see our container with this steel 400 pixel, but it perfectly wrap our flex item inside this container. As you can see, it automatically come to the next line. Let's have some margin between this flex item. I'm going to type margin five pixel. If I set this file, you can see the result. Now it's clear for you when data overflow from the first line, then it's automatically came to the next line. Then needs automatically come to the next line. But if I change the flex direction, column, and also I want to use height property. Height, 200 pixel. I'm going to comment out the width property. If I set this file, now you can see the result. And you can see it's set in vertically water, first, second, third, fourth, fifth, six, seven, eight, 19th. I hope now it's clear for you how items are set in vertically water. Now I'm going to use the next value of this property, which is ap reverse. I'm going to tie ap reverse. If I set this file, now you can see, it is just reverse the wader items, and now it start from the right side and end it p side. If I change the flex direction, row wise, and st, which of this container, and commend out height and set this file. As you can see, our items start from the second line of this container. First, second, third, fourth, fifth, six, seven, eight, 910. Basically, we use rap property to control overflow theta. I hope you got the point. Our next property is flex flow. What is flex flow? It is a shortened property of flex rap and flex direction. Using one property, you can control the both the properties, and we can use it in one line. I'm going to use flex flow property. Flax flow. Here, first, we need to provide flex direction value, and then we need to provide flex p value. First, our flex direction value is column, and our flex p value is Ra. And I'm going to comment out this two property, and I also need to comment out with property because we use column value. I'm going to uncomment the height property. If I set this file, here you can see is work perfectly. If I use not value here, And set this file. Now you can see our flex items are overflown to this container. Basically, flex flow is one liner of the two property, flex direction and flex ap. I hope now the concepts are clear for you. What is Flex ap and Flex flow. Thanks for watching this video, stay tuned for our next tutorial. 21. CSS Flexbox Justify Content Tutorial: Hey, again, I'm back with a new Tutorial related flex box, and in this two we're going to learn justify center property. Let's back to the conguo stre. Basically, we use justify content property for horizontal alignment. This property, como total six value. Let me show you. Our first value is Flex start. It is also a default value. Then come Flex N, center, space, space between, space evenly. It is very similar to our grid property, justify content, and we already learned about it in our grid section. Let's start the practical and see how it's work. As you can see, side by side, I open my so studio cooror and my browser using Lp sever extension. Inside the parent container, we have prod four flex item, and now I'm going to align it using justified content property. Sound type, justify content, At first, I'm going to use center value. If I set this file, you can see the result. As you can see, it move all the flex item center of this container. Next, I'm going to use flex end value. Flex end. If I set this file, as you can see, it shave all the flex item right corner of this container, and Flextir is a defilt value of this property. If I use this property, let me show you and set this file. As you can see, it's a default value. If I use any flex value or not, it's going to return this result. Our next value is space between. So tie, space between. If I set this file, as you can see, it move our first item and last item end to end of this container. If I remove the margin, now it's more clear for you. Also I'm going to remove the padding one. Now you can see the result, and it's going to add all the space between these items. It equally divided this space between fix items. Or next value is space around. Let me show you. If I set this file, now you can see, it provide equal space first and last of this item. And between these items, it provide double space. As you can see, it provide equal space before the first item and after the first item. Similarly, it provide equal space before the second item and after the second item. That's why the gap between items are develop this first gap, and our last ve is space evenly. If I use this, set this file, as you can see, it provides similar amount of gap between flex items. I hope now it's clear for you how we can horizontally align our flex items. Thanks for watching this video, stay tuned for our next Tutorial. 22. CSS Flexbox Align Items Tutorial: Lo eyes, good to see you back. Once again, I'm come with a new turiial, related CSS Flexbox. In this tterial, we're going to learn Align item property. We use Align item property for vertical alignment. We have total five value related align items property. Flextrt, flex end, center, stress, and baseline. If we use flextat value, and then it's going to put my flex item top of this container. If we use flex n value, then it's going to put my flex item bottom of this container. If you want to align it center vertically, in that case, you can use center value, and stretch is our default value. But baseline value is different one. Let's start the practical C, how it's form. As you can see, side by side, I open my visual studio cortor and my browser using ipse extension. As you can see, you already create a continent and inside this continer, we have Protal four flex items. As you can see, we use display flex property. Using this property, we can convert our container as a flex container. I'm going to use this property, which is align item, Align items. Our first value is stretch. If I set this file, here you can see, there is no changes because it's a default value. We are work with vertical alignment, so we need to increase the container height height, 500 pixel. If I set this file, you can see the result. By default, Align item use stretch value. Now I'm going to use the first value, which is flex start. If I set this file, as you can see, now the vertical alignment of this item is top of the container. Similarly, if I use flex end value, and set this file, as you can see, all the items are align in bottom of this container. If you want to align this item, center of this container, you can use center value. Align item center, you can see the result. It align all the flex center of this container. Let's add little height in our third item. I'm going to use height property in our third item. Height, 50 pixel. If I set this file, As you can see, now our third item height is 50 pixel, and now I'm going to talk about baseline concept. If I use flex end value, flex end, and set this file, as you can see, as you can see, items are end at baseline. But if I use start value, and set this file, now the baseline end in top. Now I'm going to talk about our last value, which is baseline. But at first, I'm going to increase the third item font size. Font size. I want to use font size property. Font size, 34 pixel. Now also I'm going to reduce second item font size. I'm going to use font size value once again, and I'm going to use ten fixel for that. If I set this file, you can see the result. Now you can see the text baseline alignment is different. Now I want to align this text in the same baseline. For that, we need to use baseline property. Let me show you. Align items, I'm going to use baseline value. Baseline. If I set this file, you can see the result. Now, all the text come in same baseline. If you want to use horizontal alignment, yes, you can use that. Just you need to use justify content property. Let's use it. Justify content center. If I set this file, you can see the result. Also, you can change flex direction. As you know, by default, our flex direction is wrong. Let's change the flex direction. Flex direction. I'm going to use column value. If I set this file, as you can see, now our lenitd property work in horizontally, not the vertically. If I use flex N property, and set this file, as you can see, it's aligned horizontally. Because we change x axis direction and y axis direction using flex direction property. Now let's follow the opposite cross axis. This is it for this tutorial. I hope now the concept is clear for you, what is align item property. Thanks for watching this video, state tune for our next tutorial. 23. CSS Flexbox Align Content Tutorial: Hello eyes put to CO back. In this tarial, we are going to learn Css Align content property. In our previous tutorial, we'll learn about Aline item property. This property also used for vertical alignment. As you can see, we have a lot of different value related Alan content property. Flex start, flex N, center, stretch, baseline, space around, space between, and space evenly. In our previous tutorial, we'll learn about align items. Both the properties are used for same purpose, but there is a different between two this property. Align item used for single row alignment, but align content used for multiple row alignment. Suppose your content not covered in a single role. I wrapped and come to the next role. Then we need to use allied content property. Let's start the practical and see how it's work. As you can see, side by side, I open my visas to the Coretor and my browser using Light sever extension. As you can see, I already created estemL document named index dot eTML. Here you can see in my parent container, we have total ten flex items. At first, I'm going to assign to this container. After height, I'm going to type V equal to 450 pixel. As you can see, our data is overflown to this container. In this case, we need to use flex wrap property, someone to type flex rap. And I'm going to use rap value. If I set this file, you can see the result. In our previous tterials, we'll learn about flex rap property. Now you can see over fluence items are came to the next and as you can see, our items are already stretched. Let's use our property align content. Somehow type Align contain. Our first value is stretch. If I set this file, as you can see, there is no changes because stretch is our default value. But if I use flexed value, and set this file. Now you can see it's move vertically top. Similarly, if I use flex and value and set this file. Now items are move vertically. Similarly, if I use center value, then set the file. Now all the items are center of this container. Our next property is space between. So tie space between. If I set this file, you can see the result. This value going to fill all the space between two rows. If I use space around value, let me show you and then set this file. Here you can see, whatever space we have top of the row, it's going to double it between this row, and then come same amount of space bottom of the last row. Then come our next value, which is space evenly, some type, space evenly. If I set this file, now you can see, it add same amount of space between rows. This property only work when we have multiple rows. If I remove some flex item from this container, let me show you and then set this file. Here you can see, all the items are more vertial center. Now this property not going to work properly. If I use different value, something space between, and then set this file, here you can see, is not work. This property exactly work when we have multiple rows. Otherwise, it's not going to work. If we have single row, in that case, we need to use Allen item property. I hope now it's clear for you what is Alan gon Den property. Thanks for watching this video, stay tuned for our next tutorial. 24. CSS Flexbox Align Self Tutorial: Hello guys tsu back. In this tutorial, we are going to learn CSS ex box, Align sale property. This property also used for vertical alignment, similar to align item property. As you can see, for this property, we have some similar values. Just we have one new value for this property, which is auto. Then come Flex start, flex end, center, stretch, and baseline. Now the question is, what is the difference between align item property and Allen sale property? Allie sale property basically used for individual items. Suppose you want to vertical align individual flex item. In that case, you need to use this property. As you can see in this image, remaining one flex item, all the flexed items that came to the top of the container. Because for this particular cell, we use align cell property. Because of this, we have been able to differentiate. Let's start the practical and see how it's worked. Here you can see, side by side, I open my visto correor and my browser using LpSever extension. I'm going to use my previous esemal file for this example. As you can see in our flex container, we have total five flex items. As you can see, by default items are stretched. First, I want to align all the items top of the container. I'm going to use align item property. Align item flex start. If I set this file, you can see the result. Now I'm going to use Align cell property because now I want to align one individual cell. Suppose I want to move number three cell end of this container. Then we need to jump into the item three selector, and we need to use this property Align cell. And I'm going to use flex end value, flex end. If I set this file, you can see the result. We successfully move a individual cell end of this container. Remember, this property is used for vertical alignment. Let's move number two cell center of this container. For this, once again, I'm jump into the number two selector, and I'm going to type Ansell property. An se center. If I save this file, you can see the result. Let's talk about our new property, which is auto. If I use auto value in our item two, and then save this file, here, you can see it is back to the group. Now, this value is related to parent container alignment value. Let's change the parent container alignment. Align items center. If I set this file, as you can see, our auto value automatically follow this alignment. If we use Align self auto, then it's relatively work with aligned items value. IOU center value is also act like A center value. IO Ue flex and value, is also act like A flex and value. You need to remember, Allan sal property only work with Flexbox sales, not the Flexbox container. I hope now it's clear for you what is Allenal property and what is the skage of this property? Thanks for watching this video, stay tuned for our next Tutorial. 25. CSS Flexbox Order Tutorial: Hello, guys. Good to see you back. In this tutorial, we are going to learn about water property. This property works the same way we did in the grid. Let's start the practical and see how it's work. And you can see, side by side, I open my viso stocor and my browser using L lifesaver extension. I already created estimL document named Index do ATML. As you can see, instead of the flex container, we have total six flex item. If you remember using water property, we can change cells positions. Suppose you want to move fourth cell in number two position. In that case, we need to use water property. So I'm going jump into the item five selector, and I'm going to type water. At first, I'm going to pass zero value. This is the default value. If I set this file, H you can see there is no changes in their water. But if I pass minus one, let me show you and set this file. Now you can see, now you can see our fifth item move first place in this water. By default, all the cells water property value are zero. Water start from minus value. For item five, we use minus value. That's why it came first. This is minus one. Also, I'm going to type minus one in fifth place. Minus one. Similarly, for our third item, I want to pass minus two water minus two. If I set this file, now you can see it came first place in our water B minus two is less than zero and minus one. That's why it came first. As I told you earlier, Lust value came first. I want to tie minus two in third place minus two. First minus two, then comes minus one, then zero, zero, zero, and zero. But if I pass one value in number one item, let me show you water one, and then set this file. You can see it has came to the right side because one is greater than minus value and zero value. That's why it came up to zero. I'm going to pass plus one here. It's move lost two greater value. Now if I pass water two in our fourth item, let me show you water two. If I sat this file, as you can see, now it's skin to the last place. Because plus two is greater than zero, and one. If I set this file, now it's clear for you. Now you can clearly understand how waters are w. We do not set any water in item number two and item number six. By the fall, the water of these items are zero. I hope now you understand the watering. Now the question is, where do we use the water property? When you want to make your website responsive, then water is the most important property. In DextVew, you want to follow this water. But in mobile view, you want to move item four in first place. In that case, water property are very useful. I hope you got the point. Thanks for watching this video, stay tuned for our next tutorial. 26. CSS Flexbox Flex Grow Tutorial: Hello, guys, good to see you back. Once again, I'm come with a new tutorial. In this tutorial, we are going to learn a new property, which is flex. Let's start the practical and see how it's work. As you can see, side by side, I open my isle sto cotter and my browser using Lip Seal extension, and I already create estimL document named Index doot estemL. As you can see in our parent container, we have total six flex items. Let's use our new property. Basically, flex group property not work with container. I work with flex items. As you can see, there are the common class name name items for all the flex items. I'm going to jump into the items selector. And I'm going to use our new property, which is flex grow. Flex grow. Here we need to pass numeric value. If I pass zero, and then set this file, as you can see, there is no changes. If I pass one value here, so type one, and then set this file, here you can see, all the spaces are equally divided to flex item. I hope now it's clear for you how flexdro property work. If I pass two here, and then set this file, as you can see, there is no changes. Be I equally divided this pace, all of this flex items. That's why it's not going to work. I'm back to my old position. One, and I'm going to set this file. Now I want to increase item to eight. Yes, we can do it. At first, we need to select the item individually, and then we need to use this property. Flex grow, and here I'm going to pass two. If I set this file, you can see the result. You can see here, now it's doubled compared to other sales. Similarly, if I pass three and then set this file, now its size is triple compared to all. Now similarly, I'm going to use the same property in our item four. I'm going to type, flax grow, and I want to expand the wed up to four time. I want to pass four here. If I set this file, you can see the difference. If I remove the margin between cales, now it's more clear for you. Without item two and four, all of the ces will one. For Item two, les group property value is three, and for Item four, Kles group property is four. This property only worked for Flex item. Basically, we use this property, when do we need to provide equal width all of the sales. I hope now it's clear for you what is Flex group property. Thanks for watching this video, stay tuned for our next tutorial. 27. CSS Flexbox Flex Basis Tutorial: Hey, once again I'm back with a property relates CSS flex box. In this tutorial, we're going to learn what is flex basis. This property is pretty similar to Max with property. Basically, it handle Flex item wd. Let's see how we can use it practically. As you can see, side by side, I open my iso to cooror and my browser using Life Server extension, and I already create a STL document named index dot STML. As you can see inside the flex container, we have total six flex items. As you can see, we use display property, flex, and also we use Flex RAP. We used Flex Rap property because if item overflown, then came down. That's why we use Flex RAP. For every flex item, we set a common width. As you can see, flex grow one. We learn about this property in our previous tutorial. That's why all the items that take same amount of space. Let's use the property flex bases. In item one selector, I'm going to type flex bases. And here I multi pass 250 pixel. If I set this file, as you can see, now our first flex item wi is 250 pixel. Now it's work like maximum width. Let's turn on the developer toolbar. If I sake this dp, as you can see, our first item width is 250 pixel. But without our first item, all the deeps are take same amount of space. But if I try to shrink down the browser size, let me show you. As you can see, it's not going to effect the width of this item one. If we reduce the browser width, as you can see, now it shrink down. Because this property work like a maximum width. We can reduce the width of this item below then 250 pixel, but we cannot stress the width of this item more than 250 pixels. Now I'm going to use flex basis property, all of this item. I'm going to comment out this line, and I'm going to tie flex bases 100 pixel. If I set this file, at first, I'm going to increase my browser panel width. Now you can see steal our first item width is 250 pixel. But without our first item, every items widths are 100 pixel. If I try to increase the browser size a little bit, let me show you, as you can see, item five move to the right corner. Because without first item, every items trying to maintain 100 pixel width, and also they are trying to fill the space of this browser. Now, let's try to reduce the browser width and see what happened. If I try to reduce the browser width, as you can see, most of the items are shipped to the second row because we use flexer property. Otherwise, they are going to overflow to this container. But if I reduce it, little more, as you can see, as you can see, there is no space for two items in a single row. That's why they shrink down. But as you can see, we reduce the item one way. But remaining item one, still all the item widths are 100 pixel because they have space to extend up to their full width. But if I reduce it more and more, as you can see, all the items are reducing their width. I hope now it's clear for you, this property work like a Max with. Not only that, this property also worked like a minimum width also. Let me show you. If I comment out this line, and if we use Flex grow property for all of this item and set this file, as you can see, all the items are came to the one row. We use lex Bass property only for item one. F remaining one, we use Flex grow property, and O Flex grow value is one. As I told you, it's worked like a minimum width property also. Let me show you. I I try to reduce the container width, as you can see, it going to effect all of this item width without item one. If I try to reduce it more, as you can see, it not going to effect item one. Without item one, all the items are reducing their width. If we try to reduce it more, as you can see, our last item ship to the second row. But our item one still maintain the same width, 250 pixel. If we use Flex bases property with flex grow, there is like minimum width. But if we use flex basis property only, then it's going to act like a max with. Not only that, here we can use percentage value also. Suppose I want to use 50%, 50%. If I set this file, as you can see, it still work properly. Let's increase the percentage value, 90%. If I set this file, now it's clear for you, how it's work. Now every time our first item going to take 90% width of this browser. So this is up to you what kind of value you are going to use. I hope now it's clear for you, what is Flex basis property. Thanks for watching this video, stay tuned for our next tutorial. 28. CSS Flexbox Flex Shrink Tutorial: Welcome back guys. In this pterio we're going to learn what is Flex stre. Let's jump into the computer screen and see what is that. Here you can see, side by side, I opened my visotrio Correor, using Lib Sever extension, and I already created STL document named Index Dot STML. And he you can C for different flex item, one, two, three, four. This is our flex container. If I show you heric c, we use distant flex. In our common class, I use flexro property, Flexro, one. That's why it widths are equally divided. But in this tutorial, we are going to learn a new property, which is flex strnk, so let's start it. Fast, I'm going to remove flexro property, and I'm going to set wi wi, 200 pixel. If I set this file and resize my browser with, you can see the result. Here you can see our container with is bigger than items. As you can see, all items with 200 pixel. Now I want to use this Flex string property in our item one. But at first, I want to tell you what is the meaning of flex sing. Basically, we use flexing property to create our flex item responsive. If you want to make your items shrinkable, then you need to use this property. Here you can see it shrink the item. Let me clear the concept. In our item one, I'm going to use this property, flex shrink. One is the default value. If I set this file, here you can see, there is no changes. But if I use zero value and then set this file, now you can see, hey, I did some cinemta. We need to use this property inside the item one, not all the items. I want to move this property in our item one. If I set this file, here you can see, item one did not change this shape. Now, our item one is not shrinkable. Now it maintained the fixed width, 200 pixel. If I increase the browser width, you can see the result. If I shrink down other flex item to the limits, let me show you how you can see our other flex item overflown from this container. As you can see, our first item did not shrink because we use flexing value zero. Now it's clear for you for shrink, we can use zero and one value. If we use one value and then set this file, now you can see the result. Here you can see, now we shrink our item. If you want to turn of the shrink, then you need to use zero value. Now I'm going to show you another thing. You already know if I use zero value, we can turn of the shrink. But if we use one value, then we can shrink our flex items. Now, without zero or one, we can use different values. Let me show you. If I use two hair, I set this file, you can see the result. It shrink down our first item compared to other items. Similarly, if I use three value, and then set this file, you can see, again, it shrink down our item one. If we do not use zero value, then our item is always shrinkable. And now I'm going to show you the second method. How can we use this string property in a different way? For that, at first, I'm going to remove the item wing. Then I set this file. Also, I'm going to use string value one. And now I'm going to use flex basis property. Flex basis. Flex basis 200 pixel. Flex basis mean dynamic w. Now you can see, we cannot apply any width to all the item. We apply w in our item one using flex basis property. Now, if I save this file and try to reduce the browser width, as you can see, when that space is over, and if I try to reduce it, you can see our item one also shrink down. Now the question is why shrink down because we use one value. But if I use zero value, Accept this file. Now you can see our items are overflown from this container. But if I pass two value and then set this file, as you can see, it won't work. If I use Value one, and set this file, you can see there is no changes. In this method, our other values are not going to work. If you want to cover the remaining space, in that case, you can use Flex Grove Vue. Let me show you. In our item four, I'm going to use Flex Grove Vue. Flax grow. One, I I set the soil, as you can see, our item four cover the whole blank pace. If I reduce the browser width, you can see our item four automatically shrink down. At one shrink over, now it effect on item one. I hope at that point, it's clear for you. And now I'm going to set width to this container. As you can see, we do not use any width to this container. I now I'm going to set container w. Here, I'm going to tie we WIDTH W 600 pixel. If I set this file, and increase my browser width, now you can see, now you can see our container size is fixed, and now I'm going to reduce the container width. I'm going to use 300 pixel. If I set this file, you can see it shrink all the items. Also the item one. I I shrink down the container little wit, something to 50 pixel, And then set this file. Here you can see it's also work. Because we use one value here. FlexSn one. But if I use zero value and then set this file, you can see a different result. Here you can see, other items are overflown from this container. I hope now it's clear for you what is Flex shrink property. Thanks for watching this video, stay tuned for our next tutorial. 29. CSS Flexbox with Margin Auto Tutorial: Today in this tutorial, we're going to learn what is auto margin in flex box. Let's jump into the computer screen and see how to work. Here you can see site by site, I open my Visa Sudo codaor and my browser using Live Server extension, and I already create a estil document name index dot est. As you can see in my browser, there is a parent container. Inside this parent container, we have a D item. This is our flex container, and this is our flex item. Now I'm going to show you how we can get different results using margin auto value. In our item, I'm going to type margin. Margin and I'm going to use auto v. If I set this file, you can see the result. Here you can see it horizontally and vertically line center. But the sine is why, because there are a lot of free space inside this container. That's why it's line in center. Now I'm going to use margin left auto margin let. If I set this file, as you can see, here you can see it automatically ship to the right side of this container. O item leaving the space on the left side and ship to the right side. If I use margin top auto top, then set this file. Now you can see it's coming down from the top because it has free space at the top. With that, I'm going to use margin late property. Margin late. Once again, I'm going to use auto Vu. If I set this file, now you can see our flex item shaped to the right bottom corner of this container. I hope now you can understand how we can get different alignment just using auto Vu. Let me show you another example. Suppose we have a container. Inside this container, we have total four flex item. Here you can see the items, item one, item two, item three, and item four. I say different background color to these items. Now I'm going to use our margin auto Vu. I'm going to use it inside our item two Margin, right auto. If I set this file, you can see the result. Here you can see our item two take all the available space inside the container, and it's provide a use margin and shift item three and item four right side of this container. Similarly, if I use margin lept property, let me show you margin p and then set this file. Now you can see, is provide all the space side of this item two. If I use the same property from item one, so I'm going to cut this property and paste it here. If I set this file, now you can see, it's provide all the space before item one, and it's move all the item right side of this container. When you work with the responsive site, you can use this tree to align your flex item. I hope now it's clear for you using auto value, how we can create different layout in flex box. Thanks for watching this tutorial statue for our next tutorial. 30. CSS Flexbox Nested Flex Tutorial: Hey, this is the last tutorial related flexbox property. In our accoing tutorial, we're going to cover some real like projects. In this tutorial, we're going to learn what is nested flex. Let's jump into the computer screen and see how it work. As you can see, there is a container and inside this container, weptal three D item. If we convert our parent container into flex container, then we call this de flex item. But if we use display flex property in a particular item, in that case, it would be a nested flex container. These are also flex item inside this container. So let's start the practical and see how we can use it. As you can see, side by side, I open my visual studio code or and my browser using light server extension, and I already create a sable document name index dot at. Here you can see a parent item plus container. Inside this container, we have put all four Flexbox item. As you can see in our container class, we use display property flex. First, I'm going to change the direction of the flex items. Here I'm going to use flex direction property. Flex direction. I'm going to use column. If I set this file, you can see the result. We already set hundred pixel height two our items. Now I'm going to add three more deep inside our second item. Here, I'm going to add total three more de. At first, I'm going to create a d with Sub item class. Class S item. Also, I'm going to use another class name S item one for our first d. Then I'm going to duplicate this line total two time. So I'm going to praise shaped old down arrow. Sub item two and Sub item three. Are you can see, I set a common class name sub item, and also we say different class name for each items. Then inset this dem, I'm going to type A, B, and capital C. If I set this file, as you can see, it returned our items roi now I'm going to convert our second flexbox item into a Flexbox container. Here I'm going to use a property name display. Display flax. If I set this file, as you can see, by default, it arrange our item in a single role. Now, let's say a background color to our items. For that, dot item two, greater than sine dot our class name, which is sub item. Then then inside the civses, I'm going to say background color. Background y. Also, I'm going to say a text color. Color, Black. If I set this file, you can see the result. And now I want to equally divide our nested flex item inside this container. For that, I'm going to use a property name Plex grow. Flex group. Plex dro wine. If I set this file, you can see the result. Let me give a margin to our items that can tier you. Margin one pixel. If I set this file, you can see the. As you can see, we have a parent flex container. Inside this parent flex contin, we have Protal four flex item, and we convert our second flex item into a nested flex container, and inside the nested flex contin, we put Protal three flex item, A, B and C. I hope now it's clear for you, how we can create nested fix items. It's not a very difficult one. It's a very easy process. Thanks for watching this video, Set you for our next Tutorial. 31. How to Create Dropdown Navigation Menu Using Flexbox : Hello guy is good to see you back. Welcome to our first project related CSS Flexbox. In this project, we're going to create dropdown navigation menu using CSS Flexbox property. As you can see, after Hoberm service section, you can see it open a dropdown menu. Then if a web development section also sequent open another dropdown section, a S PHP and Java Strep. Let's see how we can create this one. As you can see, finally, we are in my Visa Studio code editor. Also, I am in my current working directory. Inside this directory, we have two files, in Des dot Stable file, and style dot Sess file, and we have a folder name image, and inside this folder, we have one picture, nature dot JPG. And here you can see in my estimate document, we already link our thesis file, style dot Sess. First, I'm going to complete the Stable section. Inside the body tag, first, I'm going to take a deep tag, B dot, and I'm going to take a class name, and our class name is Menu AA. Underscore area. Inside this dip tag, first, I'm going to take UL tag. As you know, UL tag use for no waders. For menu items, we need some LI tag, L. Inside the LI tag, I'm going to add NCA tag. A. We don't need to redirect it any page. That's why I'm going to use H text sign. Then I'm going to type our first menu item name. O first menu name is. Then I'm to do we get this line. And our next menu item is above. And our third menu item is services. So me to remove above and Hem type services. And our fourth menu item is portfolio. He type Portfolio. And our last menu item means contact contact. This is our main menu section, and now we need to create a drop down option for services. Inside the LI tag, I'm going to take another UL tag. Also, I'm going to assign a class to this UL tag. Claus drop down one. Underscore one. For Dropdown items, again, we need to tag LI tag, L. Also need to tag and Gut tag, A, and I don't want to redirect it any page. That's why I use Has tag. What kind of services we provide, we provide logo design, web design, and web development. Hm type, logo design, Logo design. Then I'm going to duplicate this line. Our next service is web design. Her Type design, and all services web development. Inside this services section, we have total three more subsection. Now I want to add three more menu items inside the web development section. Inside the LI tag, again, I'm going to take UL tag U L. Also, I'm going to assign A class Name. Class drop down two. Underscore two. Again, inside the EL tag, I'm going to take A A, then our anchor tag, and I don't want to redirect it. I, and I don't want to redirect it. That's why I use H tag. Inside the web development services, we work with Python, PHP, and Java squat. First, our first main em is Python. Then I'm going to replicate this line and our second menu item is PHP, and our third menu item is Java SQ. If we set this file and show you my browser. Now you can see how it's lo. Without CSS, our menuer look like this. But here you can see the clear structure of our menu. Inside the services section, we have three another section. Inside the web development section, again, we have three another items, Python, PHP and Java three. In our first tape, we complete our HTML part. In the next part, we're going to start our styling pert. Let's start the styling p. First, Amendo select universal selector, which is star sign. Then inside the calibraces Amendo type or first property merging. Merging Zero. Then I'm going to type padding, padding, also zero. Our next property is box sizing, box sizing, box sizing border box, and now I'm going to select all the anchor tag from the menu area section. I'm going to copy the class name menu area, and back to the Sess file, and Ham type dot menu area, and and our anchor tag also. That I press A. Then inside the actress, Then instead the Class, I'm going to use our first property, P is display. Display flax, and our next property is Align item. Align items, center. Our next property is justify content. Justify content. It is also center. And for font color, I'm going to use white color, Color, white. Then I'm going to take background color for our maneuver. Background, and for background, I'm going to use RGV RGB. For red, I'm going to type 57. For green, I'm going to type 57 again. For blue, again, I'm going to type 57. If I set this file, I show you my browser, you can see the result. Next, I'm going to provide height to all these anchor tag. With that, also, I'm going to change font style. Here, I'm going to tie height 50 pixel, and font family font family sensory. And font eight font eight bod. And I don't want any under line to our anchor tag. That's why we need to use another property, which is text decoration. Text decoration, none. Also, I want all the menu item. That's why we need to use another property, which is text transformation. Text transformation, text transform uppercase. If I set this file and show you my browser, now you can see the result. Now our phones look much better than previous one. Using Flexbox, we horizontally align all the menu items center of this page. Now I'm going to add Over effect to all of these items. Let's back to the result so coor Now I'm going to select dot main menu or anchor text, colon hover. Then then inside the calibraces, our first property is background, background, and our background color is gray. With that, I want font color white, color, white. If I set this file and back to my browser again, and if I open my cars on these items, you can see the effect. Now we need to put all this nav item into a single row. For that, we need to select UL tag. Here, I want to tie the menu area UL. Then in set the cos our first property name is Lstle, Las style, which is none. I don't want any style in our list items. That's why I use this style none. With that, we need to use another important property, which is this, this play flax. If I set this file and back to my browser, now you can see it try to align it in a single row. But we do not provide any, that's why it's not worked perfectly. Now we need to provide to all the list items. Let's back to the visual studio code editor again. Hm tie. The menu area LI tag, and I'm going to see it on the LI tag. Then inside the alvass, O first property is position, position relative, and our next property is weight weight 100%. And our third property is text align. Text Align, text align center. If I set this file and back to my browser, you can see the result. As you can see, it's worked for all the least items who are from Main Menu area. Now I don't want to show our services section until I bar on it. For that, we need to hide our LI tag from dot down one. Let's back to the is st and here I'm going to type Dot drop down one, underscore one, and I'm going to select all the LI tag from it. Then inside the calibraces, and I'm going to use a display property. Display none. With that, I'm going to use another property name position. Position relative. If I set this file and show you my browser, let me show you. As you can see, now our drop down section is not visible, but I want to visible it when I hover on it. For that, we need to select all the LI tag from D down one. Let me show you. Dot menu area, and then I'm going to select all the LI tag. With that, I want to add O selector. With that, I'm going to select all the list item from Drop down one. Hm type, dot, drop down one, direct al selector, or tag name, K. Then Is the Calise or first positioning property is top T zero. Also, I'm going to use another property, which is display. Display block. If I set this file and back to my browser and who my cars are particularly service section, now you can see the result. Now I display, all the drop down menus, logo design, web design, and web development. But our second drop down option not work perfectly. But before we need to perfectly arrange our drop down one menu section. Let's back to the Visual Studio code edited again. Here I'm going to select dot drop down one. Then he set the cases, O first property is position, position absolute. And to arrange it per ft, we need to use another property, which is display. Display slags, and I want to arrange drop down items, column wise. That's why we need to use another property, which is plex direction. Plag direction, column. Also we need to set what to our drop down box. Herm type, what 100%. If I set this file and back to my browser and hover my curser on service section, now you can see it perfectly. Here you can see, we perfectly align our drop down items, column wise. Now we need to show our second drop down menu. For that, nearly, we need to do the same thing. Let's back to the s studio code, and I'm going to replicate this section. At first, I'm going to hide our drop down two menu. Drop down two, this, and now I don't need this position property. I remove it. Also, we need to add a hover effect drop down to list item. For now, I don't need to use direct style sector for that and dam to change drop down one to drop down two. Also, I'm going to remove menu area and am type dot drop down. Drop down under scope one. Also, I don't need this top property because I want to show it p side. I'm going to set this file. Next, I'm going to change this elect name, drop down one to drop down two, and I'm going to remain all the property and value same, but I'm going to remove with property, and Home type top top zero. There I'm going to use another property, which is top top zero. Our next property is lip Lap hundred percent. Also, I'm going to set for drop down to menu section. W 200 pixel. If I set this file and back to my browser and overall service and web development section, it's not work. I think I did some mistake. Let's back to the Stable file. As you guy, we did a spelling mistake in drop down two. We need to use, not. If I set this file and set my style file and back to my browser again and rode my browser, and hover on services and also hover on web development. Now you can see the result. Now our menu perfectly work. As you can see how we can create Db down menu using flex property. Next, I'm going to add a header image and a text using flex properties. Now I'm going to add a header image. For that, we need to take another dip tag, D dot, and I want to set a class them, which is banner area. Banner underscore area. Inside this dip tag, I'm going to add a H to tag. And Hameroty, power of flex box. Power of flex box. And I'm going to set this file. Now, let's design the banner area in our Sess file. I'm going to copy this class name, banner Aa, in my Sess file, I'm going to tie do banner area. Then I set the css O first property is background image. Bground image. For background image, I'm going to take this picture, which is in our image folder, NP. Ho type, R. U R L, then our folder image. Slash or image name nature dot JPG. With that, I'm going to say the background size. Background size, background size cover. Also, we need to pass background position. Bground position, background position, center center. I want to horizontally and vertically center this background. That's why I pass center and center. Now I'm going to set height to this background. Height hundred VH. If I set this file and back to my browser, you can see the result. Now we need to align this text center of this image. For that, we need to use this flex property. Let's get to the resto code editor and Here I'm going to type this play flex. Align item center. Also, I'm going to pass justify content center. If I set this file and tat to by browser, you can see the result, power of flex box. Now we need to increase the text size and change the color. For that, I'm going to select our headed tag. Got banner area H two. Then inset the calibraces or first properties texts, tra text transform uppercase. With that, I'm going to change the color. Color, white. Also, I'm going to change the font size. Font size, 60 pixel. Also, I want to change the font family. Font family. Font family monospace. And I'm going to set this file. If I back to my browser, you can see the result. But it's not properly visible because of the background. Now we need to add a gradient over the effect to this background. Let's do it. Here I type, linear, linear gradient, between these two value, I'm going to use a coma. Inside the down braces, we need to pass starting and ending point gradient value. Here, I'm going to use RGBA value, r G B A, A for Alpha, which is used for transparency. For red, I'm going to use zero. For green, also I'm going to use zero, and for blue, again, I'm going to use zero. But for Alpha value, I'm going to use 0.6. This is the one side of gradient v. We need to pass another side of gradient value. Here, I'm going to use a coma. And I'm going to create this line. I'm going to copy it and here I'm going to past it. If I set this file and do to my browser, now you can see the result. I successfully create a navigation bud using Flexos property. It is one of the good usage and example of Flexboxs property. Thanks for watching this video, state tune for our next project.