Responsive CSS: Flexbox and Grid (2022) | Jayanta Sarkar | Skillshare

Playback Speed


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

Responsive CSS: Flexbox and Grid (2022)

teacher avatar Jayanta Sarkar

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

27 Lessons (2h 23m)
    • 1. Course introduction

      1:36
    • 2. CSS Grid Layout Introduction

      3:14
    • 3. CSS Grid Building with Rows & Columns

      12:00
    • 4. CSS Grid Gap Tutorial

      3:37
    • 5. CSS Grid Items Positioning Tutorial

      7:50
    • 6. CSS Grid Items Spanning Tutorial

      8:26
    • 7. CSS Grid Lines Naming Tutorial

      7:17
    • 8. CSS Grid Area Naming Tutorial

      6:57
    • 9. CSS Grid MinMax function Tutorial

      8:08
    • 10. CSS Grid Implicit & Explicit Grid Tutorial

      5:16
    • 11. CSS Grid Items Alignment Tutorial

      8:54
    • 12. CSS Grid Tracks Alignment Tutorial

      7:57
    • 13. CSS Grid Auto Fill & Auto Fit Tutorial

      6:16
    • 14. CSS Grid Fit Content Tutorial

      3:29
    • 15. CSS Grid Order Property Tutorial

      3:13
    • 16. Nested Grids Tutorial

      4:21
    • 17. Overlapping Grid Items Tutorial

      6:10
    • 18. CSS Flexbox Introduction Tutorial

      3:31
    • 19. CSS Flexbox Flex Direction Tutorial

      2:45
    • 20. CSS Flex Wrap & Flex Flow Tutorial

      5:27
    • 21. CSS Flexbox Justify Content Tutorial

      2:56
    • 22. CSS Flexbox Align Items Tutorial

      4:38
    • 23. CSS Flexbox Align Content Tutorial

      3:34
    • 24. CSS Flexbox Align Self Tutorial

      3:17
    • 25. CSS Flexbox Order Tutorial

      3:12
    • 26. CSS Flexbox Flex Grow Tutorial

      2:51
    • 27. CSS Flexbox Flex Basis Tutorial

      5:38
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

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

30

Students

--

Projects

About This Class

If you want to learn how to create modern, beautiful and real-world websites using just pure CSS, then this is the right course for you.

This is the most up to date and extensive course regarding CSS Flexbox and CSS Grid,

In this course you will learn all about CSS Flexbox and how it incorporates into real-world websites. You will learn the fundamentals of UI web design and responsive web design along with best practices. We will take a deep dive into the topic of CSS Grid and all the nuts and bolts of it.

In this course we will teach all the topics in CSS grid and flexbox from the beginning.

So, after finishing this course, you will know exactly how to build a beautiful, professional, and ready-to-launch website . And it will even look great on any computer, tablet, and smartphone.

What you'll learn:

CSS Grid layouts: build a huge real-world project with CSS Grid

Flexbox layouts: build a huge real-world project with flexbox

Who this course is for:

CSS developers who want to update their CSS skills to the most modern level

CSS developers who want to expand their toolset to  flexbox, Grids

Front-end developers who want to finally understand how CSS works behind the scenes

Requirements:

Beginner level knowledge of HTML5 and CSS3 is required

Have a computer + internet connection

Meet Your Teacher

Hello, I'm Jayanta.

After graduating and holding a degree in "information technology," my professional career began, starting web development and graphics design career in 2018, I never stopped learning new programming skills .

I  learn web development and graphic design skills in Arena Animation. But my most of the skills are self-taught skills. As a self-taught developer and graphics designer, I had the chance to work with meaning of local IT companies to build their websites and train their employee on web programming.

See full profile

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Course introduction: Hey, do you want to learn CSS grid and CSS flexbox? Then you have come to the right place. Hello, my name is John the shorter. Proportionally, I'm a web developer and online instructors. I began my career as a front-end developer, didn't jump into the back-end development. This is the most up-to-date and extensive course related CSS Greek and CSS text box. In this course, you will learn all about CSS Flexbox and CSS greed, and how it is injected into real-world websites. You will learn the fundamentals of responsive web designs along with the best practices. We will take a deep dive into the topic of seasons, Greek and CSS Flexbox. Let's see what we are going to learn from this course. We're going to start this course with CSS Grid layout introduction. Then one by one, I'm going to go over all the faces, good properties and their functions. And you can see the list of the properties. And then we really jump into the CSS Flexbox. At first, I'm going to introduce you what is CSS flexbox. And then one by one, I'm going to go over all the CSS properties related plagues box. This course is specially for point in developer and also for CSS developers who want to update their skills. There is no spatial requirements for this course, just inhabited knowledge about basic CSS and HTML. Then you can do this course. You can check out my course content and may cost overview. And if you think this will benefit you, then I am waiting for you in the course. 2. CSS Grid Layout Introduction: Hello guys, welcome back. In this tutorial, I'm going to introduce you what is CSS greed and how its work? And why should we use CSS grid? The first, when VDS is a two-dimensional grid system, It's kind of new layout system. We'll call it two-dimensional because we can handle rows and columns together. Our second benefit is grid layout. Replace float layout. We don't need to use float property anymore like margin clear. And we don't need to focus on float, lift and float, right? We can create layouts very easily. Our third benefit is it create our code very first and clean. Because we do need to focus on fluid properties and it increase code readability. And our fourth benefit is we don't need to use any CSS framework like Bootstrap, Foundation, materialized CSS, etc. Because if you understand greed 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 great works. Suppose this is a deep and inside this div, we have six different deeps. And we call this structure grid system. Without using float and margin, we can provide gaps there and we can handle it together. We'll call this parent container is greet container. To create this grid container who need to use a CSS property in our parent div, which is, which is display property, display greet. When we use a display property, greet it automatically as in this parent container, as a great container. And as you can see, all the items on this deep, we'll call it greet items. Here you can see it individually. We'll call it great sale. And here you can see some lines between these deep. And we call it grid line. Here you can see for grid lines, these are all vertical lines. And here you can see a gap between these two cell, we call it gutter. Similarly, these lines are working vertically. And as I told you, it's working two-dimensional and we can handle it very easily. And it's 4k like table sales, row and columns. Here you can see according to this structure, we have to redraw in our image. And here you can see in yellow borders, we'll call it grid columns. And here you can see a gap between rows and columns. And we called it Great area. So in our upcoming videos, we're going to understand how we can create greets. So in our upcoming video, I'm going to cover all the great properties in this tutorial series. And we're also going to learn how we can create a beautiful layout using these deep properties and hair, you can see the browser's name, which can support our grid system. Internet Explorer doesn't support grid system. Edge supported Firefox supported Chrome's of our deeds, Safari supported and also Operator Support eat. Most of the time we are work with Chrome, Safari and Firefox. So thanks for watching this video. Stay tuned for our next tutorial. 3. CSS Grid Building with Rows & Columns: Hello guys, Good to see you back. In this tutorial, we are going to learn how we can create greets. Basically, we have put our two property to create creed or first properties, grid template columns and Greet template rules. So let's start the practical and tried to understand how it's work. Here you can see I already create a HTML document. And I open this HTML document using Live Server extension. And in our eyesight you can see our web browser. So first, I'm going to create a deep layer. I'm going to create a greet container div. And also I'm going to assign a class to this d plus container. And inside this div, I'm going to create six other deeps div. And I'm going to set a class, class item and item 1. And I'm going to do we get this deep for five time? Yeah, I use multiple classes and I'm going to change the class's name. Item two, item three, item for item phi and item six. And inside this div, I'm going to type some text. First, second, third, fourth, fifth. And last one is six. If I said this file here you can see all the deeps. First, second, third, fourth, fifth, sixth. So first, I'm going to set a background color to this container, dot container background gray. If I set this file here, you can see the result. And also I'm going to assign it to this container with 700 pixel. And also I'm going to prevent margin to this container. Margin. For top, I'm going to use 50 pixel four lift. I'm going to use 0. For what? I'm going to use 04 lift. I'm going to use 50 pixels. And if I said this side here, you can see the desert. And now I'm going to provide different color for different items. Some Duke data selector, dot item one. And also I'm going to set the background to this item rate. If I said this file, you can see the result. And now I'm going to duplicate this item multiple time. For item 2. I'm going to say it orange color. For item three, I'm going to say it green color. For item 4. I'm going to say it yellow-colored. For a 1005. I'm going to say it blue color. And for item 6, I'm going to say it purple color. If I said this file, you can see the results. Here. You can see all the colors in our teams. So let's back to the parent div, which classes container. I'm going to use a property which is displayed. And I'm going to use these pedigrees. If I said this file here, you can see there is no changes because we do not create row and column to this green. First, I'm going to create columns. So I'm going to use Greet template column header. We can mention how many column we want. With that, we can mention column widths. Suppose I want two columns are first columns to a 100 pixel wheat, and our second column is 250 pixel wheat. If I said this slide here, you can see it's split our columns. Our first column take a 100 pixel wheat, and our second column take 250 pixel week. Here you can see in one room we create two columns. Suppose I want to change first column with something 350 pixel. If I said this file, you can see the column wheat. Similarly, we can set height using another property. Let me show you greet template rules and we can define how many rows we want. Here you can see we have total three rows in our parent continent t. Follow our first row. I want to say it 100 pixel height. If I said this file here, you can see the result is FYI for our phosphorus only and for our second row, I want to say it to 100 pixel height. And for our third rule, I want to say it a 100 pixel height. If I set the file here, you can see the result. And if you'll notice, it doesn't effect our container week, which is 700 pixel. Not only that, we can add another column to this deep. For these first, I'm going to reduce the value of this first column, 150 pixel. And for our third column, I'm going to take 150 pixel once again, 150 pixel once again. So if I save this file here you can see the result. Now it created three column. And here you can see what our first row, he said height of a 100 pixel. And for our second rule is set height of 200 pixels. And there is no hydro in this container. And if we had hydro in our container, it going to say it a 100 pixels height. Let me show you. So I'm going to duplicate this item once again. And if I said this file, oops, sorry, we need to duplicate our deep, not the selector. So if I duplicate this deep and said this file here, you can see the desert hair. You can see for our third row, each 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 feel these blank space with our third column. For these, we need to use a property which is auto. If I said this file here, you can see it fill the area with our last column, it going to feel all the remaining space with our third column. Suppose I want to change our second column with a 100 pixel. If I said this file, you can see the result. And if I use auto for our second column, wheat and, and if I uses the loo for our third column width, and if I said this file here, you can see a result. Now you can see our first column take 150 weeks a week. And our last column take 100 pixel we and our blend space Covarrubias 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 praise a pill. It's open developer option in your browser. And if you highlight the continent deep, you can see option name Greek. And also you can see the properties here display greed. And also you can see agreed taken hair. It's called greet editor. If you click on it. Arrogance, a lot of our shirts. For now, I'm 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 gridlines. It only possible if you use these pedigreed property. Here you can see we use pixels, but we can use percentages also. Let me show you, suppose I want to use two column. For the first column, I want to use 40 percent and for our second column I want to use 30 percent. If I said this file here, you can see the deserve, our first column cover 40% of our total width of the container. And now I want to use third column. And for our third column, I'm going to use Auto when, if I said this slide, you can see the desert or first column take 40% or second column take 30 percent. And our third column also take 30 percent because our first second column take 70%. And if I minus 70 percent from a 100 percent, the remaining Louise 30 percent, That's why it's take 30 percent. Not only that, we can use pixel with percentages. Suppose for our first column, I want to use a 100 pixel. If I said this file, you can see the result are first column is a 100 pixel and our second column take 30 percent of our container weed and our third column covered the remaining space. Not only that, there is another unique Is effort means fraction. Suppose a 12 column of one FR and another one is 1. If r. If I said this file here you can see it has our continuity. Our first column take first top, and our second column take or second Hub. And if I use another one, if a relu and save this file. Here you can see it's created coital three-column and all the columns take similar with similar week. It's equally divide the container width, which is 700. And if I use whoever value for our third column and then save the file. Here we can see our third column take to time-space, then our first column and second column. Here you can see we can control grids without using float. And next, I'm going to use another property which is grid gap. Let me show you. And I'm going to use 15 pixel. And if I save 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 grep template column value, which is repeat, let me show you. Repeat is basically a function. Suppose you want to column with equal width. So 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 said this file here, you can see the result. Here we do need to type the width value multiple time. If we want four columns, just need to type four here. If I set this file here you can see the result. It creates four columns with same width. For now, I'm going to use two column. With that. I want to use one effort column. Yes, we can do it. Just type 1. If r, If I said this file here, you can see the result. Firstly, create two equal sides with column, and then it covered the remaining space with our third column. Similarly, we can use percentages value and pixel value here, let me show you. Suppose I want 40% column. If I said this file here, you can see the result. Similarly, we can use our fraction unit in our roles. Not only that, we can use fraction unit for our roof, but before I'm going to set the height to our parent container, height 700 pixel. If I said this file here, you can see the result. And now I want to do with equal height. So I'm going to use refit function Kourou. We won FOR height. If I said this file here, you can see the result. Here you can see it's equally divided by our rules. This value is on the fly for two rows. First, second, if I use three and then simplified. 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 effort. You need to. If I said this file here, 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 columns, and our second property name is grid template rules. In our next tutorial, we are going to understand what is grid gap. So thanks for watching this video. Stay tuned for our next tutorial. 4. CSS Grid Gap Tutorial: Hello guys, Good to see you back in this tutorial, we are going to learn a new property related CSS grid, which is CSS grid gap. We have total key property related gig gap. Our first property is greed rogue AP, and our second properties, 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 good items. We'll call it grid gap. If it come with row-wise, then we'll call it Rho gap. And if it come with column wise, then we'll call it column gap. So let's start the practical and try to understand how it's work. Here you can see side-by-side, I opened my Visual Studio Code eater and my bells are using Live Server extension. And I already created HTML document in my directory. Here you can see we have two grid columns with whatever value. And we have total three rows in our greed, 100 pixel, 150 pixel, and 100 pixel. So between these items, I want to put a gap, maybe row wise, maybe column-wise. So first I want to use row wise gap. So I'm going to use a property greed Rho gap. And I want to assign 10 pixel gap between these roles. Let me show you ten pixel. If I said this file here you can see the result. Let's increase the value 30 pixel. Here you can see the gaps between rules. You can increase the gap size, how much you want. So this is rogue AP. And if you want a space between column-wise, then you need to use good Columbia property. Let me show you. So I'm going to type green column gap. And I'm going to use 20 pixel gap between columns. If I save this file. Here you can see the result. Here you can see rogue AP is 30 B-cell and column guppies 20 pixel. Not only that, we can use shorthand property for these two properties. For these, we need to use grid gap property. Let me show you GAP. First we need to pass row value and then we need to pass Columbia Lou, four row. I'm going to use 20 pixel. And for column I'm going to use 30 pixel. If we use grid gap property, we do not use this property anymore. So I'm going to remove it. If I said this file here, you can see the result. The distance between row is 20 pixel and the distance between column is 30 pixel. And if I use equal value for rogue AP and column gap, 30 Pixel 4 row and 30 Pixel 4 column and set this file. Here you can see the result. And now I want to show three column in our container. So I'm going to type tree rabid column 3. If I said this file here, you can see the result. And also you can see the similar gap between greed items. And here you can see a blank space because we use three different row size. If I remove this one, min last one, and save this file. Now you can see there is no gap. Or first row height is a 100 pixel and our second row height is 150 pixel. I hope. Now it's clear for you what is good property. Thanks for watching this video. Stay tuned for our next tutorial. 5. CSS Grid Items Positioning Tutorial: Hello guys, Good to see you back. In this tutorial, we are going to learn CSS grid item positioning. So let's try to understand what is CSS grid items and what is the meaning of greed item position. Here you can see a parent deep and we called it greet container. And all the div inside the parent container, we called it greed items. Now the question is, what is the meaning of positioning? Suppose you want to move, greet three item in place. And also you decide to move people on is third place, something like that. And we'll call it grid positioning. As you can see, we move the third item in this. Similarly we move the item in third place. So related this kind of alignment, we have some CSS properties. Let me show you. As you can see, we have total seven CSS properties like greed row start, greed ruined, redrew, grid columns start, etc. At last we have a shorthand property name. Great idea. So let's jump into the Visual Studio Code editor and tried to understand how it's work. Here you can see I already created HTML document and I open my browser and my code editor side-by-side. If I show you here, you can see we have a parent container. And inside this parent container, we have total 16. Its 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 sixth grade item into the first place. As you can see, you already created 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 F2 in developer mode. And I'm going to open this panel bottom of my browser. So I'm going to press this option. Here you can see a option in my pen container which is greedy. 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 are going to understand what is the use case of this lines. So let's jump into our first item, selector, coachees, item one. As I told you, I'm going to move this first item in six position. So at first, I'm going to use a property which is great droves start. So at first, we need to move this great item in Second Rule. As you can see, this is our second rule. So I'm going to type 2 hair. If I save this file. Now you can see our first grid item moving to the second row. And also we need to declare the end position. For this, we need to use another CSS property which is greed ruined. And once again, if I show you my grid lines here you can see are in position is three. That's why we need to pass three. If you do not use grid row end property, maybe it creates some trouble. When you responsive Euro upside. If I said this file here, you can see there is no changes, but it is good manner to use this property. And 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 CSS property, Greek columns, Turk and hair. I'm going to say it three. If I said this file, you can see the result. We successfully move our first grade item in sixth place. And also we need to declare the int position of this column, Crete column in. As you can see, our row ending fourth position. So you need to purchase for, if I said this file here, you can see there is no changes. It's not mandatory. But for responsive purpose, it's very important. And now I want to move this port item in first position. For that, I'm going to copy this code. And I'm going to jump into the fourth item selector. And I'm going to paste the code. So I was starting row is first. So I'm going to type 1 and our ending row is 2. Similarly, as you can see, our column start with one and end with two. Some new type, columnstore one and column two. If I said this file, here we can see the result. We successfully move our fourth container in first-place. But the important thing is we do not change our HTML structure. Here you can see our extremist structure using CSS grid properties. We can change their positions without changing their extra structure. And now I'm going to show you a shorthand method, all of these properties. And now I wanted to move the item in first-place. So I jump into the item selector and then I'm going to use a different CSS grid property. If you want to create shorthand for row, then we need to use greed real property. Let me show you creed rule. First only to provide the starting position, which is one. And then you need to use slash. And then we need to provide ending root position, which is 2. 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 Lambda 2. If I said 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 exist in the first place. Just Item 5 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 for value at once, which is great area. Let me show you. Suppose I want to move the sixth item in second place. For these, we need to provide row starting point and columns starting point. So our row starting point is one and our column starting point is two. And then you need to provide row endpoint and column in point. Our row input is two and our column end point is three. If I said this file here, you can see we successfully move our six container in second place. Just need to use one CSS grid property, which is greed area. Just unit to remember, first unit to provide row starting point, and then you need to provide column starting point. And 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 or work. There are a lot of methods we can position our greets 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 spend our grid items? Suppose you want to spend your third item week. I just wanted to fill this blank area with this third item means it's going to take two column wheat. And we'll call this method span. So stay tuned for our next tutorial. Thanks for watching this video. See you soon. 6. CSS Grid Items Spanning Tutorial: Hello guys, Good to see you back in this tutorial, we are going to learn CSS grid item spending. But first, we need to understand what is the meaning of spending. So let's simplify it. Here you can see a great container. And inside this grid container we have protons, six items. If you notice, you can see every div item with the same. And now I want to extend D1 week. I want to extend item number one, upper two item. Similarly, I want to extend item to row-wise, something like this. For item 1, we use column span, and for item 2, we use rowspan and other items automatically arranged at his own place. So let's start the practical and tried to understand how it's work. Here you can see side-by-side, I open my visits to the curator and my browser using SQL Server extension. And as you can see, we have kurtosis things, greed item in our parent container and we arranged serially. Let's turn on the grid lines. So I'm going to press it will. And if I click on this option, you can see the grid lines. And now I want to spend our first item column wise. And I want to extend this column up to line number three, some group type grid column in three. And you already know that I came on is our first item. So if I said this file here, you can see the result. We successfully spent our first grade item column wise. And if you'll notice, you can see all the grid items automatically changed their places. You can see that item number 6 has came down and we do not specify any height to our third row. That's why it looks small. So now I'm going to specify height for this third row, a 100 pixel. If I set this file. Now you can see the result. Our first row height is 150 pixel, and our second row height is 150 pixels, but our third row height is a 100 pixel. And 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 for, for this, we need to work with these two properties. So I'm going to copy these properties and paste it here. And I'm going to change grid row end point, which is four. If I said this file here, you can see the result. Now it's look like a webpage. This is our header and this is our sidebar. Not only that, we can use shorthand property for this. Let me show you creed row. If I comment out these two property, and if I type one slash four. And if I said this file here, you can see the same result. There is no changes. I hope now it's clear for you how spendings or work. Let me show you one thing. Yeah, you can see we have total three column with whatever value. So for this example, I'm going to comment on this property. And once again, I'm going to turn on the grid lines. Here you can see we have put all four column line structure. But what happened if we pass 50 here? If I save this file? Here, you can see it extend our column would default value. Now we have total for column in our container. But here you can see who do not declare for column. We just declare only three column. So we can extend our greed item beyond the container. Then it automatically adding the greed item according to the fraction value. But this is not the good practice. So I'm going to use four. And if I set this file, you can see the desert. And now I'm going to fix the third item in his absolute position. For these inside the item three selector, I'm going to type greed row. And also I'm going to turn on the grid lines. Our third item start from row number two and n up to row number three. And our next property is greed column. And also you start from column number two. And in that column number three. If I set this file, you can see there is no changes. So this is the absolute position of third item. Now we cannot move this greed from this place. And now I want to extend second column width up to line number three. For these, I'm going to use grid column property. And our column struck from line number one and end at line number 3. If I said this file here, you can see a different result because we already pleases our third deep in that position. So our second grade item cannot take its place, then is automatically shrink down. But if you notice, you can see we use only grid column property who do not use redraw poverty. If I use bleed root property, let me show you row and try to move this item in this space. Let me show you. But first I'm going to turn on the grid line. So our row struck prom line number 2 and n up to line number three. If I save this file, now you can see a different rhythm. Now It's overlap each other. If you want to see the second item completely, then you need to use the index property. Let me show you. So I'm going to tap the property name. Index. By default it's come with 0, some new type 1. If I said this file, now you can see this again item which 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 some new type span. And I want to spend our first item up to four column span space for if I save this file, sorry, we don't have four column in our container. That's why it extend out column and create a new grid line. For that, we need to use span three. If I said this file. Now we're back to our old result. If I show you the grid lines here, we can see we have total four lines. This will work with greed item numbers, and this will work with grid line numbers. This is the main difference between two values. And also we can spend it row wise. Let me show you span two. If I said this file. Now we spent our first container row wise, also column-wise. And because we use thread index property for a second item, that's why our first item do not cover the second item. I know it's little complicated, but I am trying to explain it very simply. Not only that, we can use this view with these different view. Let me show you span two. If I said this file here, you can see the result. For now, I don't need someone to undo eat. And also I want to change the grid row end video just to, and once again, I'm going to turn on the grid lines. Suppose we have lot of columns in our container. And I want to extend the red grid item from beginning to end up this container. But I don't know how much column line we have. For these, we can use minus points. Here you can see a line number minus 1. Remember our last line number always start with minus one. So we can use the minus V2 here. Let me show you if I type minus1 and set this file. Here. You can see there is no changes. So I hope next year for you how spendings our work. So 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 tutorial, we are going to learn CSS grid line naming. In our previous tutorial, we use gridlines to spend our grid items. But in this tutorial, we are going to learn how can we assign line name and how can we use the LIBNAME as? Let me simplify it. This is our header item and this is our sidebar item. To create the sidebar I team, we need to use redraw property and grid column property. And in redrew property, Pasteur need to pass line starting point, and then we need to pass line ending point. But in this tutorial, we're going to use line numbers. We are going to create our own value name. As you can see for starting point, I use sideburns start, and for Endpoint I use sidebar in. So let's start the practical and see how it's your head. You can see side-by-side, I'll open my users to do corridor and my browser using Live Server extension. And I already create a HTML document for this example. And here you can see it web layout, which I create using greets. Here you can see a header, a maneuver for different boxes, and a sidebar, and lust, a footer. And here you can see the container and all the div inside this container and a kid this layout using spanning. So let's jump into the content at deep selector. Here you can see we have total three grid column with one FOR value. And also you can see we have total fibro with different sizes. For header, I use 150 pixel height. For maneuver, I use 50 pixel height. And for our third rule on 1 second, I use 150 pixel height. And for footer, once again, I use 50 pixel height. And here you can see I spend my header from beginning to end, from one to minus one. And here you can see we use Greenland video for that. So 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 sometime we need to face difficult templates. Or a very complex template, in that case, is very difficult to remember these numbers. And it can create very big problems. So to result this kind of problem, we assign a name to these lines and we call this process grid line naming. So let's see how its work. So first I'm going to start with Ruth, and we need to assign this line names with these videos. So for grid line number 1, I'm going to use a name which is header start. Let me show you. So first I'm going to use square braces. Instead. The square root is, is. I'm going to assign a name for our first-line header. Dash start. Just you need to remember, you cannot prevent pace between two worms. And I'm going to turn on word wrap. Otherwise, you cannot see my lines. You can use hyphens or underscores or any other character. And if we start this header, also we need to end this header. And I want to end this a header in row number two. So I'm going to use square braces once again. And he said the square root is, I'm going to type header end, header, end. So if I save this file here you can see there is no changes. And now I'm going to show you how can we use this names in our view. So in our greed root property, I'm going to type header start because this is our starting point. And for our endpoint, I'm going to use header in value. So if I save this file here, you can see there is no changes. So our names or work properly. So let's jump into the menu section. Let's create a starting point for Meno. For these, we don't need to use another square basis. Just when to use a space between header end and Meno start point. For menos dot point, I'm going to use minister. I'm going to use Meno start name dash Stark. And in this menu after 50 pixel, I'm going to use Menu and name. Menu, dash end. And I'm going to use this names in our bedroom properties. Let me show you. So I'm going to copy the minuss dot name. And I'm going to replace two this name. And for our Meno in value, I'm going to use menu in name. If I said this file here you can see there is no changes. It's 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 total three columns. But if you notice, you can see we use repeat video here. And I use whatever value for three columns. So how can we assign name for repeat videos? There is two method you can assign name for your columns. Either you type 1 if or three times, and every time you use brackets. Otherwise we can assign name, we distribute video. Let me show you. So before one FOR value, I'm going to use a name which is called DES, start. And after whatever value I'm going to type called end. You can type any name as you want. But there is a problem. It going to use called start and golden, three-time fasted, going to use call start here. And then you're going to use called inheritance, once again is going to use called start here. And then you're going to use co-linear. And they skip going on. So how can we use it properly? For this? First, we need to type called start. And then we need to assign where our columns start. Our columns start from one. So I'm gonna type 1 and 4 end point. I'm going to use called end col, dash end because I spend up to three column. So I'm going to use three hair. You don't need to notice line number here, just Unit 2. Notice how many columns you want to use. So if I save this file here, you can see that is no changes. So there is no problem. It's what perfectly. And now I want to spend our header up to two column. So I want to use pu hair. If I save this file, you can see the result. It used to column value for header item. I want to go back to my old position. Somebody is three. We can use the same value for our menu columns. Let me show you. So I'm going to copy the blue and I'm going to replace with this one because our menu item takes some amount of column area. That's why we can use this video. If I save this file, you can see there is no changes. So in that way, you can assign any name for your lines and you can use it multiple times. So I hope the concept of Greenland naming is clear for you. So thanks for watching this video. Stay tuned for our next tutorial. 8. CSS Grid Area Naming Tutorial: Hello guys, Good to see you back in this tutorial, we are going to learn about CSS grid area naming. We use this method to position our greets. Here we assign a name to our grid area. And then using this name, we can position our grids. So 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 properties, grid area. So let's start the practical and tried to understand how it's work. Here you can see in your previous tutorial, we create a basic layout using greed properties. Here we assign names for gridlines. And using these names, we position our item and spent our items. And now I'm going to create the same template without using greedy property and grid column property. And we don't need to use line names for that. Here you can see I have another STL file, greet area HTML. And I'm going to use this template. At first. We divide this greed into a three column with one effort we do, and we already have five rules for header for my new four boxes and for footer. And now I'm going to assign a different name for every grade item. And for this, I'm going to use greed area property. And inside this green area, you can take any nim. So I'm going to use same name for that, which is header. And we do need to use inverted quotes for that. And similarly, I'm going to use the same property for every grid item per minute. I'm going to use the same name Minow. And for box, I'm going to use box1. For box 2, I'm going to use Box2D. Per box three. I'm going to use Box 3. Similarly for box for, I'm going to use Box 4 and 4 sidebar. I'm going to use the same name, which is sidebar. And for footer, I'm going to use footer. So if I save this file header, you can see everything is disappeared because we do not use any positioning there. So I tends are gone. So in our parent deep, I'm going to use a new property. Let me show you and our property enemies. Grid template areas, Greet template areas. And instead this grid template areas, I'm going to use double-quotes. Let me show you one thing. So I'm going back to my old file. Yeah, you can see my previous layout. If I press a quill and current on grid lines. Here you can see we have totaled three column in our structure and our header section use three column for that. So I'm back to my new layout and hair. I'm going to use this hidden him three times. Let me show you some new copy the name and paste it here. Header, header and header 4, 3 column. I use this name for three-time. And if I said this file here, you can see the result. But if you'll notice, it leaves a blank base because it expects six row in our group structure. And here we just use one rule. And once again, if I show you my old layout here you can see our menu also use three columns. So instead the double-quotes, I'm going to use Meno name for three times. And if I save this file and show you my layout, here, you can see the result. And once again, I'm back to my old layout. Here you can see in our first column, we use box1, in our second column, we use Box2D, and in our third column we use sidebar. So I'm going to duplicate this line. And for our first column, I'm going to use box1 name and photo. Second column I'm going to use Box2D name. And for our third column, I'm going to use sidebar name. We use this column names for our third rule. And once again, I'm going to duplicate this line. And here you can see our fourth row start with books three, dense come box for, and Vince come sidebar once again. So I'm gonna type box three, box for and Vince come sidebar. And the no less true. Here you can see we use three column for our footer. So I'm going to use this footer name three time. If w TER, footer, footer and footer and semicolon to end this line. And if I save this file and show you my layout, here you can see we successfully created our own layout without using grid row and grid column property. So this is the second method that we can using proposition our grid items just we need to use two properties for that. Or first property is agreed area and our same properties, grid template areas. So this kind of positioning technique is very useful for small projects. If you lay out is not complex, then you can use this process. But if your project is more complex and B, I don't recommend to use this process. And if you notice here you can see we use three column names. Every rule. And if I remove one of the column name, any of the rule. So I'm going to remove Min. And if I said this file here, you can see everything is gone because we use three column. That's why we need to pass three column name. So if I said this file once again, here you can see now it's look perfect. And now suppose you want to use two column four menu section. In that case, you need to purchase dot hair. If I save this file, now it's work. And if you want to use menu item only insane column, in that case, just you need to pass another dot before the Minnow, Minnow dot. If I said this file, you can see the desert. We can align our greed item and we can position our predate him just using dots. But you cannot use this.me of this two column. Let me show you if I remove header from this place and use a dot. And since this file, it can destroy your layout. So once again, I'm going to repeat this process, how it's work. At first, you need to use a property name Greet area for every grade item. And then you need to assign a name. You can use any name for that. And then inside the parent container selector, you need to use a property which is grid template areas. And 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. So in every row we need to plus three value. And here you can see we spent our sidebar row wise also. That's why I use this sidebar name in row number three and number four. So I hope now you understand what is greed area naming. So thanks for watching this video and stay tuned for our next tutorial. 9. CSS Grid MinMax function Tutorial: Hello guys, Good to see you back. In this tutorial, we are going to learn min-max function related CSS read. Using this function, we can dynamically change rows and columns height. In this tutorial, we are going to learn two other videos without min-max. First one is max content and second one is min content. So let's see how we can change height and weight dynamically. Here you can see side-by-side, I open my Visual Studio Core eater and my browser using Live Server extension. And I already create a HTML document. And as you can see inside my parent container, we have eight different greet sales. And we declare for column for our grid cells with one ever we lose. And we also have two rows with 175 pixel height. So let's start the practical. So let's start the practical. As you can see in my first grid item, there is a text name first. So I'm going to insert more text. Inset this bead item, lorem 20. It's going to add point toward instead this grade item. If I save this file here you can see the result. Let me reduce some words. And then I'm going to save this file. Here you can see it breakdowns are lines according to this grid item. But what happened if I use max content value for our first column? Let's use it. So I'm going to use mx content. We'll put our first column. If I save 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 blue, it Do not going to break our lines. It going to print all the paragraph in one line. It's not a very useful things for our real projects. So I'm going to reduce some word from this paragraph. And then I'm going to save this file. Let's reduce some more words. Now it's looked perfect. And now I'm going to add some more text in our fourth content, low RAM 10. And I'm going to save this file. And then I'm going to use our next value for this column, which is min contain. And if I said this file here you can see the result. It dynamically change the width according to the biggest word of the sentence. And also I'm going to add more text in this item. Let's add more text. Lorem eight. If I said this file here, you can see our text over let the grid item. To solve this kind of problem, we can add minimum content view in our row. Let me show you some to remove 170 pixel value. And here I'm going to type main content view. If I said this file. Now you can see it said the grid item height according to the text area. Suppose I want to add 50 word paragraph in our seventh item. So I'm going to jump into the seventh item and I'm going to type load them 50. If I said this file here, you can see, and you can see according to the text size, it's change height and weight. It going to consume minimum height and minimum weight according to this text. That's why the name is main content. And now I want to fix the minimum height of our row. So I'm going to remove some from this text. And then I'm going to save this file. And now I'm going to use min-max function to set a fixed height. Let me show you. So I'm going to use min-max function here. Min-max. And inside this parenthesis. And heroin need to pass the two value for minimum size of pro and for maximum size of foo. Suppose our minimum row height is 175 pixel. And for maximum, I'm going to use min content property because I want to change the height according to this content size if our content take more than 170 pixel height. So 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 because it contains eyes take more than 170 pixel. And for our maximum value, we use main-content. That's why it can take as much height it one main next function is very useful for our rules. Here we said minimum value for our item height. But if our content take more height, then we can use main content view as maximum value. But what happened if I say it to 100 pixel maximum height? Let me show you. If I said this file here, 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, deaths why we refer to use main content as max size main content. Now it can hold the all contained in our row. And now I'm going to use min-max function as a column value. Let's use it. So for our first column, I'm going to use the min-max function. And I'm going to set a minimum width of this column, which is 150 pixel. And also I'm going to take a 100 pixel for next week. And here you can see we already say to maximum container width, which is 700 pixel. But I'm going to use percentages, blue in this place, 80 percent. And it is going to make our webpage more responsive. And if I said this file here, you can see the result. Let's add more content to our FirstColumn, lorem 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 save 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. And after that, it's going to break down our lines. And now I'm going to use 200 pixel, what our minimum width. And if I turn on my developer option, and I select this contained here, you can see the maximum width of this content East 300 pixels. And if I try to make it responsive, and then asleep this item here you can see the minimum width of this item is 200 pixels, because we already set a minimum size to this column. Similarly, if we scale up our window, let me show you and this read this item. You can see it cannot extend the weed more than 300 pixel. So I hope now it's little clear for you how it's work. And if I use percentage value in our methylome size, let me show you 60% and then set the file. Now you can see a different result is going to take 60 percent width of this container here. Or we can use percentages value a far way, lou, pixel, the loo, etc. But if I reduce the browser size, and then you're going to stop at 200 pixel wheat. We cannot scale down our first column more than 200 pixel. So I hope notes clear how main below and men's below our work. So thanks for watching this video and stay tuned for our next tutorial. 10. CSS Grid Implicit & Explicit Grid Tutorial: Hello guys, Good to see you back in this tutorial, we are going to learn about implicit greed and explicitly. So let's start the practical and try to understand what is that. Here you can see side-by-side, I opened my Visual Studio code editor and my browser using web server extension. And as you can see, my parent container, we have total eight greet sales. So at first I'm going to say it, we then height. So at first I'm going to use grid template columns, value creed template columns. And I'm going to create two column with one FW. For these, I'm going to use the repeat view, repeat two column with one FOR value. If I said this file, you can see the result. And also I'm going to say it rawhide for these, I'm going to use Greet template root property. But I'm going to say it three rows height from this for row. So I'm going to use repeat will once again repeat three row comma 100 pixel value. If I said this file, you can see the result. And also I'm going to provide gap between the cells. So I'm going to type greed kept property, 20 pixel. If I said this, you can see the result. So here you can see we just defined to column size and three row size. But we have put an eight cell in this structure. We do not steal our seven grid item and eighth grade item. Suppose we dynamically extract the data from the server. And I wonder for this data in our seventh, eighth column, for these, we need to set height, but we already defined height using grid template rows property. So what are these columns? How can we sit height to this columns? Let me show you something. If I press a quill and show you my developer toolbar and click on this great icon. Here you can see some grid lines. As you can see, we still three row and two columns. And we'll call this structure explicit greet because we explicitly define this area using this to property. And this one that will not define. And we call it implicit Greek. So to style this implicit greed, we have some new properties. Let's see it. Here you can see we have total three property related implicit greet. Our first one is greed auto rows, or second one is Greek auto columns. And our last one is create auto flows. So let's start the practical and tried to understand how it's 4k software grid gap. I'm going to use our new property, which is greed auto rules. So I'm gonna type creed or two rows header. We can define our implicit in redrew height. So for our implicit item, I'm going to define 50 pixel height. So if I said this file, now you can see now the implicit read item height is 50 pixel. So if we add more style to this container, let me show you. So I'm going to duplicate this line to time and save this file. Now you can see it automatically said 50 pixel height for these grid items. So for now, I'm going to delete these columns. I don't need it. And said this file. So here you can see when we add a new cell, it going to add row wise. But now I want to add a new cell column wise. For that, we need to use another value, which is greed auto flow, some new type, greed auto flow. It's come with two type of blue, row and column. By default, it's work withdrew. But here I'm going to use column. So if I said this file, now you can see the result because we already defined three row in our explicit greed. Then up to 32, it going to add, it going to add all the sales item column-wise. And here you can see we do not define any column size to this grid item. It stick, we'd according to this text size. And now I went to assign weight to our implicit greed. For that, we need to use a property which is Greek auto columns. And here I'm going to provide 0.5 FOR value for our implicit Greek. So if I say this file here, you can see the result. Our explicit grid columns take one if our value and our implicit greets column take huff FOR loop. And if I add some more columns to this container, let me show you. And then satisfied. Now you can see it's also take 25 FOR value according to this data item. So this is our implicit and explicit Crete. So I hope now it's clear for you. Thanks for watching this video. Stay tuned for our next tutorial. 11. CSS Grid Items Alignment Tutorial: Hello guys, Good to see you back in this tutorial, we are going to learn about greed item alignment. In our previous video, we learned 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 permissive. So let's start the practical and tried to understand how it's work. Here you can see side-by-side, I opened my Visual Studio code editor and my browser using Live Server extension. And they already created HTML document name index.html. And here you can see we have put our trend read items are first six grid items are explicit grade item and our lust for read items are implicit grid items. And here you can see our explicit grid item height is a 100 pixel and our implicit read item height is 50 pixel. And now I wanted to spend my fifth grade item. And I want to spend it row-wise. For that. I'm going to jump into the item flip selector, and hair. I'm going to use a CSS property which is greed drew and hair. I'm going to spend this item up to poodle summertime span. And then I'm going to Bus 2. If I save this file, you can see the result. And here you can see how thin the grid item. And I want to spend this read item column-wise. So I'm going to jump into the dentin selector. And here I'm going to use a CSS property, which is great column. So I'm going to type greed dash column and I understand it up to two column. So if I said this file, you can see the desert. So here we spent our item row wise and hair, we spent our item column-wise. So let's start the alignment. So first I'm going to cover vertical align. For that, we'll need to use a line item and align self property. And this property is our game with four values. Let me show you. First one is start, end, Center, and stretch. If we use start value, it going to place our content. Start off, this container means in that place. And if we use envelope is going to place our content in that place. And if you center it, going to place our content center of the grid item and stretch is our default available. So once again, I'm back to my Visual Studio Code editor and now I'm going to jump into the parent container. So first I'm going to use this CSS we do, which is align items. So I'm gonna type align items. So I want to use our formula do and our phosphate Louise center. If I save this file here you can see it aligner 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 VDD item. And as you can see, it plays out 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 spent our fifth grade item. That's why it used to items. And according to item, it's sintered the content. And also you can see the same alignment for our implicit greed items. And now I'm going to use individual. So I'm gonna type END. If I said this file. Now you can see the alignment. Here. You can see it align our contained 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 align our content. Start off this item and our lust, a line item veto is strange. Let me show you. If we use this little inset. This file is the default alignment positioning. It's not very important one, it's a default value. So for now, I'm going to use center window. And now I want to talk about align self. What is an unsafe hair? You can see all the item content, our Align Center. And now I decide to align our third grade item differently. I wanted to say I want to use an online interview for this third item. So I'm going to jump into the third item selector. And for this kind of alignment, we need to use align self property, summertime, align self and hair. I'm going to use individual. If I said 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 grade item and Lynette end. We can use this property only in individual sale, not for the whole container. So now it's clear for you, if we want to apply alignment all of these items for that, we need to use a line item property. And if we want to apply in individual items for that, we need to use a lens cell property. And now I'm going to talk about horizontal alignment. For horizontal alignment, or need to use to property. Justify IT team and justify self. It's sorts similar to our previous one. And we need to use Symbaloo for that. Start in center and strange. So let's start the practical. So once again, I'm back to my Visual Studio curator and I'm going to jump into the parent container. And now I want to Eleanor content horizontally centered. For that, we need to use a property which is justify item. And our village center. If I said this side here, you can see the result. And if I turn on my grid lines, you can see it clearly. It horizontally centered our content. And similarly, if I use different value, end the inside this file. Now you can see the result. Now you can see the containing end of this breed item. Similarly, we have another view which is star. And if I save this file, the result, it horizontally aligned not contain start off this beat item. If you want to move your content website, then you need to use start. And if you want to move your content right side, then you need to use end. And as you know, stress is our default view. So I'm going to explain it here. And now I'm going to talk about justify sell property. Suppose you horizontally centered your first item. For that, we need to use justify sale property. Let me show you. So here I'm going to use just if I sell property and I'm going to use center value. If I said this file, you can see the result. And if I turn on my grid lines, you can see it clearly. If you need to align your content individually, you can use justify, sell property. And similarly, you have crippled three value for that center, start and end. And now I want to talk about two new properties, plus item and place in. This item is a shorthand up a line item and justify item. If you want to use this video in one line, then you can use it in this property first unit to bus eigenvalue, and then you need to pass justify item below. And between them, you need to provide a space. Similarly, we have plus sell property. This is for inducible grid items. First unit to bus, align self view, and then you need to justify silver blue. So let's see the practical how its work. So once again, I'm back to my visits to the curator. For now. I'm going to comment out this two line. So first I'm going to use plus item property. So I'm gonna type place items. And as you know, first we need to pass align item blue and then read to us justify items when you are fuzzy. Louise Center and our secondary Louise startup. And now I'm going to save this file. If I said this file here, you can see the sameness. There is no changes. You can use this blue this way or that way. It's totally on you. And next, let's see how it plays. Cell will always work. As you know, it's work individually. So inner item 2, I'm going to use this property, plays self. First one YouTubers a length L value, and then you need to justify silver blue. So I'm going to provide Center. And our justifies hillbillies also center. If I said this file, you can see the result, its center, our content horizontally and vertically. So I hope nodes care for you, hopeless self and place items our work. So 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 are going to learn about CSS grid track alignment. To alignment our track, we have proton 3 property aligned content, justify content and place content. And this content property is a shorthand version of Alan content and justifying content property. So let's try to understand what is greed item track. Here you can see side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. And I already created estimate recommend named index.html. And hair. I'm going to use the same grid structure which I use in a previous tutorial. Here you can see total 10 grid items. And as you can see, we spend our fifth grade item row-wise, and we also spent over 10 grid item column wise. So at first, I'm going to reduce the column width. Let me show you. So I'm going to reduce whenever we Lu and I'm going to type 150 pixel. And if I save 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, height 750 pixel. If I set this file, you can see the space. And now I'm going to show you how can we use align content and justify content. But first, we need to understand what is justify-content. We use justify content for horizontal alignment. And we have total seven value relative justify-content. Start in center, stretch space around, space between and space evenly. Our last regular use for content property. So let me show you how it's work. So once again, I'm back to my Visual Studio Code editor. So that fast, I'm going to turn on my grid lines. So I'm going to praise a P2 and then a clique greets. And here you can see the grid lines. And now I'm going to use the justify content value. And at first I'm going to use center value. If I said this file, you can see the result. Here. You can see all the grid items altogether moved to the center of this container. Using justify item property, we can center our contained inside this items. And using justify-content property, we can align our grid items inside the container. Using justify-content, we can move the whole track. Similarly, we have another value which is end. If I said this file, you can see the reserved horizontally, it move our grid items, end up this container and start is our default value. Let me show you. If I said this file, you can see the result. And 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's split our grid items into a vein. But if you have three column, let me show you. So I'm going to pause three here. And this is this file. Here. You can see the result. As you can see, it put our second column center and it's split our blank space to park. And for now, I'm going to use to call them. Our next value is space around. Let me show you if I said this file here, you can see the result. If we use this value, as you can see, firstly, provide a space, then our grid item. And then you can see the similar size up space, CPU time. And then once again our column and a blank space. So you can see the equal space leptin, right? And also you can see the same amount of space up to our first column. Similarly, you can see this space before the second column. So you can see the more space in center and our next Louise space evenly, summertime space evenly. If I said this file here, you can see it's pretty similar to pace around value, but there is a basic difference. The main differences. You can see the same amount of space between our grid items. If the space size is one effort, you can see the same amount of space before and after the column. So this is our justify content property. We basically use it for horizontal alignment. And this property work with Greek tricks. So let's talk about a land content video. We used a lone gunman property for vertical alignment. And as you can see, there are total seven blue for this property. Start in center, stretch space around, space between and space evenly. And do you already know about this For ReLu? But in this tutorial, we're going to learn space around space between n space evenly. So let's back to the practical. Here you can see our grid container height is 750 pixels. So I'm going to type this property name, which is align content. And our facilities center. If I said this file, hello, you can see the result. If I turn up my developer mode. Now you can see it clearly as you can see it vertically center our contained. Similarly, if I use individual and visit the file, now you can see it put our grid structure end of this containment. And as you know, studies are default value. But now I'm going to use a value name space between some type space between. If I set this slide here you can see the result. Here, you can see it put our first grade item and our LAS grid item into end. And how you can see the spaces between all the grid items. So this is the use case shop space between value. So let's jump into the next value, which is space around. So I'm going to type space around. If I said this file. Now you can see the result. This is going to provide this space, top of the content and bottom of the content. Suppose it provides 10 pixel pays top of this V, right, Tim. And it also going to provide ten pixels pays bottom of this item. And then scum did get area. And once again, top of this third item, it provides 10 weeks of base. So in that way it's work and are less Louise space evenly. So I'm gonna type space evenly. So if I said this file here, you can see it provides the same amount of space top and bottom of this item. So this is the use case of this values. Let me show you one thing. Here. You can see we spent our column tin CPU time. So I want to remove the grid column property from item tin. And now I'm underspend the item seven, some due west it here. If I set this file here, you can see a gap. Here. You can see a unfilled space. If you are working with complex grid structure, sometime this kind of problems are awkward. And if you want to solve this kind of problem, we have another property which is greed auto flow. Let me show you solver type, creed or to flow. As you know, we have total CPU type of flu, row wise and column wise. So I'm going to use row wise. If I said this side here, you can see there is no changes. But if I use another value with these, let me show you. So I'm going to use a new value, which is dense. If I said this file here, you can see it put our eighth grade item in the blank space. If we use this, they do, then it's not going to unveil the bank space. So I hope no, it's clear for you what is read tracking. So please stay tuned for our next tutorial. Thanks for watching this video. 13. CSS Grid Auto Fill & Auto Fit Tutorial: Hello guys, Good to see you back in this tutorial, we are going to learn auto-fill and auto feet property. Using these properties we can control greet with. So let's start the practical and see how it's her hair. You can see side-by-side, I open my Visual Studio Code editor and my browser using web server extension. And I already create a HTML document. And here you can see a container. And inside the container we have total four grid item. And as you can see, our container with these 700 pixel and we use distributed property. And now I'm going to say it, we then height to these items. For now. I want to use two column with whatever value. So I'm going to use grid template columns property. I'm going to use 3-bit value. Repeat two comma with one FOR value. If I said this file, you can see the result. And also I'm going to provide height to our row. Somebody use grid template columns property. And once again, I'm going to use repeat V Lu Bu rows with 150 pixel height. If I said this file, you can see the result. Suppose I don't want to use fraction value, so I'm gonna type 100 pixel. If I said this file. Now you can see the result. Now our column with these 100 pixel width that I want to show three column in our rule. If I set this file, you can see the result. And now I want to adjust our fourth-grade item in this place. For this, we need to use two values, autofill and auto feet. Let me show you. So in this place, I'm going to type autofill. If I save this file, you can see the desert. It automatically set our four good item after the third grade item. Similarly, if I use the auto fit value, let me show you and said this file. Here you can see there is no changes, but there is a basic difference. If I use autofill value, it going to create extra track. Let me show you. So I'm going to type auto field once again. And if I turn on my developer toolbar and click on this icon. Here you can see there is a space for three grid items. Because our container, we these 700 pixel and we set our grid item with a 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. Each create the track according to the grid items. Suppose I want to shift our fourth column end of this container. So I'm going to use grid column, individual, greed, column end. And I'm going to sit position minus one. If I set this file here, you can see there is no changes because out of it property doesn't create extra trick. But if I use autofill property, let me show you and then set this file. Now you can see the result. And if I turn on the grid lines, now you can see it clearly because autofill poverty create extra column. That's why we can move our fourth-grade item end of this container. So this is the main difference between auto-fill and auto fit value. And now I'm going to use min-max function for our column. So I'm going to remove this one and save this file. And first I'm going to tie feet. And then I'm going to use min-max function. I want to set minimum container release 150 pixel and maximum up to one effort of a loop. If I said this file, you can see the result. But what happen if I reduce the container read? So I'm gonna type 70 percent container read. If I said this file here, you can see, here you can see our fourth-grade item shrink down. And if I show you my computer section here, you can see now our container with these 546 weeks. And we said our minimum item with 150 pixel. If we multiply 150 pixel width four, is going to return 600 pixels. And as you already know, our container with below then 600 pixel, that's why it shrink down our fourth-grade item. And if I increase the container read, let me show you. Now you can see it's set our fourth-grade item in our first row. And if I show you my container read here, you can see it's above 600 pixel. The soil, it fit into this row. And similarly, if I show you my greed item with here, you can see our grid item with these 167 pixel. We cannot reduce our grid item with below then 150 pixel. And if we try to reduce our grid item with forcefully, let me show you how you can see it shrink our grid item in the second row. And if we tried to reduce more, how do you can see it's also shrink our third grade item in the second row because we cannot reduce the grid item with below then 150 pixel. So without using media query just using auto fit value, we perfectly create our container responsive. Similarly, if I increase the browser with hair, you can see the all the grid item in a single room. And if you notice, you can see it's also increase the item with now the item with these 145 pixel. If you want to show all the grid item in a single row, then you should have 600 pixel minimum container weed. And if I reduce browser we too much and increase the container with percentages, something 85 percent is. And also I want to increase the minimum width. So I'm going to increase it up to 300 pixels. If I save this file. Now you can see total for rule. So now it's look like total responsive. And as you can see, we said height for two rows, 150 pixel height. I hope now the concept is clear for you. What is autofill value and auto fit value. So thanks for watching this video. Stay tuned for our next tutorial. 14. CSS Grid Fit Content Tutorial: Hello guys, Good to see you back. In this tutorial, we are going to learn a new property related CSS grid, which is Fit content. So let's see how we can use it practically. Here you can see side-by-side, I open my Visual Studio Code editor and my browser using web server extension. And I already created SML document name index.html. Here you can see inside the parent container, we have total six grid items. Basically fit content property working like max-width property. So let's use this property. So I'm going to remove the previous one. And I'm going to type. Suppose I want to show two columns, feet contained, some group type fit contained. And inside the parentheses. And I'm going to say 200 pixel maximum width for our first column. And similarly for our second column, I'm going to use Fit Content property. And for our second column, I'm going to use for a 100 pixel next to it. If I said this file here, you can see the result. Here. You can see for first column we take 200 pixel width and for second column we take 400 pixel width. But if you notice, you can see our item with these according to content size. Let's take another column with one FOR YOU, some group type 1 effort. If I said this file, you can see the result. If we say it fit content value, we cannot extend our column more than a 100 pixel. Similarly, we cannot extend our second column more than 400 pixel. Let's have some contained in our first item. So inside the first item, I'm going to type load them. 30. If I said this file here, you can see the result. If I turn on my grid lines and show you my cell we'd here you can see our first grid item extend up to a 100 pixel. If we use Fit Content property, we cannot extend with more than 200 pixel. Similarly, if I add more contained in your secondary right in, 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 extends up to 400 pixels, not more than 400 pixel. Because we said maximum width of this grid cell using Fit content property. And for our third column, we use fraction value. So 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 contained in this item. For this, we can use min-max function in our rules. Let me show you some to remove this one. And I'm going to say it. Min-max inside the parentheses. Here we can set minimum height for our grid item. I want to say it to a 100 pixels minimum height. And 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 a my N dash contained. If I said this file here, you can see the result. Now it's looked perfect. We'll learn about main content property in your previous tutorials. So I hope now you understand what is that use gesso fit content property. So 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 are going to learn a new grade item positioning property, which is water property. So let's see how we can use this property. As you can see, side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. And I already create HTML document name index.html. Here you can see inside my parent container, we have totaled six grid item. So using order property, we can change grid cell position. Suppose you want to move first, greet sale in sixth position. For these, you can use whatever property. In our previous tutorials, we learn about positioning. But in this tutorial, we're going to position our cells using order property. Suppose I want to move the item one in six position. For these, I'm going jumping to the item 1 selector and I'm going to use water, property, order and hair. I'm going to pass one video. If I save this file. Here, you can see it automatically move our contained in the last position, wondering start from opposite direction. That's why it's come to the last place. And similarly, if I use 0 value and then set the file. Here you can see there is no changes in water. 0 is the default value of this property. But if I pass water to and then set the file here, you can see it's also come to the first place because there is no order one. Suppose now I want to move our second item in first-order. For that, I'm going to jump into the item 2 selector and I'm going to type order property water one. If I said 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 said this file, now you can see the result. This is our water one position, and this is our ordered to position. And this is our, what, a three position. Firstly, what are our item one in second position. So it's come to the second position. And then we, what are our item 2 in first position. So it's come to the first position. And then we will do our fourth item in third position. And you can see the result. It's come to the third position. And as you can see, we do not work with card item, fifth item and sixth item. So it has came forward. Suppose now you will want to move the third item behind the fourth item. So I'm going to use water property once again, water, and I'm going to pass for value. If I said this side, you can see the result. Now you can see our third idea came to the sixth position because we use forbidden. So our first-order position is this one, and this is our second-order position, and this is our third order position, and this is our fourth quarter position. So now it's careful you how its work. So thanks for watching this video. Stay tuned for our next tutorial. 16. Nested Grids Tutorial: Hello guys, could pursue back. In this tutorial, we are going to learn about nested grids. So let's try to understand what is nested greet. Here you can see a great container. And inside this container we have total six greet sales. Now you decide to add more details inside this grid cell. Then you need to convert this grid cell into a good container. And then you can add more red cell inside this container, something like that. And we call this whole system nested greets. Using nested grid, we can convert a parent bristle into a grid container. So let's start the practical and see how we can create it. As you can see side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. And I already create estimate document name index.html. As you can see, my parent container, I have four reach sill. And now I want to add more grid cell inside the fourth grid cell. For this, we need to use distributed property for item 4. So instead the item forth selector, I'm going to use display property, display greed. Now it convert our sale into a greet container. Now we can add more red cell inside this container. Let me show you. So I'm going to remove this text. And instead this div, I'm going to create four more div, div dot SUB, SUB 1. And I'm going to duplicate this line three time. And also I'm going to numbering their class name sub two, a sub three, and so forth. And instead, this group sales, I'm going to type capital a, capital B, capital C, and capital D. If I said this file, you can see the result. So as you can see, we create for each sale inside the fourth container. And now I'm going to assign we'd to our sales. For this, I'm going to use grid template columns, property grid template columns. And I want to SN2 column with one if our value 1, if r, one afer. If I said this file, you can see the result. Let's set a background color to this div. Otherwise, it's not going to be visible. So I'm going to select item 4. Inside the item 4, I'm going to select all the divs. Then inside the curly braces background rate. If I save this file, you can see the result. And as you can see, there is no gap between the cells. So I'm going to use grid gap property, greed gap, 10 pixel. If I said this file. Now you can see the sales clearly. So as you can see inside the parent grid container, we have total force IHL. And then we convert our fourth grid cell into a grid container. And inside this container, we also have four grid cells. And we call this process nested greet. Using these inside a great item, we can insert more read items, and also you can insert more read items inside these subgrade items. Suppose you want to insert four more grid items inside this cell a. Then once again, you need to follow the similar procedure. First unit to use display property greed for this cell. And then you can add more read item inside the cell. And if I show you my developer toolbar, you can see inside this greed, we have another grid structure. And you can see the grid lines of this grid structure. And if I show you my layout section here you can see in grid overlays, we have to put a two grid system, our main container grid system, and next hour Overlay grid item system. And you can turn off and turn on your grid lines according to your choice. So thanks for watching this video. I hope notes clear for you what is nested grid. Stay tuned for our next tutorial. 17. Overlapping Grid Items Tutorial: Hello guys, Good to see you back. This is our last tutorial related CSS grid. After this tutorial, we're going to start CSS flexbox. In this tutorial, we are going to learn what is overlapping grid items. So let's try to understand what is overlapping grid items. Here you can see a great container. And inside this grid container we have total three grid item. And 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. So let's see how we can create the overlapping grid items. With that, we are going to learn. We can change these tech order of this grid items. Stack what I mean SSID index. So let's start the practical and tried to understand how it's work. Here you can see side-by-side, I open my Visual Studio Code editor and my browser using Live Server extension. And I already created HTML document name index.html. And as you can see, I already create a grid structure. And there are three grid item in this grid structure. And as you can see, our container with these 400 pixel and our column with these 200 pixel, and also our row height is 200 pixel. So let's try to overlap the grid items. At fast. I want to spend our red greed item. I want to spend it up to two column. For this, I'm going to use grid column property. One from column one to span two. If I said this file, you can see the result. We spent our item two column. And also I'm going to spend this item row wise with two column. Let me show you. So I'm going to use greet draw property. Greed grew from row one span up to row 2. If I save this file, you can see the result. So now our first item spend up to two column and to rule and our secondary Devon third item is our implicit grid items. And now I'm going to assign a maximum. We'd all of these grid items, as you know, we use this item class, all of these grid items. So I'm going to use max-width property. So I'm gonna type max wheat 200 pixel. If I said this file, you can see the desert. And now I'm going to align our fossil vertically. Some type, align self. Start. If I said this file, you can see the result. And if I show you my grid lines here, you can see it steak, full area because we use align sell property. That's why it's looked like smaller. If I comment out this property and set this file, you can see the result. But to create an overlapping grid items who need it. So I'm going to undo the comment and save this file. And now I want to move our second item, center of this page. For these, I'm going to use some properties for item 2. If I paste the code and set the file, here, you can see it overlap our first grade item, but I want to place it middle. So I'm going to use align sell property aligned Sale Center. If I said this file, you can see the result. We vertically align our item center of this container. And now I'm going to horizontally centered this grade item. For this, I'm going to use and justify silt property. Justify self center. If I said this file, you can see the result. And for our third grade item, I'm going to use some property. But I want to align our content inside of this container. So I'm going to use align self end and also justify self end. If I said this file, you can see the result. I don't need this orange background color, so I'm removing it. Now all the grid items are taken. Same amount of area will just align the items start, center, and end. But the column size and position is same. And now I'm going to add some text in all the items. So in item one, I'm going to type Lorem 15. It going to add 15 award 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 said this file, you can see the result. Hey, we need to add more character to overlap this item. So I'm going to paste this character once again. If I said this file, now you can see it's overlap each other. And now I'm going to show you how can we change this tech order of this item to change stack water who need to use our old property, which is 0 index. So now I want to bring the first item to the forefront. For this, I'm going to use that index property. So I'm going to type SSID index one. If I said 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 hole. For this, we'll need to use SSID and x2 value, some type. They'd index two. If I said this file, you can see the result. So 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. And you can see the result. Now all the great items are still exist in the same place. And now I want to show our green grid item for this, we need to use SSID and is we'll once again zed index 3. If I said this file, you can see the result. I hope note slur your doubt about overlapping. So thanks for watching this video. Stay tuned for our next tutorial. 18. CSS Flexbox Introduction Tutorial: Hello guys, Good to see you back. This is the introduction video, CSS flexbox. So let's try to understand what is flexbox. Basically, flexbox is a new module in CSS3. It's make alignment very easier in different directions and different order. Skips container the ability to expand and shrink elements to best use all the available space. So this is the best way to use all the available space. And 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 Flexbox, you can create one-dimensional layout very easily. Css grid is not one-dimensional, it is two-dimensional, but CSS Flexbox is one-dimensional. You cannot handle row height and column wheat together at a time, you can handle only one-dimension row, otherwise column. Suppose this is our main container, and inside this parent container will have four subtypes. We'll call the container flex container. And if you want to create it flexbox, then you need to use display property. Display flicks. In our parent container, we need to use this property and then it convert into a fixed container. And all the items inside the flask container. Now they are flex items. As I told you earlier, flexbox working one-dimensional way row-wise. Otherwise column wise, if we talk about rules, means horizontal way. For that, we'll call the x's main x's. Otherwise, you can call it rolls. And if I talk about vertical dimension, then we'll call it cross excess. Otherwise, you can call it columns. So let's see a little demonstration how we can use the flexbox. Here you can see side-by-side, I opened my visas to do corridor and my browser using Live Server extinction. And I already create a HTML document name index.html. And as you can see, there is a parent div which classes container. And inside this parent container, we have totaled four items. And as you can see, we use different classes for all of these. Item one, item two, item three, and item four. And I already set a background color to our all the sub deeps. And as you can see, our parent container with these 600. And also I said 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 flexible. As you can see, we have total four rule in our parent container. If I said this file, as you can see, it automatically save all the items in one group. So now it's little clear for you. When we convert our parent container in a flexbox, whatever item in your container, it's coming one room in our upcoming tutorial where Winkle learn some new properties. So let's see the properties. There are total pool property in that you can use with flexbox. Flex direction, flex wrap, flex, low, flex, grow, flex, shrink, flex basics, flex, justify content, align content, align item, align self at last quarter. And for alignment, we use this property and we already learned about it in our Greek chapter. So in our upcoming video, I'm going to cover all the properties. So thanks for watching this video. Stay tuned for our next tutorial. 19. CSS Flexbox Flex Direction Tutorial: Hello guys, Good to see you back. This is the second tutorial related CSS Flexbox. And in this tutorial, we are going to learn flex direction property. Let's see the videos of this property. As you can see, we have crippled for volutes related CSS flex direction, row, row reverse, column and column reverse. And row is our default value in this property. So let's start the practical and see how it's work. Here you can see side-by-side, I open my Visual Studio Code editor and my browser using Live Server extension. And I already create HTML document name index.html. And as you can see in my document, there is a container. And inside this container we have total four flicks item. And as you can see, we already convert our container place box. And you already know that if we use display flex property, then it put our items in a single room. And in this tutorial we are going to talk about flex direction property. This property is related to container, not the items. So I'm going to use it after display property. And I'm going to type flakes direction. And our first Belize rope. If I said this file here you can see there is no changes. And as I told you, row is the default value. If you use it, it's not going to effect on your structure. And by default, row follow the lead to right direction. But if I use row reverse blue, let me show you and then set the file. Now you can see the result. Here. You can see it's reversed the order of our item. Now the direction is right to left. So this is a use case of row reverse value. And our next victories column, let me show you some of the type column. This will works vertically. If I said this file, you can see the result. Basically it follow top to bottom order, as you can see, first, second, third, fourth. And if you want to arrange it bottom to top, then you need to use another value, which is column reverse. If I said this file, you can see the result. Here. You can see our first item came to the bottom, dense come second, and then third. And our last item came to the top position. So it is basically changed the direction from bottom to top. And if I use only column value, then the direction will be top-to-bottom. So this is the flex direction property, as I told you earlier. It's work on one-dimensional way at a time. It's always row-wise, otherwise column-wise. And you cannot handle row and column together. So I hope now the flex direction property is clear for you. So thanks for watching this video. Stay tuned for our next tutorial. 20. CSS Flex Wrap & Flex Flow Tutorial: Hello guys, Good to see you back. This is another tutorial related Flexbox. And in this tutorial we are going to learn CSS flex wrap, and CSS flexed. So this two new properties are very important in our Flexbox. So without further discussion, let's start the practical. As you can see side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. And I already created estimate document name index.html. And here you can see in our container, we have total four flex item. And our container size is bigger than flex items. And if I increase the flux item in this box, otherwise, if I reduce the container wheat, in that case, items that over flown to this container. Let me show you. I already create six other flex item. And I'm going to uncomment this deep tags. And I'm going to save this file. Now you can see we have total 10 flex item in our container. And now I'm going to reduce the container read using width property. So I'm going to type wheat 400 pixel. If I said this file here, you can see the result. Here you can see fixed items are overflowing into this container. Similarly, if I use height property and enrich the height to 100 pixel and set this file. You can see this result. But if I change the flex direction, let me show you flex direction column and insert the file. Now you can see once again, flex items are overflowing into this container. To solve this kind of problem, we have another flex property, which is flex wrap. Basically, flex wrap has three valence, know REP, REP and rep reverse. Note F is our default value. If you use or not, it going to overflow your data. So let's see how it's work. For this. I'm going to use flex direction row. And, and also I'm going to set a width of this container. We'd 400 pixel. If I said this file, you can see the result. And now I'm going to use flex wrap property, flakes wrap. At first I'm going to use noted video. If I said this file header, you can see there is no changes because this is the default value of this property. So it's not going to effect the flex items. And if you want to repeat, you need to use revenue. Let me show you. If I save this file. Now you can see the result. Now you can see our container with these steel for a 100 pixel, but it perfectly wrap our flex item inside this container. As you can see, it automatically come to the next line. Let's add some margin between this flex item. So I'm going to type margin five pixel. If I said this file, you can see the result. So now it's clear for you when data overflow from the first line, then it's automatically came to the next line. Then it's automatically come to the next line. But if I change the flex direction column, and also I'm going to use height property, height 200 pixel. And I'm going to comment out the width property. If I save this file. Now you can see the result. Here. You can see it's sitting vertically order. First, second, third, fourth, fifth, sixth, seventh, 89, 10. I hope now it's clear for you how items are sitting vertically water. And now I'm going to use the newest value of this property, which is rep reverse. So I'm gonna type wrap reverse if I said this file, now you can see it is just reverse the order of items. And now it start from the right side. And indeed lips site. And if I change the flex direction row wise and say it without this container, and comment 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, sixth, seventh, 8910. Basically, we use href property to control overflow data. I hope you got the point. And our next property is flexible. What is flexed law? It is a shorthand property of flexor F and flex direction. Using one property, you can control the, both the properties and we can use it in one line. So I'm going to use flexbox property, flex flow, hair fast only to provide flex direction with blue and then we need to provide flex revenue. So first our fixed direction abilities column and, and our flexibilities wrap. And I'm going to comment out these two property. And also need to comment out with property because we use Columbia Lu. And I'm going to uncomment the height property. If I said this file, hurricane see is work perfectly. If I use noted below here. And save this file. Now you can see our flex items are overflowing to this container. Basically, flex ploy is one-liner of this to property Flex direction and flex wrap. I hope now the concepts are clear for you. What is flex wrap and flexible? So thanks for watching this video. Stay tuned for our next tutorial. 21. CSS Flexbox Justify Content Tutorial: Hello guys, Good to see you back. Once again, I'm come with an electrode to really related CSS Flexbox. And in this tutorial, we are going to learn about a new property named justify content. Basically, we use justify content property for horizontal alignment. And this property come with total six value. Let me show you our Fasciola is flexed dark. It is also a default value. This complex in center space alone, space between spaced evenly. It is very similar to our Greet property, justify content. And we already learn about each grid section. So let's start the practical and see how it's work. As you can see side-by-side, I opened my videos recorded heater and my browser using web server extension. And inside the parent container, we have proton for flex item. And now I'm going to align it using justify-content property, some type justify contained. At first I'm going to use center window. If I said this file, you can see the result. As you can see, it moved all the flex item center of this container. And next I'm going to use flex end value, flakes end. If I save this file. As you can see, it achieve all the flex item right corner of this container. And flexor is a default value of this property. If I use this property, let me show you unsatisfied. As you can see, it's a default value. If we use any flexible or not, it going to return this result. Or next release space between some new type, space between. If I said this file, as you can see, it move our first item and last item into end of this container. If I remove the margin, notes more clear for you. And also I'm going to remove the padding one. Now you can see the result. And it going to add all the space between these items. It equally divided the space between flex items or next week Louise, space around. Let me show you if I said this file. Now you can see it provides equal space first and lust of this item. And between these items, it provide double-space. As you can see, it provides equal space before the first item and update the first item. Similarly, it provides equal space before the second item and approved the second item. That's why the gap between items are develop this first gap. And now we're left with Louise space evenly. If I use this little inset, this file, as you can see, it provides similar amount of gap between flex items. So I hope notes clear for you how we can horizontally align our flex items. So thanks for watching this video. Stay tuned for our next tutorial. 22. CSS Flexbox Align Items Tutorial: Hello guys, Good to see you back. Once again, I'm come with a new tutorial related CSS Flexbox. And in this tutorial we are going to learn align items property. We use align items property for vertical alignment. And we have total five related align items property, flex, flex, end, center, stress, and baseline. If we use flex start value. And then you're going to put my flex item top of this container. And if we use flex end value, then you're going to put my flex item bottom of this container. And if you want to allege centered vertically, in that case, you can use center value and stretch is our default value. But baseline video is different one. So let's start the practical and see how it's work. As you can see side-by-side, I open my Visual Studio Code editor and my browser using web server extension. And as you can see, you already create a container. And inside this container we have proton for flex items. And as you can see, we use display flex property. Using this property, we can convert our container as a flex container. So I'm going to use this property, which is a line item, align items. And our facilities. Strange. If I said this file here you can see that is no changes because it's the default value. We are working with vertical alignment. So we need to increase the container height, height 500 pixel. If I said this file, you can see the result. By default a line item use Stretch value. And now I'm going to use the first value, which is flex start. If I said 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 save this file, as you can see, all the items are alanine bottom of this container. And if you want to align this item center of this container, you can use center will align items center. You can see the result. It align our all the flex items center of this container. Let's add little height in our third item. So I'm going to use height property. Third item, height 50 pixel. If I said this file. As you can see, our third item, height is 50 pixel. And now I'm going to talk about baseline concept. If I use Flex n-value, flex end and said this file, as you can see. As you can see, items are aimed at baseline. But if I use start value and satisfied, now the baseline ending top. And now I'm going to talk about our ListView, which is baseline. But at first I'm going to increase the part item font size, font size. So I want to use forms as property. Font size 24 pixels. And now also I'm going to reduce second item font size. When we use font size will once again. And I'm going to use 10 pixel for that. If I said this file, you can see the design. Now you can see the text baseline alignment is different. And now I want to align this text in a same baseline. For that, we need to use baseline property. Let me show you text, align, align items. I'm going to use baseline value. Baseline. If I save this file, you can see the result. Now all the texture come in same baseline. And if you want to use horizontal alignment, yes, you can use with that just unit to use justify content property. Let's use it. Justify content center. If I said this file, you can see the result. And also you can change the flex direction as you know by default, flex direction is row. So let's change the flex direction, flakes direction. I'm going to use column below if I save this file. As you can see now, our L and M property working horizontally, not vertically. If I use Flex End property. And satisfied, as you can see, it's aligning horizontally because we change x axis direction and a y axis direction using flex direction property. Now it's follow the opposite cross axis. So this is it for this tutorial. I hope now the concept is clear for you. What is a line item property? So thanks for watching this video. Stay tuned for our next tutorial. 23. CSS Flexbox Align Content Tutorial: Hello guys, Good to see you back. In this tutorial, we're going to learn CSS align content property. In our previous tutorial, we are learnable align items property. This property also used for vertical alignment. As you can see, we have lot of different related align content property. Flex, start flex in center, stretch, baseline, space around space between and space evenly. In our previous tutorial, we are learn about align items. Both the properties are used for same purpose, but there is a different between two. This property aligned I didn't use for single row alignment, but Alan continues for multiple row alignment. Suppose you're contained, not covering a single rule, it wrapped and come to the next true. Then we need to use align content property. So let's start the practical and see how it's work. As you can see side-by-side, I opened my Visual Studio Core eater and the builder using lead Server extension. And as you can see, I already created estimator document name index.html. And here you can see in my parent container, we have put alkyne flex items. So at first, I'm going to assign weight to this container. After height, I'm going to type weed with the world to 450 pixel. And as you can see, our data is overblown to this container. In this case, we need to use flex wrap property, some new type flakes wrap. And I'm going to use revenue. If I said this slide, you can see the result and the node previous tutorials, we'll learn about flex wrap property. Now you can see over fluence items or came to the next rule. And as you can see, our items are already streets. So let's use our property LN contained some new type, align content or phosphorus straight edge. If I save this file, as you can see, there is no changes because stretch is our default value. But if I use flexible and said this file, now you can see it's moved vertically top. Similarly, if I use Flex envelope and said this file, no items and move vertically in. Similarly, if I use center value, then said define. Now all the items are center of this container. Our next property is space between. So I'm going to type space between. If I save this file, you can see the reserve these villi going to fill all the space between two rules. And 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 going to double eat between this rule and the same amount of space. Bottom of the last rule. This come out next value, which is spaced evenly, summertime space evenly. If I said this file, now you can see it add same amount of space between rules. This property only works when we have multiple rules. If I remove some flex items from this container, let me show you and then set this file. Here you can see all the items are moved vertically center. Now this property not going to work properly if I use different value, something space between. And then said this file here you can see is not work. This property exactly work when we have multiple rules. Otherwise, it's not going to work if we have single rule, in that case, we need to use an item property. So I hope notes clear for you what is align content property. So thanks for watching this video. Stay tuned for our next tutorial. 24. CSS Flexbox Align Self Tutorial: Hello guys, Good to see you back. In this tutorial, we are going to learn CSS, Flexbox, align sell property. This property also used for vertical alignment, similar to align items property. As you can see, for this property, we have some similar values. Just we have one new value for this poverty which is ARPU, dense, come flex, flex, end, center, stretch and baseline. Now the cushion is what is the difference between align items property and Alan sell property. Align sell property basically use for individual items. Suppose you want to Vertical Align individual flex items. In that case, you need to use this property. As you can see in this image. Remaining one flex item on the flex items that came to the top of the container. Because for this particular sale, we use a lens cell property. Because of these, we have been able to differentiate. So let's start the practical and see how it's work. Here you can see side-by-side, I opened my Visual Studio Code editor and my browser using lips ever extinction. And I'm going to use my previous HTML file for this example. As you can see in our flex container, we have total five flex items. And as you can see, by default, items are stressed. First, I want to align all the items top of the container. So I'm going to use align items, property and line item flexed. Or if I said this file, you can see the desert. And now I'm going to use align sell property. Because now I want to align one individual sill. Suppose I want to move number three sill, end of this container. Then we need to jump into the identity selector. And you need to use this property alliances. And I'm going to use flex end value flakes end. If I said this file, you can see the result. We successfully move individual sale end of this container. Remember this property is used for vertical alignment. Let's move number to sill center of this container. For these, once again, I'm jumping to the number 2 selector and I'm going to type Alan sell property alone, sill center. If I said this file, you can see the result. Let's talk about our new poverty, which is auto. If I use auto MLU in our item two and then set this file. Here you can see it's 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 said this file, as you can see, our autofill automatically follow this alignment. If we use align self or to their needs, relatively work with align items. Value if we use interview is also act like a center value. If we use Flex envelope is also act like a flex envelope. Just you need to remember align sell property only work with Flexbox sales, not the Flexbox container. So I hope now is clear for you. What is a lens cell property and what is that you scheduled this property. So 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 what our property. This property works the same way we did in the Great. So let's start the practical and see how it's work. Here you can see side-by-side, I open my visits fluke or eater and my browser using Live Server extension. And I already created estimate document named index.html. And as you can see inside the flex container, we have total six flex item. If you remember, using water property, we can change sales positions. Suppose you want to move forth sill in number two position. In that case, we need to use what our property. So I'm going jumping to the item five selector and I'm going to type order at fast, I'm going to pass 0 value. This is the default view. If I save this file here you can see there is no changes in their water. But if I pass minus1, let me show you and said this file. Now you can see, now you can see are flipped IT move first place in this water. By default, all the cells order property valuer 0. So what does start from minus value? For item 5, we use minus VU. That's why it came first. So this is minus one and also I'm going to type minus 1 in fifth place minus 1. Similarly for our third item, I want to pass minus2 water minus two. If I said this file. Now you can see it came first place in our water because a minus 2 is less than 0 and minus one. That's why it came first. And as I told you earlier, Louis XVI, who came first. So I'm going to type minus 2 in third place. Minus 2 first, minus 2 then comes minus one, then 0000. But if a pass one value in number 1 item, let me show you order one and then satisfied. You can see it has came to the right side because one is greater than minus value and 0 value. That's why it came up to 0. So I'm going to pass plus 1 hair. It's MOOC Louis to greater value. Now if I pass, what are two inner fourth item, let me show you water to and if I said this file, as you can see, now it's akin to the last place because plus 2 is greater than 01. If I save this file. Now it's clear for you. Now you can clearly understand how orders our work. We do not set any water in item number 2 and item number 6. So by default the order of these items are. So I hope now you understand the watering. Now the quotient is where we use the order property when you want to make your website responsive. Then whatever is the most important property, indexes review, you want to follow this order. But in mobile view, you want to move item 4 in for space. In that case, what does property are very useful. So I hope you got the point. So 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. And in this tutorial, we are going to learn a new property which is flex grew. So let's start the practical and see how it's work. As you can see side-by-side, I opened my Visual Studio Code editor and my browser using Live Server extension. And I already create a HTML document named index.html. And as you can see in our parent container, we have six flex items. So let's use our new property. Basically, flex group or party not work with container, it worked with flex items. As you can see, Gary, the common class named nim items for all the flex items. So I'm going jumping to the item selector and I'm going to use our new property which is flex grew. Flex grow heroin, need to purchase numeric value if I put 0 and then set this file. As you can see, there is no changes if I pass 1 million here, so I'm going to type one and then set this file here. You can see all this space are equally divided to flex item. I hope notes clear for you how planes through property work. I bust to here and then save this file. As you can see, there is no changes because we equally divided the space, all of this flex items. That's why it's not going to work. So I'm back to my old position one. And I'm going to save this file. And now I want to increase item to wheat. Yes, we can do it. At first. We need to select the item individually, and then we need to use this property, flakes grow. And here I'm going to pass two. If I said this file, you can see the result. You can see here. Now it's doubled compared to other cells. Similarly, if I pass three and then set this file, now it's size these triple compared to all. And now similarly I'm going to use these same property in our item 4. I want to type flakes, grow, and I want to expand the wheat up to four time. So andropause for hair. If I said this file, you can see the difference. And if I remove the margin between sales, now it's more clear for you without item 2 and 4. All of this is viewer one. For item two plays group property value is 34 item for this group or party is four. So this property only worked for flex item wheat. Basically, we use this property when we need to provide equal-width all of the sales. So I hope now it's good for you. What displays grew property. So thanks for watching this video. Stay tuned for our next tutorial. 27. CSS Flexbox Flex Basis Tutorial: Hello guys, Good to see you back. This is another tutorial related CSS Flexbox. And in this tutorial you are going to learn flex basis property. This property is pretty similar to max-width property. Basically it handle flex item week. So let's see how we can use each practically. As you can see, side-by-side, I open my Visual Studio Code editor and my browser using Live Server extension. And I already create a HTML document name index.html. And as you can see inside the flex container, we have total 66 items. And as you can see, we use display property flakes and also we use flex wrap, were used flexor puberty because if item overflow and then came down. That's why we use flex wrap. And for every flex item, we sit a common width. As you can see, Lex grew one. We'll learn about this property in our previous tutorial. That's why all the items or take same amount of space. So let's use the property flex basis. So in item 1 selector, I'm going to type flakes basis. And here I'm going to pass 250 pixel if I save this file. As you can see. Now our first flex item with these 250 pixel. Now it's worked like maximum weight. Let's turn on the developer toolbar. If I select this div. As you can see, our first item with these 250 pixel, but without our first item, all the divs or 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 affect the width of this item one. And if we reduce the browser width, as you can see, now it shrink down. Because this property works like a maximum width. We can reduce the width of this item below then 250 pixel, but we cannot stress the wheat of this item more than 250 pixels. And now I'm going to use plexuses property, all of this item. So I'm going to comment out this line and I'm going to type flakes basis 100 pixel. If I save this file, at first, I'm going to increase my browser penalty. Now you can see still our first item with these 250 pixel, but without our first item, every items weeds are 100 pixel. And if I tried to increase the browser size little bit, let me show you as you can see, item five MOOC to the right corner. Because without first item, every items trying to maintain a 100 pixel width. And also they are tried to fill the space of this browser. Now, let's try to reduce the browser read and see what happened. If I try to reduce the browser read. As you can see, most of the items are shipped to the second rule, because we use flexor property. Otherwise they are going to overflow into this container. But if I reduce it a little more, as you can see, as you can see, there is no space for two items in a single room there. So I they are shrink down. But as you can see, we reuse the item 1. But remaining item 1, steal all the item weeds are a 100 pixel because they have space to extend up to their full width. But if I reduce it to more and more, as you can see, all the items are reducing their wheat. So I hope now it's clear for you, this property you worked like an max-width. Not only that, this property also work like a minimum width also. Let me show you if I comment out this line. And if we use flares group property for all of this item and save this file. As you can see, all the items are came to the one rule. We use threads versus property only for item 1. And for remaining one, we use flexbox property and our flex grow varieties one. And as I told you, it's worked like a minimum width property also. Let me show you if I tried to reduce the container wheat, as you can see, it going to affect all of this item we need without item 1, if I tried to reduce it more, as you can see, it not going to effect item one. Without item 1, all the items are reducing their wheat. And if we try to reduce it more, as you can see, our last item shipped to the second rule. But our item one still maintain the same week, 250 pixel. If we use flex basis property with clicks drew, Dennis, what like in minimum width. But if we use flex basis property only, then it going to act like a max-width. Not only that, hair we can use percentages will also suppose I want to use 50, 50%, percent. If I said this file, as you can see, it still work properly. Let's increase the percentage below 90 percent. If I said this file. Now it's clear for you housework. Now, every time our first item going to take 90 percent wheat 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.