CSS Grid for Beginners: Theory & Practice | Sergey Shtyrlov | Skillshare

CSS Grid for Beginners: Theory & Practice

Sergey Shtyrlov, Developer and Ed. Courses Creator

CSS Grid for Beginners: Theory & Practice

Sergey Shtyrlov, Developer and Ed. Courses Creator

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
47 Lessons (6h 5m)
    • 1. Introduction to the CSS Grid Course

    • 2. Tools to Follow The Course

    • 3. Exercise Files

    • 4. Grid Basics Introduction

    • 5. What is the CSS Grid

    • 6. Grid Container

    • 7. Gird Template Columns

    • 8. Grid Template Rows

    • 9. Grid Fractional Unit

    • 10. Grid Gap

    • 11. Grid Repeat Function

    • 12. Grid Column Start/End

    • 13. Grid Row Start/End

    • 14. Grid MinMax Function

    • 15. Grid Name Lines

    • 16. Grid Auto Fill

    • 17. Grid Autofill Autofit Difference

    • 18. Grid Auto Rows

    • 19. Grid Auto Columns

    • 20. Grid Explicit Vs Implicit

    • 21. Grid Auto Flow

    • 22. Grid Template Areas

    • 23. Inline Grid Shorthand

    • 24. Exercise 1 Introduction

    • 25. Exercise 1 Solution

    • 26. Grid Basics Conclusion

    • 27. Grid Alignment Introduction

    • 28. Grid Justify Content

    • 29. Grid Align Content

    • 30. Grid Justify Items

    • 31. Grid Align Items

    • 32. Grid Justify Self

    • 33. Grid Align Self

    • 34. Grid Place Properties

    • 35. Grid Area Alignment

    • 36. Exercise 2 Introduction

    • 37. Exercise 2 Solution

    • 38. Grid Alignment Conclusion

    • 39. Grid Practice Introduction

    • 40. Grid Partners Block

    • 41. Grid Navigation

    • 42. Grid Frequently Asked Questions Block

    • 43. Grid Features List

    • 44. Grid Pricing Plans

    • 45. Grid Places List

    • 46. Grid App Tiles Screen

    • 47. Class Wrap Up and Next Steps

  • --
  • 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.





About This Class

Hi there!

My name is Sergey Shtyrlov. I'm currently working as a Frontend Developer and do various courses on web development.

In this course you will learn how to create and use CSS Grids. We will cover all the main features and properties, learn how to align columns, rows and grid items inside a grid container and practice the usage of the CSS Grid in seven small projects.

This course is for beginners. If you know HTML and CSS basics, then you are good to go.

We will start right from the beginning and will continuously build our knowledge step by step. 

First we will dive into Grid Basics and its main properties: what it is, what elements it is comprised of, how to create different kinds of grid, use multiple CSS functions and distance values with it, explore implicit with explicit grids and how to construct grid in a more visual ways.

Then we will explore the grid alignment properties. You will learn what alignment properties can be used inside a grid container. We will go through each property and its values individually, look at what they can do and how they affect a grid and its items.

Finally, we will create seven projects using the CSS Grid in conjunction with other CSS properties, so that you would be able to practice your skills in creating CSS Grids.

Overall, the main goal of the course is to teach you how to create and use CSS Grids effectively, so that after taking the course you would be able to easily use CSS Grids in your own projects and work.

If you still haven't yet touched a topic of CSS Grid, then it is probably a high time to change this.

Let’s get started!

What's inside?

Grid Basics:

  • What is CSS Grid

  • Grid container

  • Grid track: Column

  • Grid track: Row

  • Grid FR (fraction unit)

  • Grid gap

  • Grid repeat function

  • Grid column start/end, shorthand property

  • Grid row start/end, shorthand property

  • Grid minmax function

  • Grid name lines

  • Grid auto-fill/auto-fit and the difference between two

  • Grid auto rows

  • Grid auto columns

  • Grid explicit vs implicit

  • Grid auto flow

  • Grid template areas

  • Inline grid and grid shorthand property

Grid alignment:

  • justify-content

  • align-content

  • justify-items

  • align-items

  • justify-self

  • align-self

  • place properties

  • Grid areas alignment

Grid practice projects:

  • Partners block

  • Navigation

  • FAQ block

  • Features list

  • Pricing plans

  • Places list with images and description

  • App UI screen with tiles

There are exercise files available so that you can follow along with me in the videos. The course also comes with the assignments so that you could practice the skills you have learned.

Exercise files

Meet Your Teacher

Teacher Profile Image

Sergey Shtyrlov

Developer and Ed. Courses Creator


My name is Sergey. I'am a self-taught frontend developer.

Starting at the age of 16 I was very interested in how the web works and how the websites were constructed. From that very moment I understood that tinkering with web technologies would be both my hobby and work. I've started learning and keep doing it nowadays.

My main point of interest is a front end development, animations and beautiful UIs. Most of my career I've been doing a lot of HTML and CSS stuff, worked on different companies and did a freelance work. Back in the days I also had much interest in working with Adobe Flash, published my own animation course and wrote some articles for the Smashing Magazine.


Today I continue working, learning and share with people the knowledge I've got.See full profile

Class Ratings

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

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

Your creative journey starts here.

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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


1. Introduction to the CSS Grid Course: Welcome to the sex is great. The Complete Guide course, This is great layout model is one or the latest major additions to the say suspect. Its main purpose is to give you an ability to divide your weapons into separate regions and said between them relationship in terms, off size, position and Blair as well as tables. Agreed layout enables us to position elements using columns and rows, but this is great, is far more flexible and allows us to create complex layouts that were really difficult to reproduce the traditional way before. So if you are still using flex books in combination with some spaces framework like bootstrap toe only great agree to lay out, then it is high time for you to learn how to do it Used native Say says great spec. After learning this, A says great, you will never look back as it will greatly simplifies. Approaches offer producing some of the layout persons that otherwise would require much more work from your site. Let's talk a little bit about the structure off the course. Basically, it is divided into three models. In the first and second modules, you will learn a Serie behind the sex is great and the shirt is completely dedicated to practice. In the first module we speak about, the main says has great properties. There will talk about what is a CS is great. Learn how to identify eats different parts. Great columns arose. Gibbs Use Repeat and Min Max functions. Define, explicit and implicit grew its tricks and soul. After learning all the Mainstay says good prophetess, we will move to the topic off alignment. The second module is all about the lemon properties and how to use them in the concepts off . The sex is great. We will go through each property, look at what values they give us and how they function. General speaking, you will learn how to position arose columns and the items inside this say says great container. The first and second, much also off the course are also provided with assignments. Event of each module to make sure that you have learned and understand this theory. Finally insert module of the course. We will take all the knowledge you have learned about the sex is great and put it to practice. There are seven small projects in this section in every project we will use their senses great properties in conjunction with other systems properties. To get the result, we won't. The practice section will help you to better memorize all the new properties. So the first module is about the main sets as Greece properties. The second module is about the alignment. And let me show you what projects we will do in the first project will use their CS is great to construct partners block. The second project is about building a simple navigation. Using this is great In the sort project we will build frequently asked questions block the ports project He's dedicated to creating a features list in the futures project, we will construct a press and plans block Project number six is about creating agreed with images description on a little bit off animation. Finally, in project number seven, we create a you eyepiece over fitness app utilizing their CS is great And some other interesting stuff like three D animations. That's basically it. The goal off the course east to teach you how to use the sex is great. At the end of the course, you will have s old understanding off. What is This? Is great and how to implement it into your own projects gives it sounds interesting to you than welcome on board. 2. Tools to Follow The Course: you know that the whole of the course you will need some tools. Refers to is a brother in which we will pray you and inspect our coat. Today was the best browsers for Web development. Eyes a Google chrome on Mozilla Firefox Developer Edition. You can download the Chrome browser at google dot com slash chrome and for folks at Mazzella that orc slash en us slash fire folks slash developer for frogs develop tradition has the most vast seer says great instruments. So I will use it in this course as my primary and frozen. And the second stool is a cold editor in which will type our coat you are free to use and you called agitate you like my personal preference is the visual studio coat I d. You can download it at coat that visual studio. That come was the V s coat. I also used the material seem by much Astorino and the material I can pack by Philip give in case you want to have a similar look off the agita that is initial set up you need to have in order to pull the course, get a brother and a coat editor installed on your machine and you're ready to go 3. Exercise Files: the course is provided with the excess wells, you can download them on the courses. Peach. One of the links is, as about step below the description and in other ease at the projects and resources. Step just simply concealing and saves the archive to your computer. Let's explores the excess files holder so it has a full instruction. First comes of folders with the sections inside the Section folder. You can see the name so different Pleasants and Zach responding numbers, and if you go inside one of this holders, you will see there, too. As of holders finish and start. The Start folder contains the files with which will start a lesson, and the finish holder contains the files with which is a lesson or assignment ends. That's basically it. If it weighs any problems with downloading the files, feel free to contact me if he has a discussion step on the course of speech 4. Grid Basics Introduction: Welcome to the second module of the course. Here we're alone. House alignment works. Insides agreed. This year says Great. Have six properties. Was elements alignment. They justify accountant, ally, incontinent. Justify items a line items justify self and alliance self. If you have for me that we slept box, you do understand that the names off the properties are identical to the flags books. Once most of these properties, we would apply to the great container, but some of them can also be set on greet items. In this section. We will break down every ally men's property and how it effects the great so that start with the 1st 1 in the next lesson. 5. What is the CSS Grid: Let's just talk about watches the sea says Greet. The concept of greet is were common in the real world a long time before the Web API it people have been using grid designs in newspapers, magazines, posters, books and so on. The same great principles will later incorporated into the digital design and what developers started to great webpages, part of which were based on the greet layout. At that time, there were no special properties and dedicated to creating a great for a webpage. That is why people used different solutions to imitate the great like tables, floats in line blocks and later, flags boxes. Besides that, may necessities frameworks were created that also allowed to construct agree three out with a bunch off HTML markup and CSS classes. Unfortunately, all these techniques had different problems. Was making a complex, great design that has led to the development of the new specification, which is called ceases greet layout. The standard allows us to create two dimensional greet layouts on the Web. The great specification is quite powerful. With the help of it, we can divide the weapons into different regions, defines the size off sections and set a special order in which we want elements to be displayed. Let's have a closer look at the structure of the sheikhs is great. I have prepared a special image for that case. You can find it attached to this. Listen, the great is made up over serious off intersecting lines just come as a great lines, which defines a great they can be horizontal or vertical and begin their number in starting from one. Here you can see, for example, the red border showing the line number three. Then we have great tricks. Great strikes can be horizontal, which are rose. In our example. You can see one off the rose in the light blue collar, and they can also be vertical, which are columns on our image. One off the columns is showed in the yellow color. Next, we have great gaps. These are gaps or gutters between rows and columns on the image. One off the gaps is shown with the red border grips optional and can be set on the month. Then we have agreed cell he just formed by an intersection over or on a call. Here it is in a green collar. Finally, we have a great area agreed era if swarmed with adjustment. Agreed. Cells, which define a rectangle in our example, itches over pink color and compressed off four great cells. So in our image we have a total off 25 grade cells. Five greets, trick arose and five greets drag columns. We also have agreed Gap, which gives us an empty space between the rows and columns and a single greet area off course. You will need some time to get used to these principles. So this is a saree behind this year, says Great. I suggest that you don't know the image at age true, the lesson and reference it when needed. That's now alone. How to use the CSS greet in practice with HTML and CSS. 6. Grid Container: in order to start using the series is great before its need to define the great container. Start by opening the exercise wells attached to this lesson in your coat agita. Here we have a simple HTML while with an order at least and 10 least items inside it. And inside the styles that CSS well, we have some general style like background are not. At least send it on the screen and least items we spread. Find wits and height, which also centers accountant inside of them. Let's open the index dot html file in the Broza and previous beach. So here we can see a blue gradient background and a simple least with items. Nothing special. If we open with the developer tools, we can also see in the layout step that the CIA says Great is not in use on this page. Let's change this on to make a greet container return to the court edge attempt in order to defines a great we need to set the display property on the parent element, which will hold all the great content in our case. It is the Arnold, at least with the glass off greet container. Let's open the style that sees us while and assigned to eat the display property was the very for it would be simply great. Now we can say is a while and return to the browser Reload on the beach It seems that nothing has changed. But if we opened the developer tools and check Zan or at least you will see that in the layout step some great properties have appeared. Check that you l greet container and display line numbers Check boxes. Now we can see the skim off our greet as well as agreed to lines. So we have to horizontal greet lines and 11 vertical once ze great scheme is also interactive. I can also harbor on the first element in the scheme and we immediately see that it is situated in the first draw. Banza fails to call he like our on the second element. It shows that it is in the second role but still has one called. The search element is in the sutra and one call him. And so you can also notice the blue greet label toe the right of the great container in the age demonstrate chur off our beach. If we have over it. The text states that this element behaves like a block element and lays out its content according to the great model. So we managed to define the great container, but usually it still looks the same. In order to make it look more like a greet, we need to start working with great tracks. First of all, we need to add more columns. Let's do this in the next lesson. 7. Gird Template Columns: the property, which allows toe at vertical grich treks or to say it simple columns is called Greet Template columns. It must be assigned to the greet container. There are no order. At least he's is a great country nha in our case. So let's add this property to the glass in its most basic form was appropriate except of the lengths radios, for example. He wants to have only two columns, and each column must have 200 pixel size. Then you simply write 200 pixels space 200 pixels. First Value tells that the first call must have 200 pixel wits, and the second will tells the same about the second call that saves a file. And Previ, it means Broza. Here we can see it. Our Great has two combs, each one with a week off, 200 pixels and five rows. Return back to the V s coat. Now I want to adjust the column. Sweets, containers, total wits is 1100 pixels. So let's make, for example, the first call 400 pixels and the 2nd 1 700 pixels. Save the file and go back to the frozen load off the beach Now we have the first column, 400 pixels and the 2nd 17 countries pixels. The great items have fix tweets off 200 pixels, so let's get straight to it, and they would occupy as a full column wits Save the file on previous the changes in the Broza. Now each great item feels the full weeks off its correspondent column. We can add as many qualms as we want. Let's make this time. Three columns greet Return to CVS Coat. What's that was the first schooling to 200 pixels was the second would be 500 pixels, and the 3rd 1 would be 400 pixels safe and preview Roosevelt, As you can see, everything is correct was a great tempered columns. Property can accept different well, this we don't have to use only pixels. Let me, for example, make F for Colin greet and each column would have 25% wits off its parent. Save the changes hands previous result in Sub Rosa Here we can see that age greet atom has awaits off 275 pixels, which is 25% off 1100 picks off. We can also, for example, use uber tweets units. Let's make a five Walmsley out these 15% of your poor tweets safe and preview again, and the group has changed. One more term we can also use are the Realtor weather's like E M or room. Let me, for example, set as if one size on the HTML element to 10 pixels. Now one room would be equal to that, will you? That's a sign, maybe five corpse to the great container, and each column would be 22 Grim, which is equal to 220 pixels. Save the changes and preview of little built. As you can see, each column is exactly 220 picks off. There are also some are the Raiders that could be applied to that property. If I change is aware there to out out 200 pixels, 200 pixels the size of the first columns would be determined automatically, while the sort and the force columns would have FX tweets off 200 pixels. There is also makes content, will you, which makes the weeds off the column determined by the wits off the inner content and they mean content. Wario, which makes the weeds off the column as minimal as possible. According to the inner accountant. What saves a file on a preview of the result? So now each certain colon has a Mexican tent where you and takes exactly the week off the content inside it, which is a text in our case and each for school takes is the minimum possible wheat, which is a world cell. So it was that his house agreed Template property can be used in its basic form. There also exists more advanced features which can be used in conjunction with it. We will take a look at them later in the course. Had this point, we're done with the columns. Next, we needs to explore how to set up Rose. Let's do this in the next lesson. 8. Grid Template Rows: the horizontal greet tricks. Oh, simply arose we can handle with agreed Template Rolls Property eight functions and uses the same Wilders as agreed templates, columns, property. We also must add it to the great container. First of all, let's Set has agreed. Templates, columns, property to three columns with the search of 3.3%. Wits on Edge column that will give us for Ross in total. Now we can get the greed Temperate Rose broke. 10. Let's keep it simple and assign a single. William was the first room, 300 pixels saves a while, and Previ it means a broza. As you can see, Jones agreed. Scheme. The first rule has exactly the 300 pixels height, while other rose stick to 200 pixels. That is because our great items have a fixed height off 200 pixels Letter sent to CVS Court on Get rid off that height, saves a while and return to the Broza. There are loads of beach Now We can see that are the Ross have a fight off 42 pixels? So basically this rose now use set out a well, you off the property. Let's sign some different ways to the rose. We have a total off for us. The 1st 1 is set, so let's change the others in the escort. I will give the fight off 100 pixels to the second draw, 200 pixels to the surgery and maybe F 400 pixels to the last room. Save the changes and previous M Penza Broza. As you can see, the sizing off all the rose is correct. We can also add some more us. Let me, for example, assigned the fuse role 2 50 pixels and the six roto 70 pixels. After saving, I reload the patience of frozen with the new Rose edit. But of course there is no content in sadism. Let's also try to set percentages instead of the pixel values. So I want to set four rows and each room must be 25% off the container height. We should also at the fixed height to the country in itself, so the percentages would work. Otherwise the auto will you would be used here. I have said the hearts to 400 pixels. Let's saves a file and previewed here we can see that each room has a heart off 100 pixels , which is a correct value. We can also apply AM over rain units for examples, assert, and the force rose should be City Room, which is equivalent to 300 pixels. In our case, SE is a well, Andrew Liu is a peach and the fight off the rose he's correct. We can also use some view port heart units. That would be, for example, for the first row 20% and the second raw would be 30% safe and previously revolt. Now the first draw has a fight off 100 to 7 pixels and the 2nd 1 295 pixels. Finally, let's make use off the world's weathers, so the first and the second drawer would have a radio off out. Oh, this sort would be my ex content and the force mean content with the Mex content would set the fight off the room dependent on the largest item in the room, and the main content would do the opposite. In order to see this. Let's set the one size off the cell. Seven ins html file. 2 40 pixels. It starts a so draw so the Mexicans property would apply to it and at the font size 10 pixel style to the cell Number 10 which is a force roar with the mean content property saves the changes and preview. Here we can see that the surgery size who are suggested to the size off the cell seven item it uses as a Mex content, will you and the Force room was suggested to the size of the cell 10 which uses them in content, will you? So this is how you can use the great template Rose property. Basically, it was a great template. Goals and agreed Temperatures Properties shares the same Syntex. The only difference here is that one property is used for setting up the collapse of the Great while another one there arose a great. There is also one more units value that this year and that we haven't got it. Let's talk about it in the next lesson 9. Grid Fractional Unit: this yes is great, has also introduced, and you legs where they called Correctional Unit. Or, if our for shirt therefore represents infraction off space inside the great container, you probably know that legs box has you, Nicolas. Well, this with which we can dictate how much available space the element would take comparing to its siblings. Would it be, for example, twice, Maybe three times bigger or smaller than the other elements near it? The same does the FR unit in the series is great. Let's give it That's right. Before we do this, deal it the custom for inside styles in the HTML file. At the present moment, we have three columns with searches 3.3% wheat each. As you understand, this well is do not cover the 100% off the wits off the container. So instead of the percentage Williams who can use the Far Unit I types of pulling into the Greek templates columns Property one. The Far 1414 Let's saves a file on preview. The result, As you can see, not much has changed, but now the wits is evenly distributed between three combs. Let's no changes a proportion, return to CVS Court and make the second school on equal to two fr. This means that the school will take twice as much space as ours that comes, save the changes and preview as a result. Now we can clearly see that the first and the sort columns 275 pixels and the 2nd 1 is 550 pixels, which is twice a space off course we can use for unions to specify, as many comes as we want. Let's, for example, make five. Kolbe's the first, and the Fuchs once would take three times my space. For that, we type three or four 14 one for 14 and three or four saves the changes and preview one more time. Here we can see that the first and the thief schoolrooms takes three times. Most place there's 367 pixels in total, and the rest of the columns have a week off 122 pixels. We can also apply and fire units to arose. Let's makes it feel strong. One far and the 2nd 1 for far. Here we can see that the first rule is now 80 pixels in height, and the second drawer is 320 pixels, which is really four times bigger. Therefore, units can also become buying toe with other lengths. Weathers Let me, for example, make the first column 15. Rim did. It is a few school and the signs of four school, um, 10 view port wits. This was the Rose. I want the 1st 1 to be 200 pixels. The second draw would be one of four, and the surgery three or four save the file and previously result in Sub Rosa. So the first column is now 150 pixels, the second to desert have almost equal weights, and the four steaks 10% off current Hubert with. As for the rules, the first row is 200 pixels. The second is 50 pixels and the sort three times bigger, which is 150 picks off. Everything is correct is understand fr. Unions are very flexible and can help to build a really diverse allee outs. They are essential in building. The sales is great, so I recommend to use them and combined with other lengths, will use when needed. I guess it's ever since we should know about their fire units. Let's move on. Frozen 10. Grid Gap: At the moment, we don't have any space between columns and a rose. Let's changes. The old way of doing it would be to assign some margin or even imagine two great self. But since has great specification provides us with a couple off properties that will make it even easier. As with the previous properties, we must use the new properties on the Greek container. Let's start with columns. The property is called column gap. You can also encounter a great column Gap Property. But the modern syntax is simply calling Gap. And for signing the space, we can use any lengths. Weather's like pixels percentages, GM's or rooms via poor tweets. Vieux Port tight. And so I was just said there will you to 20 pixels, save the file and previewed in the browser. As you can see, the gives between columns have appeared. Let's now switch to arose. The property is called a rock up, and the older parent is greet row gap. It's also accept all the lengths Weathers let this time assign it to to RAM, which is equal to 20 pixels. In our case, save the changes and previous them in the Broza now you can see the 20 pixels gap between the rows, too. We can also use a short and property to set the column and row gaps at the same time. First, let's get street off the column and row gap properties. Instead, type greet, Dish Gap or simply Gap, which is a more modern variant. This property can accept one or two wells. It was specify a single, will you? The column and row gap would be equal. That said it, for example, to 30 pixels. Save the file. Go back to the browser Andrew Lords, a peach. And here we see that the gap between the columns and rows have been increased. We can also provide different will use four rows and columns return to the edge of town. The first bill. You will give a gaps through the rose well that set it to 50 pixels. The second will. You will set the gaps between columns. I will type toe that five rim, which is equal to 25 pixels in our project. By the way, the property also supports different lengths. Weathers well, that saves a file and previously changes in the browser. As you can see, the gaps have been changed. So a simple is it you can set gaps in the CS is great. A short canned gap Property is the best way to set gaps to the greets, though sometimes you might find this situation where the column or row gap properties could also be used. That's pretty much it about. The gaps in the sex is great. Let's switch to the next lesson. 11. Grid Repeat Function: one more available asset in using CSS. Great is a repeat function. Let me show you how to use it. Suppose we want to have five column Greek with each column equal to one fr. You know the two senses. I have to write one of our five times. As for the rules, let's make them 200 pixel height. I have to type 200 pixels twice, saves the result and previewed in the Broza Zegra. It is looking good and have correct proportions. But imagine if we have a big greet ways. For example, 50 columns and 20 arose. We would have to type 144 columns 50 times, which is where a time consuming, on boring the same with the roast. And here's where the great repeat function comes to the rescue. Let's return to CVS Court and use it. It was agreed to repeat. Function is used. Insides agreed templates, columns and great temperatures. Properties that's use it for the columns. First get rid off all the one far statements, then type the word repeat and round briquettes and directly after it. The first where they were passed to the repeat function. He's the number off repetitions. We won't. In our case, we want five simple columns, so I type five and the second Ray earlier is the columns we wants to repeat. We only needs to repeat one a four column, so we just type one a far, save the changes and previous them into Broza. As you can see, everything looks with the same. The repeat function is present and is working correctly. We'll have to do the same with zeros. Return back to the Venus coat instead of writing 200 pixels twice, we type repeat around briquettes the number of times so wants to repeat, which is to and the Rose would want to repeat, which is a single raw 200 peaks off right, saves a file, go back to the Broza Reloads of Beach and ever since, still looks fine. As you can see, this year says, great repeat function has aware clean syntax and definitely will save us a lot of typing. You will have to set up a lot of repeated columns and rows. Let's make more complex examples and passed several columns or rows to the repeat function . Return back to the Venus coat this time I want to the first column to be 100 pixels, the second toe interim, the CERT 10% off the parents container with, and the sequence must be repeated two times. So in that case, the repeat function will set the line off this columns directly in the order we provide. The seconds would be 100 pixels column, 20 room call, Um, and 10%. Cool as we have, is to repeat two times. It will add a second sequence directly after the 1st 1 so we would have six columns in total. They have the result and previewed in the Broza. So now's agreed has six columns. The first column is 100 pixels, the second he's 20 room, which is 200 pixels. In our case, the search is 10% off the container wits. Then the sequence is repeated to the second time with the same order off the columns. Let's do the same. Force arose. First, I want to set agreed to three combs so that we would have more Ross to show. Who is that? A type. Repeat three times a single, one of for call. Then we'll make a sequence or for us. Let that be, for example, because if you're through equal to 150 pixels and the second one's that follow suite 300 pixels and the number of repetitions we need East to in this case the first row would be 150 pixels, the second rule 300 pixels. Then the next iteration will start the search. Call them would be again 150 pixels and the fourth school, um 300 pixels. After that, all the fallen rose will uses the out of value because we only specifies the repetition two times for two rows. What in total gives us for a rose? Let's preview is the result. As you can see, the first row is 150 pixels with the 2nd 300 pixels was assert again, 150 pixels, and the force 300 pixels ever since, is correct. Off course, you compares more columns and rows to the repeat sequence, and use other lengths will use as well. So this is a sex is great repeat function in a natural. Each is a very flexible, has a nice syntax and in most cases will definitely help you to save some typing 12. Grid Column Start/End: the next set, says greet properties will allow us to control individual columns. First of all, I want to assign a custom class toe, one off the items. Let it be, for example, cell one with the class off custom colon inside the sisters, while I will give it a background color off long green so that we can instantly tell where the column is situated. When we Previte in the Broza, we can easily say that it just her first column. Let's also set the Great Temple to Rose property to 200 pixels kite and four times reputation so that the fight off the Rose wouldn't confuse us. The first property to manipulate the columns is called Great Column. Start with the help of it. We specify the line at which the column must start in the great. Let's set it to one. Save the file and previously changes here. We can see that nothing happened because the Cell one is already at the first line off the Great. Let's turn back to the release court and change its position to the second line, save the file and previewed. Now the column starts at the second thing. Please also notice that as a great cells have also shifted to the right is the feel. School is now empty. You would change as a starting position on to make it. For example, set to three. All cells will shift. One column Rosa also have owner straight columns in total. Liken assigns a starting position wherever I like. Let them be for examples. If you disagreed, line well, let's save the changes and previous them. Look what happened Now. The cell one is not only starting as agreed Line five, but the whole Greek was forced to become five columns. So when you assigned the starting position for the column, police be aware off the maximum number off columns in your great Let's get back to the V s coat and rested to start in position to one. Next, we can assign the engine position with agreed column and property. Let's set the engine grid line to be three in this case that your school, um, would occupy two columns. Save the file and previous was the result. And indeed, it now takes two combs. You can also notice that the gap was also removed. Sell one occupies now is a solid two columns, he would return back to the Venus coat and changes the end in position to four. The Golden would occupy oldest records, and the result is predictable. We can also use the shortcut property for starting and and in positions off the column. The property is called Great Comb. Let's get rid off the start and and properties and substitute them with the new one it accepts. To Williams, the 1st 1 is a starting position. Let's assign it to one. Then we need to add forward slash. And after it was the engine position, which can be, for example, three saves a while and previ it into Broza. Now the Cell one occupies two columns instead of the grid lines. We can also use the Span keyboard, followed by the number it's tells. How many columns must this Target column spend? Let's assign it to spend, too, so that it will spend two columns. Preview of the changes, as you can see with the result, is the same. If I change it to spend three, it will off course spend all three columns, or we can simply use the grid lines and set it to agreed Line number four, and the result is also the same. It's up to you whether to use greed lines or this panicky worth. Use the Syntex, which you like the most. That was a great school in property in action. Now you're able to control the place and position off individual columns. What will greatly benefit your abilities to construct more complex and flexible greet? 13. Grid Row Start/End: the greed rose can be controlled the same way. Let's take our custom column Cliffs and assigned to It is a starting point, which is agreed. Line number one. To do that, we type greet row start and the sign the starting grid line and was end important. We type greed row and and the signs of ending greed line number. In that case, our column would occupy two rows, save the file and previously changes the custom. Coolum isn't agitated on two rows. You can also notice that the last straw is no longer 200 pixels in height. That's because we express why the height on this was a four rows, but the total number of rows now East Wife. So the last one doesn't take the fixed height off course. There's also a short and property for us. Well, that's really the previous properties and instead, type greed role. This time, let's position it on the second agreed line and occupies a space. Still, the Force Agreed line saves a file return to the Broza. Andrew loads a peach here against the that the fill straw is now occupied by cells 23 and four. The second and the surgeries occupied by our customs cell, and the rest is the same. The greed Rural property can also be used with the SPAN keyword. Let's return to the B s court and change the position of custom calm. It will start from the first raw and occupy three rows in total was that with type one slash span and the number stream save the changes and returned back to the brother reloads the page and our custom sell now occupies three rows and other cells were shifted beneath it. That's basically eat was agreed. Rowe Property as understand, both greets column and greed Row properties functions the same way. The only difference here is that one targets only columns and another rose. 14. Grid MinMax Function: the next, say says, Great feature I want to in charges to you. It's called They mean max function. It allows us to set the size range off minimum and maximum boundaries to rose and calls. The size must be greater than or equal to the minimal value and lesson or equal to the maximum. Will you? Let's put it to the youth. First of all, I want to delete the custom Colin Klass inside the index that HTML while so we have sells off the same size. Then let's switch to the CSS file. The meaning X function can be used either with repeat function, all by simply type in the amount off columns or rows we need. First, I begin with columns and without the repeat function, really did repeat function and instead type I mean Lex and the wrong briquettes directly after it. Inside the brackets, we need to provide to values that's just 12. You would be the minimal size off the column and the lengths weather's can be used here. Let me assigned to the colon the minimal size off 200 pixels. This means that the column size must not be less than 200 pixels under any circumstances. Then we add coma and assigns a second, will you? The maximum size off the cold let it be, for example, 300 pixels. So now that first call off our great would have a minimum size off 200 pixels and the maximum size off 300 pixels. Let's go presuming Mex function to motors so that we would have three combs in total save the file and previous result means of Rosen. Here we can see that though our greed has a plenty off free space available, the size of the columns is still kept at 300 pixels. And look what happens if I reduce the size Those of you port the size of the columns is gradually becoming smaller until the point where each column riches the size off 200 pixels . At this moment, if I continue to reduce the size of the window, the minimum size off the column is still at 200 pixels that is, immune extraction in action. Next, let's applied to zeros as well. Return to the V s coat. Did it the fixed right on the great Country. Now, this time, let's keep them um X function inside the repeat function. The number off repetitions would be the same. And let's substitute the 200 pixels, will you? With the Mean max function, Let's make the minimum size over US 100 pixels and the maximum said toe outta. Let's also at more text content inside the cell number five in the HTML file, Save the changes and return to the Broza Reloads a peach. Here we can see that all the rows except their own number two, who was set to the minimum size off 100 pixels as we have the maximum value off the Min max function set to auto the height of the second drawer is determined by the amount off content inside the cells. The cell number five years more text. So the fight off the second drawer was suggested to may exist. Text feels a cell. Finally, let's air turn back to the I. D. And Change has agreed Tempered columns, property to the repeat function. The repetition of radio would be three on that being my ex function inside it. The minimum size of the column would be the same 200 pixels, and the maxim will you want Correctional unit or one fr? Of course, he can use other lengths will use as well, like GM's Crims You Poor Tweets Height and so saves a file, as previously result. So here we see that Maxim size off the column is 350 pixels, which is the biggest amount it's can occupy in the current great country now. And if I my exit view port small, call them still keep the minimum size all of 200 pixels. Is that his house? I mean, Ex function works, as I mentioned earlier, it allows us to specify is the minimum and maximum size off columns and rows. This function is where useful and flexible, so make sure to remember it and use in your own projects. 15. Grid Name Lines: one more feature, says says great offers us is ability to name greed lines. And instead of using numbers and gives them meaningful names, let me show you an example of it. First of all, I want to delete the low room text inside the self number five in the HTML file presents which to the series as well and dress. It is a great templates. Columns property to want a far one far one afar and read implicit rows. Property to four fixed height rose 150 pixels four times save the changes and previously in the Broza with the deaf tools opened in Mozilla Firefox, we can see our greed lines horizontal and vertical. Right now we have four horizontal grid lines, four columns and five vertical grid lines for Rose. The first great line starts with the number one, and every next one is an incremental what? We also have an ability to gives agreed lines names that we want. Let's start with the columns. If you close as agreed structure, we can see that host comes as a great line number one. Then goes the first column, and after it comes to the second agreed line. Then comes the second column. It was a suit breadline, and so that's tried to give them names. Return to the V s coat, navigate to his agreed templates. Columns, property. In order to give names to the grid lines, we should stick to the same structure right before the 1st 1 of our Coolum. I add square briquettes and inside them the name I want to give to the first green line. Let them be, for example, feels great line. By the way, you can name grid lines, whatever you want. Just don't use the keywords like spin. Otherwise, it won't pork. We know that the second greed line comes after the first column, so directly after it, I once again at square briquettes and inside them give a name to the second greed line. I will call it Second Greed. Line them fools. The second column. After it, I add square briquettes and give a name to the grid line Number three. So no surprise here, let it be suit, greet line. Then goes the sort column, and finally, after it, we get one more square briquettes and the name inside it. Force Greed Line Agreed Line names are set and we're ready to use them. Next. Let's select the first great item with Anti Child one selector. Let's use the shorthand Great call on property that we already know and instead off the grid line numbers we can use as agreed line names we have assigned. So I want to start on the first great line. We don't need to use square brackets here. Just the name was agreed. Line is an and slash and the end important, which is a suit greed line. At this point, the great Cell would occupy two columns. Let's saves a while and previously changes. As you can see, the first cell now really takes two combs, starting from the greed line number one, to which we have assigns the name first agreed line and end in as agreed Line number three , to which we have assigns the name sort grid line. It is important to mention here that we give names only to the greed divines, not to the columns or rows. We can also assign multiple names to the same greed lines. Let's return to the I D. We get to the great templates columns, property, so I want toe. Add one more name to the first greed line. In order to do this, I simply add space after the first name of science and type a new one. That's cool. It's a roar start. Then I do the same with the last creed line, the Force One. The name here will be raw, and now we can return to the first cell and change cigarette names to the new ones rule, Start and draw. And in this case, the first cell should okay by all three combs. Save the changes and previously in the browser. As you can see, it indeed has taken three columns, the same weaken do with arose greed lines. At the moment we have five vertical grid lines for the rose. Well, let's give a name to the 1st 1 and the last one and assigns them to the first cell. Return to the V s coat, navigate to agreed template rose property. So right before they feel strong, we add square brackets for the first agreed line and the name, for example, greet top. Then we need to assign the name to the last greed vine. So after the force roar, we add square briquettes and the name inside them. Great mortem. The names are set. Let's girl to the feels great item selector and assigned to eat, agreed Rowe Property and the weirdest greet Stop slash Great bottom. Now the first cell would occupy all four rows, saves a while and previously changes in the Broza. And here we can see that the first cell is really taken for Rose, starting from the Fields Greed line, which has a name off greed top and ending with the keeps Agreed line, which has a name off, greet bottom and the cells shifted to the bottom. Was the new greed signs appearing. So by giving mean full names to the grid lines, we can in some way simplify our work with a great off course. This feature is optional, and it's up to you to decide whether to use it in your projects or not. 16. Grid Auto Fill: so far. We were setting the number off Colmes Andrawes manually with the help off the repeat function. But we can also define the size off the Greek items and makes them automatically feel the available space. With the addition off the new keyword out of field, let me show you an example or what we can achieve. Was it festival? Let's delete the name to greed vines. We don't need them for this lesson. We can also do lead to the class was the first great item with the anti child selector and finally delete disagreed. TEM patrols property because we will be only dealing with columns in this lesson. So are great. Container has the wits off 1100 pixels. The garbage goals. He's two point why room, which is equal to 25 picks off if I want to feed five columns into the Great Beach, Goal must have a week off 200 pixels with four gaps combined. That will give us a total wheat off 1100 pixels. Well, that said this was a repeat function. I'm typing. Repeat the number of times which is wife and the size 200 pixels. Well, that saves a file on previously result here. We indeed see there's a great has five columns, 200 pixels, each with the gaps between columns with the size off 25 pixels. To make this speed nicely, we needed to manually count of the number off repetitions as well as a size for each column . But what if I want to hear great items over a certain size? Oughta medical appeals that a whale boats place in the great and be converted into columns with the help off out of fuel keyword? We can achieve exactly that. Let's return to the I D. And instead of the number off repetitions weaken, type the world out of fuel, save changes and returned back to the browser after the page revote, you can see that nothing has changed the current size off Great items on gaps allows agreed to Feet five calls letter to come back to the court editor and change the size off each greet item to 250 pixels safe once again and go back to the browser reloads the beach. Now we have a four column layout. The browser counters that it could no long feet. Five columns into single raw. So after the force greet item and euro was created, he will return to the Viets coat and said the size off each a great item to 300 pixels. The browser will be ableto only position. Three columns on a single row was a mess is done by the browser engine, which takes into consideration the size off the greet item, the size of the Greek container and the gaps between columns. Generally speaking, the out of feel allows you to set a certain size on greet items, and then brother will automatically divides them into columns and feel the available space off the Greek container. The outer field can be also combined with in Mex function. Let's return to the B s court and instead of 300 pixels type and me next function, the minimal size off the item will be 200 pixels and the maximum size want a far save the changes and previous them in Sub Rosa Here we can see that our greet his wife Combs. If I start to reduce the size off the view port, we can notice that the great depths to it by changing the size and number off the columns. When five columns no longer feet, we have four, then we have three columns. 13 no longer feet. We have two column lee out and chills end until the point where we have a single call. By combining out of Feel and Meet Max function, we were able to make our great adaptive even without using the media queers. So when you want to have great items over a certain size on to make them feel so available space ins agreed automatically you can use visit the out a few key words. 17. Grid Autofill Autofit Difference: as we have found in the previous lissome, the out of fuel cured allows you to create, agreed, sells off certain size and let the browser decide how many columns should be created. There is also an out of feet cured. Let's try to use it. I returned to the being scoot, and instead, off the out of fuel, we get the out of feet keywords. I will delete his Immunex function as well and simply make cells fixed 200 pixels. Wits saves the result and returned to the browser. Usually nothing has changed. It seems like both skewers do the same scene. The way we would be able to tell the difference is to reduce the amount off self. I returned to the I D and inside the HTML file comment out the majority off cells, leaving only three visible. And in this thesis, while change the Cuban toe out of feel once again safe and returned to the browser here we can see there's a great takes, the whole wheat off the container. The purple border on the right side shows where's agreed ends. You can also see to empty columns, which could be field to risk self. In fact, we can use the great calm and property on the sort cell and assigned to the last agreed line, which is number six, and the search cell is now shifted to the end of the Great. By the way, there's also a little trick. We can substitute the number six with minus one. Will you he who assigns the negative who won number the cell will always shift to the end of the great. Okay, let's now return to the V s court and change the outer field to the outer feet. Save the changes. And previous, um, ins. Broza, look what happened. So we have a great container off 1100 pixel sweets has agreed ants at the end of the column number three. We can safely assume it by the position off the grid lines ends the available space. And even if I once again change the cells, number three called in position to the end. Lesson is changing, except the switch between the greed lines. So the fundamental difference between the two key words is that without a few key words, we allows agreed to spend. So the whole country Inuits, while without a feet ski worked. The great will spend for only the size off the Greek items. Let's now return to the court agita and tested the difference by using the mean max function. First we start with out of hell and then you max function set to 200 pics of this minimum and one of our maximum safe and go back to the browser. So without a few, we see two more empty cells generated. If I start to reduce the weeds off the view port, the amount of cells is first reduced to four, then 23 to and finally a single one. Well, that's now changes that out of feel toe out if it safe and previous a revolt notice what happened. The cells now occupy the whole weeds off the container, and the weeds between them is equally distributed. If we start to reduce the weeds off the view port when the road is not able to hold, three sells off 200 pixels minimum. The columns also start to rep until we have a single called. So without a feat on mean Max combo, you can get a perfect greet with equal columns that will gradually rep without even using the media squares off course. We can use the outer feel and out ofit keywords with Rose as well. Let me return to previous court in the end. Exact html file. I will one comment. All the self and in the styles that's here's a swell. I will make fixed. Three columns. Yes, was the rose that said the fighters agreed country in a 2 1000 pixels. Use every bit function without a feel cured and the heart off each raw said to 150 picks off. Well, that's safe and return to the Broza. So here we can clearly see that one more empty road waas generated. We can even make, for example, the first cell to occupy it by using the greet row and property with a negative number one . And he will return to CVS coat and change the outer feel to out of feet for rose in Sub Rosa, we can see that's agreed, no longer has an empty row generated, and it ends exactly at the roar where we have a cell number 10. So this is the differences between the out of feel and outer feet, keywords in most cases that you will use them for setting up columns, and the rial difference would be seen when you have a limited amount off cells. The concept off house a function isn't easy to grasp as a beginning. That is why it might be wise. Just try to use both parents and then choose the one that better feeds your situation. 18. Grid Auto Rows: the next property will allows to set, and if old size for greet rose, it is gold. Greet outer arose. Let's try to in practice. First of all, I want to comment out our great template Rose property. Then on the next line, I at the agreed out of Rose property and evaluate for eat. Let it be, for example, 200 pixels that saves a file on previous in Sub Rosa. Here we see that every room has a height off 200 pixels was a great out arose property except the same values as great template Rose property they alter, which is the default. My ex content mean content and different lengths with this, like percentages, PM's Rimm's report Tweets Super tight. And so that's, for example, assigns a really off 10% instead of 200 pixels. The height off the Greek container is 1000 pixels, so the car to which roar must be 100 pixels. Let's save the file and returns to the frozen. And, yes, the kite off each row is now 100 pixels, or we can use some room, will you and set it, for example, to 25 rim, which is equal to 250 pixels in our case, and each row got a size off 250 picks off. It is also important to mention that's agreed out of Rose property. Provides only is the default size four rows. We can always overwrite it with agreed template arose property. Let's return to CVS coat, uncommon to the group's template Rose property and assigned its earlier off repeat two times. And the Haida, which raw 100 pixels s, was agreed out of roast property that set its value to 200 pixels. So in this case would tell a browser that the deport size four rows would be 200 pixels. But the 1st 2 rows off the greet must have a size off 100 pixels, save the changes and previously in Dobrosin and did the first and the second rows have a size off 100 pixels and other rose 200 pixels. So the main concept here is the following were signed. The default size for all rose in the greet with agreed out of Rose property and when we need to give a certain size to some special rules that must override the default. Well, you we use agreed. Stem Potro's property with agreed. Out arose property. We give a certain size toe all rose and was agreed. Stem patrols property were signed. The will you only to the rose we want to change. 19. Grid Auto Columns: We can also set the default size for greet Kolbe's, as if probably guessed the name off the property is greet out of Kolb's. First of all, I want to comment out with great templates, columns, property and on the next line, I at the agreed out of columns property and I will live for it. Let it be, for example, 200 pixels save the file and previous in Sub Rosa here you can see that we have only one column lee out with the wits off each column off 200 pixels. That is totally okay, because we haven't yet specified the number off Combs, who has changes by Spain in the first cell on more columns. For that I targeted with anti child selector and assigned to eat cigarette call on property , which we already know and spend it from the Fields Greed line to the seventh. Let's save the changes. Look at them in the browser. The layout has changed, and now we see that the first cell occupies six Kolbe's and the rest of the cells exactly 200 pixel sweets. The weeds off the first cell exceeds the wits off the container. Let's changes and applies that outerwear due to the automatically created columns instead, off the fixed well, you safe and go back to the browser. And now, as if yourself pizzas the container nicely as well as with agreed out of roast property, cigarette out of columns can use as a lengths weathers, for example, percentages, E ems or rooms and so on. We can also use my ex content mean content and even mean max function. Let's set it, for example, to 100 pixels minimum and 150 pixels maximum. As with the greeter, out arose property. You should always remember there's a great altar. Combs Property provides only as a default value for the column size. If we return back to the base coat uncommon to the great template columns, property the lead the into each child rule and save the changes. You would see that we again have a three column layout. Those agreed Outer Columns Property still functioning. Agreed Templates, columns, property over rights, its behavior. So the Great Beltre columns property can be used for settings. The default column size you've needed, and then we can specify fixed Wilders with agreed templates, columns, property. Although In most cases, you can just simply use degree temperature, cools property and completely forget about the great outer columns one. 20. Grid Explicit Vs Implicit: there are two types off greets we can create. They, uh, explicit and implicit. So what does it mean? Basically, when we create agreed by using the greets template Rose and great tempered calls properties , our great would be considered explicit. That is so because we give a certain fixed with these two rows and columns. And he would define our greet without using great tempered columns and greet temperatures, properties. Or, in other words, he We don't assign X 12 hours with the help of this properties toe our columns and draws. Then such a great would be called implicit. Let me demonstrate to use these by an example inside the index that html file. I comment out all the great items except the 1st 3 and in the styles that sees this while I delete the greet out of combs, greet out of Rose and greet TEM patrols properties as well as a fixed fight on the Greek container. Save the file on previously result in the Broza. So right now we have three column greet, and that's type of greet is cold explicit because we have explicitly assigns the Raiders for our combs by making them 200 pixels minimum and one fraction maximum with a great templates. Columns, property Let me now return to severe scoot and uncommon. Is there more greet items in the HTML file say once again and returned to the Broza. At this point, a second row has appeared because six items Cano feet into this recall layout. Police also pay attention to the fact that we haven't it assigns the size for the rose. This means that at the moment we have implicit rows in our greet. That's changes, returned to the Venus court and makes it first row of our greet explicit. In order to do that, I had a great stamp. It arose property and assigned to it. Is there really off 100 pixels? So starting from this moment, the first row over our great would be explicit, let's say the pile and previews the result now have explicitly said columns and explosives to set the first draw off the Greek. In the meantime, the second row off the great is implicit because we haven't assigned and you will you to the second row. Fire rocks can also assist us in understanding this things better. That's me zooming inspires. I can. If you look closely here as a top, you can see a solid purple line. It means the start off the explicitly defined greet, and at the end of the first drawer we can also see a solid purple line. It shows the end off the explicitly defined greet so the rest of the greet beyond that line would be implicit. We can also take a closer look at the second drove our greet. Here, you can notice that instead of the solid line, we have a dotted line. This means that at this point, the great he's implicit and the road is also defined implicitly. Let me. I'll come into the rest of the Greek atoms and returned to the browser again. The sort of the force rose Havel. So be it. And they also have dotted lines. This means that they are also defined implicitly return back to the V s court and, at one more 100 pixel value to the great temperate Rose property. At this point, we explicitly defined the size for the second row, saves a while and returned to Hasbro's. Pay your attention to the second soul, it purple line it ends at the end of the second drawer. That means that we have an explicit to define a great from the rock number one to the wrong number two. And judging by the daughters lines this so drawer and the force are defined implicitly. We can also notice that rose number one and two have horizontal dashed lines. This lines in Firefox tell us that this rose are defined explicitly. The same can be seen in the calm section you. Each column is surrounded by dished vertical lines, which also tell us that the columns are set explicitly. Finally, I can assign agreed out of rose property. Let's make it, for example, 150 pixels. So let's save return back to the browser. And it was zoom once again. We still see that the sort and the force rose have dotted lines. This means they are implicitly created. Although we give a fixed, we're here to the roast. We give this will you to the rose by default. This means that these rows are still considered to be implicitly created, will sum up the main points. All the lesson Greed rose great combs and greets in general Can be explicit or implicit when we assign a certain size to them with the great templates, columns and greet temperatures properties we call the columns and draws affected by these properties explicit are the rows and columns, which are not affected by the aforementioned properties, are considered to be implicit. That is, on the difference between the explicit and implicit rows and calls those this information doesn't bring a little, Will you? Now you can really tell the difference between explicitly and implicitly defined greets. 21. Grid Auto Flow: with the next property called Greet Outflow Weaken Control House Ultra placement in the great works. It allows us to specify the flow off how to placed items inside the greet. This may sound complicated, so let me show you how to use this property in practice. First of all, I go to the index dot html file and comment out. Also greet items except to the 1st 4 and in the style that sets us while I comment out. Agreed. Temperature rose property. So what, you want to disturb us in the brother? We can see that we have s recall them layout and the fourth item was automatically placed into the second drawer because it no longer can feet into the first row. Here's a great out of floor property is already in use by default. I can prove that by returning to the obvious coat and added the property to the Greek container, Greet outer flow and the default video for read raw. Let's say the changes on go back to the frozen reloads the peach and nothing has changed. So the great out of flow property with the value off roar he is default hairier for place in new items into the greet. It automatically creates new rose if necessary and fills them with new items. This behavior can also be changed. Let me return to the BS coat and instead of the really roar I signed, the value off column saves the changes and prism in Sub Rosa. Look what has happened now. Instead of placing the force item into in euro, it was placed as a force called. So when we're signs agreed out of floor property to the column, we tell the browser to place all new items inside the columns and not in the rose. If I go back to the index intestinal file and uncommon three more greed items, they will also be placed as the new columns. Instead, off rose. Finally, we can un comment all the remaining greet items and in the browser there will still be placed s columns. So was in no longer feet into the sweets was a great container. And if I quickly change the really to raw inside, the styles don't see us a swell. We get back the normal ultra placement off items into rose, so's agreed out of flow property specifies how the new items should be inserted into the great is the full behavior is to put new items into new rose. And if we won't, we can change eats two columns so all the new items would be placed into separate columns was a great out of flow. Property may look not that useful, but it has one more interesting will you that I want to show you in order to demonstrate its usage. First of all, I need to customize our custom column class inside the styles. Does CSS file here? I get rid off the greed Rowe Property and said the great calling property to one slash span three. So the great item would occupy three columns starting from the first greed line, So save the styles and opens the index dot html file. And the signs, a custom called him close to the second greet item save the changes and previous, um, in sub Rosa here you can see that our second great atom indeed occupies three combs, but it was positioned to the new row because the first greed line is already occupied by the first grade. Lighten as the consequence, we have to empty columns on the first row. We can change this behavior and feel them with other items returned to the series as well. And instead, off the road value off the great out of floor property assigned it to the world them save the changes. Return to the Broza Andrew Load the beach notice. What has happened now is a blend. Columns are field with a great items number three and number four basically the dance value off the Greek outflow property allowed us to feeling holes inside, agreed by placing the items off smaller size, so they came up later. Off course. This breaks the order off items, insides agreed. But on the other hand, we feel old holes and make our greet book myself. That is the way it was. A great out off low property can be used to sum it up by default. It inserts new greet items into the new rose. We can change this behavior and insert new items as new columns, and we can also use the dance video which will rearrange the order off our items. But feel all empty holes in sides agreed by placing small items inside of them so dependent on your needs, disagreed out. A whole property can serve as available asset to your ceases. Great skills 22. Grid Template Areas: there is one more interesting way off. The findings agreed. We can do this with the help off the property called greed template areas it allows to create greets in the more visual way. Let me show you what I mean. Here I have prepared a new while called agreed template that age time. Well, it has a simple structure at the top where Lincoln our style does. Here's a swell and inside the body element we have several texts Heather aside, Main and footer. They have the respondent crisis as well as a class element which seem percent is a constant inside each of them. All these elements I repped by the DIF with the class off page and inside the styles that sees us while I have added several classes to better visualize what we have. So the page rapper is our great container and are the elements just seem to have a background cull set which allows us to easily tell where each element is situated, opens a page in the browser and take a look here We have a one gholamali out by default and I want to make it look more like a traditional website Let's return to the base. Scoot testable defines the columns with the great templates, columns, property. Let's be, for example, 250 pixels. One, far one for and for the rules I use is a great temperatures Property was there really off 150 pixels, 500 pixels and 100 pixels. Saves the pile on previously changes, so he will see house recall the out. But that is not the result I want to get. I expect headed toe by all three columns on the first row. Then I want side by toe by one column and the content to occupy the rest to comes. Finally, I want to put the element toe occupies recalls as well. Of course we can do this with the help off the great call on property or we can use the new greets temperate areas property. Let's go back to the V s coat and add it to the great contain, as was the will you We type it by visualizing the structure off the great I know that we have has recalled layout and I want a header toe occupy all three calls. So to make it happen, I type double cools header header federal here. Each Heather worked represents one column over greet. That would be our first rule on the second drawer. We need to positions aside by which would take one column and the current element, which would take two bulbs. So here I jumped to the new line to make it more readable and type sidebar content content was This is our second room. Finally, we need to make quota occupy all three columns jumped was in your line one more time and type footer, footer, photo. At this point, we're done with the container. Let's saves a while and previous that result in the pros and there are still no changes. That is because we have only type two the area structure. Wow, great. But dont assigns this heiress to the elements, so we need to return back to the coat editor and start assigned them. I begin with the header element All we need to do. He's to simple at the great area property and to give it a value off header like in the Great Template areas Property for the sidebar We It was a great area Sidebar property for the content as a guest. We had the great area content property that was a porter. Great area. Footer property. Okay, we're done with it. Let's saves a while on previous result, and now we have a typical website play out. As you can see, they had occupies three columns. Sidebar takes one column content, takes two calls and Twitter occupies recalls as well. You can also check the peaceably area names in the Firefox death tools, and now we can see the address that we have created. Now we can easily control how many combs all rose. Should each element steak. Let me know challenges of this court and change the headed toe occupy only two first columns. The circle would not be occupied. So instead of the sort work header I can type and that then I want a side by to take two columns and said content to one column. This was a Fourtou. Let's make it's Keep the first call. Save the changes and look at them in the browser and our layout has changed according to the new Great Template Areas scheme. So imagine help our rules. This feature is with it. You can easily restructure your website Lee out, for example, for mobile screens here I returned his A V s court. First of all, let me undo the changes were made to the scheme. And then I want to add a media query. For example, 8 800 pixels. Let's started toe agreed Container and type a new scheme woozily out. Let the busiest time, for example. Heather Heather Sidebar with n content content sidebar and we'll still keep the porter 14 footer room Saves the well and previ it. Now I can resize the browser window below 800 picks off, and our absolutely out has completely changed. This is how you can is the changes the position of different elements on the webpage with help off the grid template areas property has. He understands a great temple Terrence is aware powerful feature, which allow you to easily reposition different blocks over your website the way you prefer . I considered to be very useful for constructing, have absolutely out, so make sure to practice it a little bit on your own. That's it was agreed. Template arrest, property. Let's move on. FISA 23. Inline Grid Shorthand: in conclusion to this module. Let's explore the last two useful greet features. So far, we have used the greet as a black level element, but it can also act as in line. You probably know that the Flags Books has a failure off display in line flex. Luckily, the says says, Great also has such a property. As you probably guessed it. It is called in line. Greet. Let's try it. For that I create a dummy. Each one hidden was a text content I type. Greet can also be in line. As for the styles, I said them to call the white phone size few two pixels display in line look and the vertical line Middle, Let's say the file. I had two previous Enza Broza. Although the H one element is in land, look, it is not on the same line with the Great. That is because the great is still acting like a block level element. So let's chooses return back to the V s coat and instead of the display, great set it to display in land greed and at the vertical line, Middle property safe on previous changes and now both the each one element has agreed are in line. Off course is property is not to be used very often, but sometimes it may be helpful. Okay, now that we're done with inland greet, we can delete the H one hidden, return to the ceases filed and get back our greets to the normal block level element and gets returns. A vertical line, middle property and one more feature that may be useful to you is a great shorthand property. Basically, it allows us to pack all the measure great properties into one. So you seem the type greet and then we can reproduce the columns and rows that we have. First, we defined the roast, so I type 100 pixels. One country pixels isn't ADSL ish and finally defined the columns for that. We use our repeat function combined with me and my ex function. So we repeat calm three times with the minimum with off 200 pixels and the maximum weather off. One far was a great temple throws Property is already coming it out. But we still need to comment out of the Great Temple tickles property. And please don't forget to get rich off the custom column class in the index dot html file , so it won't miss our styles. So let's say the file and previously changes. So here we can clearly see that the great property is set. The 1st 2 rows are 100 pixels fight, and we have a three column layout. And if I disables, agreed property. The great falls back to the one column layout, and if I shake it back, eat regions. Our normal greet ziggurat proper tickles. Except as a properties, for example, we can define a dress, was it? So let's return to the styles that says this while and find our that beach class. Let's get to the great property. Andrew produces the current structure, all the layout. We start with the quotation marks and defines that greet heiress. We type header three times, and after it the fight was the first room, then switched is in your line for a better the built here quotation marks. Once again, he would type side war content content, and the kite holds the second role. You line quotation marks and the world footers three times with 100 pixels was assert row. Finally we jump to the last line and slash and define the colds 250 pixels one far, one far. So here we have used to cigarette property to define both greet, template, heiress, great temperatures and agreed Tempered Combs Properties. Let's comment out there. Normal parents off these properties save our changes. And previous them was a great template. That HTML file he have against seizes agreed. Property is set and the lout has correct for and he would disable. The great property agreed, falls apart. So with the help of the great property, you can save some typing and create agreed to fester. So to my mind, this property is quite complicated, and I still stick to the traditional way of the finals agreed with separate properties. On the other hand, when you become proficient with all the sex is great properties and use it for a long time , it might be a good idea to use a great shorthand for defining as a great nevertheless. Keep in mind that if you work in a team, your colleagues or that don't know the sex is great, well may find these syntax to complicate it 24. Exercise 1 Introduction: welcome to the first assignment off the course. I have prepared for you a couple of questions on the great topic and what is more important , a little project to practice here have ended that html file to reach the style that sees this while he's linked. Inside the index file, you'll find comments. Who is the assignments? Your task is to create greet by following the requirements off each assignment. Majority off styles should be written inside the styles that CSS while zero sum permits tales here and you will need to add your own. Try to take away all these tasks on your own and in the solution region to this assignment . We will solve all these tasks together. I wish you good luck and see you in the next video. 25. Exercise 1 Solution: I hope that you managed to complete all the tasks by yourself. Nevertheless, let's get through them together in the first disk we need to target is a great one class, which is they are not, at least over here. It should have for explicit columns defined with the usage of the repeat function and directional units lengths value. Then we would need to define three explicit Ross. The first row would be 200 pixels circum toe, 100 pixels, cert 150 pixels. Next comes spacing certain pixels between columns and 15 pixels between rows. Finally, we would need to spend the feels great item two rows starting from the second greed line. Okay, I understand it's clear right now. The least doesn't look like great untold. So let's change this. I go to the styles that series as well, and right before the great one item defines agreed one class inside the class with us need to set are released to the Greek container by giving it a property over display greet. Then we start with the combs we need told them, explicit with the repeat function and fractional units. Thanks values. So for explicit comes we need to use as a great templates, columns, property and for the really provides of holding repeat function number of times, which is for and selects whether which can be wonderful to make all the golds equal. Next we defying explicit Rose with the Great Temple Trolls property Satan's, they feel strode to 200 pixels, seconds to 100 pixels and certain to 150 pixels. After it. We need toe ad space. And let's do this by agent's a gap or greed gap property off course. You can also use column gap or oh, get properties as well. The first. Well, there is a gap between rose 15 pixels. Second gap between columns, certain pixels. At this point, our creature, the rhythm. Let's saves a pile and chicken in Sub Rosa. Now it looks like a great let's open the deaf tools and shake the dimensions. So we have four columns off equal wits. The first rule is 200 pixels, 2nd 100 pixels, cert, 100 piece, two pixels and the gap also looks right. Okay, let's your turn back to previous coat and complete to the last point of the task opens index wild in order to make it span. Rose I at the style a tribute to the first item here. We need to use the greet role property, so we need to start from the second greed line and slash and type spent two so it would occupy two rows. Save the changes and previous, um, and indeed, the first cell now spends two rows and starts from the second grade line. Does the Phil's desk. He's completed. Let's switch to the next one. So here we need to target greet to glass. There would be three explicitly defined columns. Implicit rows, spacing on the green lines. Naming opens the styles down, sees a swell and tried before agreed. Toe item defines agreed to class inside the class, which was to make it a great by typing display. Read columns explicit. So we used to the great templates columns. Property first on certain goals must bay 30% minimum and 400 pixels maximum in wits. To achieve that, we will need to use the min Max function, so I type mean max, 30% for the minimum and 400 pixels for the maximum at one of our for the middle school and again mean Lex. 30% 400 pixels for the surgical was income rose. We need them to be implicitly defined. So for that we can use the great out arose property with the radio off 200 pixels for space , and we again use the formula. Good property said to 50 pixels, four columns and 50 pixels for Rose. Let's say the changes entrepreneurism. Now this looks good, inspects agreed dimensions in the death tools ever since part in here as well, return to serious court and read to the last point off the desk. So here we need to name greed lines and use them to spend the first cell switch to the styles downstairs as well. And inside the greets templates columns, property right at the beginning had square brackets and the name for the greed line, which is main start. And at the end we were toe one more square briquettes and the name for the engine grid line , which is main and phase of well, switch back to the index that HTML file and here inside the first item, I at the style, attribute and type in sides agreed to call on property. Who is the value off mine start slash main and here we don't need to use square brackets anymore, so let's get rid of them. So that will allow us to spend the first cell with the name greed lines. Let's previews. The result means that Broza was the sell now occupies all three columns. The second task is complete. All right. The search task is on the way. Here were great website layout for explicit combs with the minimum and maximum weathers explicit Ross. 150 pixels 1st 1 400 pixels. Second 100 pixels Suit spacings equal to 20 pixels. We also need to use the group's Temple Terrace property for Great Inns. Agreed Structure First Rule two columns header to Combs There second rows. Three columns content one column sidebar. Sodrel to calm Scooter at the center of the greet. Okay, opens the styles that CSS file right before the hell mint define a Leo to class. Inside, as usual, were to the display great property. Next, we need to define explicit calls here. We can use the combination off the repeat on me. Max functions, so we type great templates. Columns, a repeat four times. I mean Mex function 200 pixels minimum and one of our maximum. For explicit rules, we simply uses a great temperature rose property. The first reality is 150 pixels. The second is 400 pixels. Hands assert 100 pixels. Spacing is defined by a good property, said Toe. 20 pixels for roast on 2020 pixels. Poor columns. Finally, we add the group's template areas. Property for the first rule. We type Heather, Heather Nef Neff for the second room content. Continent content Sidebar and assert that for Empty column, Falter, Pooter and one more time that we also need to assigns a great area properties to the correspondent elements. So for her, the I Type great area Heather for the lef greet area and F for the content greet area content for the Insight element. Great area sidebar. And it was a photo greet area photo at this point is layout should be completed. Let's save the changes hands previous. Um, so far everything looks great. Let's double check that inside the death tolls, and there it is also correct. Then we needs to define 800 pixels, break point and redefine our great temperate areas. So returned back to the B s court and at the bottoms of While it's Media Screen and Mike Sweets 800 pixels made equerry inside. It's at Za Leo to Cliff and ST We here we It was a great Temple Terrace property and stabs their new will lose, So it should be Heather Nef left. Nef was the first row sidebar. Content, content content was the second footer, footer, footer, footer Who's assert? Let's say the file and check if a person is correct. And when I drag the window bolos 800 pixel sweets. Our layout is changing. Excellent. Finally, we need to write the Great Temple Areas. Property with a great short can't inside the styles, while after the display great property, I add greet and the scientists to the following feels through. Heather Heather left Neff and immediately after the height was Phil Straw. 150 pixels, second rule content, content, content and sidebar and the Heart for the second drawer, 400 pixels and the surgery that hooter Pooter. That and 100 pixels Kite was a surgery. Then we add forward slash on the new line and define our Kolbe's repeat four times I mean Lex. 200 pixels, one fr. The great shorthand property is done well. It's also comment out the normal parents off the properties so they won't interfere with the our great short hands property. Now we can save the changes and previous them in the browser. Here, we can clearly see that something went wrong and agreed to was broken. The reason era ins agreed short on the property, so we must fix it. It seems there's a repeat function. Cans work inside it, so we need to get rid of the repeat function and instead type for columns. Wisdom in Mex function, Let's say, a friend previous changes and now the layout looks great and uses the group chosen. Property is the right way, and we disabled. Everything falls apart. Once again. This means that is agreed, shortened property. It said the right way. Awesome. With the task Number three, he's done my congratulations to you Here we had a good practice off defined integrates, and now you will better memorize all the stuff that we used in the assignment. At this point, where done was it? Let's wrap up the first module 26. Grid Basics Conclusion: in the current module, we have learned to Ezio all the main properties. He will eat, toe, construct any type off greets. A lot of stuff has been covered, and in most cases that would be enough to great a nice greet. However, we still need to learn how to apply different sorts off alignments to the greet and eat elements, so you would be able to better position elements inside it. I have dedicated to the whole next module to this topic, so let's no more waste our time and jump straight to it. 27. Grid Alignment Introduction: Welcome to the second module of the course. Here we're alone. House alignment works. Insides agreed. This year says Great. Have six properties. Was elements alignment. They justify accountant, ally, incontinent. Justify items a line items justify self and alliance self. If you have for me that we slept box, you do understand that the names off the properties are identical to the flags books. Once most of these properties, we would apply to the great container, but some of them can also be set on greet items. In this section. We will break down every ally men's property and how it effects the great so that start with the 1st 1 in the next lesson. 28. Grid Justify Content: when working with the CIA, says Great, we have to access available to us. One of them is the horizontal axis. It can also be called in line access roll excess or X axis. The online access runs in the direction you would expect from England element or all meaning horizontally, and that access is a vertical one. He just called Block Access Coolum Access. Oh, why access the block? Excess takes in the same direction you would expect from the block level elements, meaning it goes vertically or like a calm he is. The sex is great. We're able to line content on these to excess for the horizontal axis we uses justify CSS properties. And for the vertical axis, we use the alliance Assess properties. The first property we will learn is called Justify content. Judging by its name, we can use it for a line in items on the horizontal axis. Let me speech to the file I created. So here we have agreed container with the red border. Inside the containers, there are six great items. We also have excess here for you to better memorize their direction. As I mentioned earlier, the justify properties allows us to position content on the horizontal in line Access, as you see right now are great. Items are positioned on the left side off the Greek container. The justify content property must be set on the Greek container. Its main purpose is to justify Greek columns on the in line access. So let me opens avian scoot and at the justify content property and the really for it, which is normal. I save the changes and returned back to Hasbro's religion is a beach and thus and changes. So the normal video is the default. Will you wanna justify content property? He doesn't do anything useful, so I would. But to show you are the whalers who with the help of the developer tools, the first value is called center. When I said it, we can see that the great items were hers until aligned to the center off the Greek contain was the next Really, he's left off course. It alliance items on the left edge of the Greek container. When there is left, there is also right value. Now we're line items on the right age off the Greek container, one more readily his cold start. He does the same as the left value and its counterpart and which does the same as the right to value. What is more interesting, We can even use the flex, start and flex and properties. And if there are no flex items in wolf, they default toe Isa start or and will you? Then we can distribute the great items with the world off space between eat alliance at most items to the edges off the Greek container and my extra space between the great items equal. Then we have a value off space around. It makes a space in between the great items equal, and it's empty space in between the first item and the left age and the last item and the right each off the Greek container. In that case, the amount off the empty space is equal to the half off the space between the elements. Finally, we have the space evenly, will you? It may exist space in between the great items and the edges off the great container totally equal. So this, as I mean well, is off the just for content property. By the autumn of acres that were provided, they are safe and unsafe and must be paired with any off alignment will use. The purpose is to give a certain behavior to the alignment. When over full happens, let me return to the BS coat and said the alignment to who center safe and return to the Broza. Now we can use this additional words First, I used the word safe and put it right before that center, will you? I started to drugs the window, and when the overflow appears, the great items are pulled to the left edge off the grid container and awful happens only on the right side. And if I change the world too unsafe and start drinking again, the priority was awful. Happens is given to the alignment value. Here, you can see there's a great items are now. Beyonce agreed. Container, but still stay centered, having the equal or flow on both sides. Although this words would be used only in special cases, it is always nice to know such things. Who knows? Maybe you will face a situation where one of them could be used so that was or review off. The justify content appropriate him. It's important to learns a 1,000,000 readers that's gonna be used with this property and to remember that it allows you to align the columns on the horizontal axis off the great container. 29. Grid Align Content: the next property on our least. He's gold. Align content has understand from the ally and keyword this property would align rose with great items on the vertical block. Access. The property must be set on the Greek container. Let's open the styles. Darcy SS file. Find a great container and adds to eat a lion content property. The default will you, for it would be normal. Let me also comment out so they justify content property so it won't confuse us. Save the file and at three more items to index that HTML file Now you can save the changes and chicks. Um, inside the browser. This was a justify content property. The normal really here doesn't do anything useful. Let's explore other various. The first Billy he's center. After we had applied it all, our greet rose were vertical. Aliant insides agree to container was the next value is cold. Start eat alliances. They rose to the top. H was the great container. It's going to part is cold and eat aligns the rose to the bottom edge off the great container. We can also use the flex start and flex and properties. They basically default to simply start and and properties is the flag box. Items are not found, then we can also use the distributor values. Let's first set it to space between the space between value brings the utmost rose to the top and bottom ages off the Greek container and makes the distance between the rows equal was the next really is space around. It makes the distance between the rows equal and says the half off these distance has an empty space between the agreed container edges and utmost rose. Finally, we have this place evenly value. It makes the distance between the rows on the great country now edges totally equal. We can also use the supportive, safe and unsafe keywords with this alignment values as well. So if I said there really to the safe center and Mexico fighters agreed container, for example 400 pixels, the overflow. In that case, who would happen only at the bottom off the great And if I change, these two unsafe center zeroes would still stay centered and awful. It is a great country and equally from both sides. As you can see, the ally and content property has the same values as a justify contents. Property. The difference between the two he is that was a justified content. Property allows us to align columns on the horizontal in line excess and the lion gun and property alliance zeros on the vertical block excess. If we, for example, said both properties to the center inside CVS coat, then we would perfect the center Bulls zeros on the columns inside the Great, and he was seizes. This really works. That's his point. We're done with the rows and columns environment. Let's move on frozen. 30. Grid Justify Items: one more property is called justify items. It has a justify Q Bert. So we already know that items would be aligned against the horizontal in line access. First of all, I want to comment out. They justify and ally in content properties inside the styles that sees us while then it's a justify items property and said it's whether to normal that is the default value for the property. The property is also add aged to agree to container. Let's open the browser on Look at the beach. There are no changes here except that the justify on aligned content properties are no longer effective. Agreed. Let's not try different values for the justify items property. The 1st 1 would be center. Notice how the weeds off each greet item has changed. It no longer occupies the whole calm tweets. Let me return to severe scoot on, give have picks, tweets off one contract to into pixels and fixed kite off 100 pixels. To is a great item class. Let's also change the justify items, will you to center safe hands preview and now we can better see how each greet item is a land relative to its calm so they justify items. Property allows us to align all greet items relative to the columns in which they are situated. Let's try the next property, which is left heat alliance all the great items to the left edge off their respective combs . Then you have the opposite right property. It aligns the items, store the right pitch off the goals. We can also use the start and and properties which do the same stuff. The same can be said about the flex, start and flex and properties, unlike the justify, got property. They're justify items. Property doesn't have the values like space between space around and space evenly. But we can still use the safe and unsafe keywords to supplement their alignment. General speaking suggest if I items property, he uses the same Cuba. Twitter's has a justified content property, except of their distributional is the major difference here. Use it while the Justify Content Property alliance only the columns horizontally with the justify items property where airlines agreed items a relative to their homes. So the Justify content alliance columns relative to the Great Container and the justify items aligns the content relative to each column. 31. Grid Align Items: the next property is gold. A line items the airline. Q. Bert tells us that the alignment off the items would be on the vertical block access. Unlike the online content property, which alliance columns relative to the Greek container, the airline items property will align greet items relative to the goals in which is their situated. First of all, let me comment out there. Just buy items, property. So to want to confuse us, the airline items property should be set on the great container here I at a property and the very for eat normal. That is the default, will you? So let's check it in the browser, as we can see and nothing has changed. Besides the fact that the justify items property no longer FX is agreed, Container and all the great items are aligned to the top left corner off the combs. The release was a line. Items are basically the same. S was a line content. The difference here is that the distribution winners, like space between space around on space evenly are not supported as usual. Let's try the first value s center as you can see it vertically. Alliance every item relative to the column. It is in the next Will you? He's start the items, since that's case are aligned to the top off each column. Its counterpart is Aunt. Will you eat alliance items to the bottom off each column, and there are also the flex start and flex and values they advanced. Do the same as the start and end. With this, we can also prayer. They're safe or unsafe keywords with any of these alignment properties. But in 99% of cases, I guess you won't need them. So basically, the rust remain Willie's. You would use with the airline items property. They are center, start and and finally, let's combine all of the alignment properties we have learned so far. I uncommon them inside their styles that sees this file and said the really off the airline items property to center. Let's previews the result in the browser, and now I will greet. Items are perfectly aligned. The columns and rows are centered relative to the Greek container, and every Greek item is centered relative to eats calm. At this point, we're done with alignment off all greet items simultaneously. In the next video, we'll alone how to set alignment on individual cells 32. Grid Justify Self: Now it is time to set alignment on the individual items. The first properties that does it is called justify itself. It functions and takes the same properties as a justify items property, but it can only be set on the individual item. Let's open the styles down, sees this file and targets. It feels great item with the anti child selector. Types of property justify myself and they really for it, which is normal. Save the changes and previously result notice what happened. So for every Greek item, we have a justified items, Properties said to center. The first item is now aligned to the left part off the calm in the diff tools we can see there's a justify self property effects of these sound, and that is the key. Go off this property when we need an individual element. Insides agreed to have a different alignment. Then we can uses a justify self property to control its alignment on the horizontal line. Access. Let's return to the editor and target one more item this time I want to target this sword. One was that we use the anti child three selector type of. They're just myself property and said it's really too right safe on previous result in the browser. And now this sort item is aligned to the right edge off the column the rest of the rebellious you already know. For example, I can choose the second item inside the dentals, type in, justify self and said different ways. For example, start and lift flex and and the flex start value that's basically eat. The main point in using justify self property is to target the individual elements horizontal alignment off, which you want to make different from the main flow. 33. Grid Align Self: the next property that allows to set the vertical alignment on individual items is called Alliance Self. It functions and takes the same will use as a line items property. Let's try it. Opened the style down CSS while and find the cliffs where we target the first greet item times a property alliance self and the default value for eat normal. Save the changes and previews. The result. Look at the alignment off the first item. So for every great item, we have a line items Properties said to a center. The first item is now aligned to the top edge off the comb and in the dentals, we can see that the Allied self property affects the first element so we can use the line self property to control the alignment off individual items on the vertical block. Access. Let's return to the editor and target. Another item finds a certain greet item, type their lines, sell property and set its value to end safe and preview. Now this sort item is aligned to the bottom edge off the coal. The ally and self property has the same values as a lying items property. They are normal and start, flex and and flex start and off course center. Basically, you would normally use only center start and end. So when you need to change the vertical alignment of individual greet items, their line self property is a way to go. 34. Grid Place Properties: the next set off properties will allows to set the alignment on both excess simultaneously . The properties are called place, continent place items and plays itself. Festival. Let me deal. It holds alignment properties we have so far, including the individual items, save the changes hands returned to the browser. Now all the items, as well as greet tricks are aligned to their default values. As you probably remember, there are some short can't greet properties, which allowed to set Willis for a bunch off other great properties. For example, we can use the call them gap property toe at the gap between the columns and rogue IP to set the gap between the roast. Or we can simply use the Gap property and said the gap for both rows and columns. The same allows us to do that place properties. Let's start with the place content property. As a probably guessed, it allows us to set the alignment for both zeros and columns relative to the Greek container. Basically, it is a short one property for the ally in content and justify content properties. Let's rejoinder styles that says a swell and type it inside to greet container. The property accepts to values with the first will you? We said their land content property let it be center and the second barely is the really off the justify counted property. I will use that space evenly here, say the changes and previously results. Now all the grease tricks are vertical aligned to the center of the great container on the block excess and spaced evenly on the horizontal. In line access was the next property e's place items. It is a short controls the airline items and just buy items. Properties open the styles that CSS file once again as a property to the greet container. Here we also type two wells. The 1st 1 East was a line item spro pretty. Let's set it to end and the second really was a justified contents property. I said it to center safe and preview, and here we can see that now all the great items are vertical position to tow the bottom H off their respective columns and aligned horizontally to the center. Finally, we have a play self property, which you've probably guessed it. We useful aligning is the individual items. Let's go back to the I. D type it inside. That feels great. Item close again. We need to provide to workers here. The first way Luis was aligned Self property. Let me set it to start the second Wailua Falls. Adjust myself property. I will set it to left that I want to add to the place off property to the sort item the vertical alignment where it would also be start. But the horizontal alignment I will set too right? And maybe target one more item that'll be safe. Use one and it is a place l appropriate and position It sent a center for the bulls. With this, let's say, is the changes on chicks um means a broza. Now the first great item east position as the top left corner off the column, his assert at the top right corner and the feuds at the center. Although place properties are working and we can also previous them inside the diff tools so we can use the place properties as a short hunt for all the major alignment properties and no one go need to type each property separately. To my mind, this properties are a good addition to our senses, great skills and can help us to said the alignment insides agreed in a more comfortable and efficient way 35. Grid Area Alignment: the element works is the same when we define our greet with a great temple terrace property or with agreed, shortened. So here we have the website layout from the previous lessons with agreed shirt property defined. H Block has a piece of text inside it and we can use the place items on the place sell properties to control their alignment. First of all, I want on check this perplex property for all the sections because I don't want the flex books to interfere with the A great properties. Let's assigns the place items property to the great container and censor the text inside each block both vertically and horizontally. So we had the place items property and said to will use center center. Notice how the size awful the blocks has shrunk to the size off the text inside of them. When we used to justify items, align items, justify Self alliance self all police parents off this properties. The size of the items automatically shrinks to the size off the content, but we can the gauges effect. If WHO said explicit weeds or height on the item, for example, I can lead to the header a weeds off 200 pixels and sent to the text was a text align property, and in this case it would occupy exactly that wits. So unless the wits or height or the great item is explicitly, sit the size off the element with alignment, a blight will shrink to the amount of the content inside of it. Let's also target individual blocks with the self properties. So was aside, but I can add to the airline self property and sent it to end for the main working also. And the place self property with the Williams off start was a vertical alignment and left was a horizontal and for the porter play self Center for the vertical lemon and right for the horizontal as they understand, no matter how we defines a greet either with traditional good properties or by defining is agreed simply areas the alignment properties will work in both cases, and please also remember that when you use one of the items or self properties on the great item in size, unless defiant explicitly will shrink to the size off the content that is inside with 36. Exercise 2 Introduction: welcome to the second assignment off the cross here will have a little practice with the alignment properties I have prepared for you several tasks to accomplish. The tests are quite simple and only demand from you the knowledge of the alignment properties that we have learned. I have added the instructions for the disks to the index dot html file. Inside the Commons, there are only two tasks here. Just follows instructions and try to comfort them on your own. Because the next video, we'll go through each desk to give them the tasks, are quite straightforward and want to take much time to complete, so have a little bit off practice and see you in the next video. 37. Exercise 2 Solution: I hope you had no problems with assignment. Let's now get street together. So here we have the first great it is aligned to the top left edge off the great container by default in Xavi Scoot. Each s stated that we should first align agreed strikes to the center off the Greek on the vertical axis in order to a shoes that we can use the online content appropriate. Let's open the styles that ceases file finds. Agreed one class and times their ally incontinent center Save the file and Previ. It now is agreed. Tricks or simply Combs and Ross are aligned to the vertical center off the Greek container . Return to the court agentur toe intakes That html file and the second part of the task is to distribute great strikes on the horizontal axis off the Greek container. The space between the items should be equal and the outermost rex must be aligned to the left and the right edge is off the great container, respectively. This means we can use the justify counted property and the value for it would be space between let's reach to the season swell and at this property, save the changes and check them means of Rosen because the result we wanted the outermost left and right columns are alliance to the edges off the great container and the space in between the items looks equal. We can also return to the I D. And instead of using justifying content and the line contents properties, substitute them with the place content property. So the first waiting for it is center for the vertical alignment, as the second is space between 46 horizontal one. Let's previews the result in Sub Rosa, and it still looks the same. The Phil's desk is done below. We have the second greet. It is also aligned to the top. Left edge was a great container. The columns and rows have a week since fight off 150 pixels and a great items 100 pixels by 100 Big self and aligned to the top left edge off each column. Let's return to the Venus coat and check the seconds desk. So here we need to Target has agreed to glass and the fuel step used to send to align the greets tricks bulls horizontally and vertically to the great container. For that I will use the place content appropriate. Let's add it to the class indices as well. Both, where is worried would be center center? Let's preview was the result Ever since seems fine ziggurat checks are now aligned to the center of the greet. Return back. The next step is to language items relative to their combs. Two horizontal and vertical centers here we can use is a justify items and align items. Properties separately. All simply uses a place items property. Well, that's safe. A little bit of typing and at the place right in property with the Wellies off center center Pretty was the changes. You will look at the deaf tools. We can clearly see that each item is perfectly aligned to the center off its coal. Richard was the index that HTML file. It's back step Easter line items 123 to the top left edge off their cones. Recognize the assign a separate cliffs and started the items we need. All simply uses in line styles. I will stick to Zane line style and as you remember for the alignment off individual items , we need to set on them. The self properties first of all I It was the style attribute by using the multiple Kerson . You can do this by holding option on Mike or old on windows and click it was the left mouse button was a vertical alignment with set with the Alliance Self Property and the ready for reach is start for the horizontal alignment. We use the justify self property and the very for it would be left. Let's save the file on previous the changes and the 1st 3 items are now aligned to the top left edge off their combs. We can also use the place, sell property. Instead, return to the goat editor, delete the properties type, plays self who is the reddest off start left and it will pray was the result ever since still looks fine. The next step tells us to line the item number four to the left edge of the Golam and item number six to the right edge. For that, we can simply use the justify self property. So for the force item I type style justify self with the value off left and for the item number six style justify myself. Was the value off right? Off course. You can also use that start and and properties instead of the left and right. Well, it saves the changes on previews. The result. Look at the death tooth on the alignment was the sytems looks good. Finally, let's tickle the last step. So the items 78 and nine must be aligned to the bottom right edge off the combs. The place Self property is also good here. So what argued that items was a multi Corsa and type style blaze self, the anti value for the vertical alignment and the right value for the horizontal one saves a while on previous changes, and we can clearly see that the items are aliant toe the bottom right edge off their columns. The second disc is done. So that was a little practice. Nothing fancy here. But I hope that it helped you to better memorize how each off the alignment properties work and on what elements should we use it 38. Grid Alignment Conclusion: the second module has come to an end. We have learned how to use the CSS, greet alignment properties and read it to applies him in case unit Circle. How one or another property is working just right, which is a correspondent. Video. At this point, the theory behind the sex is great. He's over now we can put it to practice. Let's do this in the next module. 39. Grid Practice Introduction: Welcome to the final Marshall Off the cross. We have covered all the theory behind this Aces great and ready to use the gained knowledge to build something useful. This module is wholly dedicated to pure practice. Here we will apply our CSS Greece skills to build differently I elements that you might encounter in your projects. I recommended towards videos and coat alone with me. Let's no more waste our time and jump to the first lesson. 40. Grid Partners Block: one off The elements of progressing on the Internet is a partners book with a bunch of companies. Logos that is a perfect candidate for the sex is great. So let's make our own here. I have prepared to the temperature or project he just attached to the lesson. Simple. HTML. While with the H one heading and they're up in dif Element the CSS while Where I Rested Some margin on the body and H one elements at a custom formed and center. The content on the beach with Help Off Legs, Books and The View Port, Height Unit and the Container Who our Partners book is a rapper element with the wits off 2080 picks off centered on the page. Finally, we have Images folder with his nine logos inside of it. If I previews the index file in the brother, we're going to see our ribbon element and the age one centered on the beach. So let's get started. Opens the index dot html file. First of all, we need to add the section element with the class of partners and nine images inside. For that, I use the Amit variation. By the way, if you don't know what is, um it and how to use it Inside the V s coat. You can check my free course here on you, to me where I teach in details how to use it. Then we need to add the source and old values for all the image elements. At this point, the HTML structure is set. So let's save the file and previously changes. Here we see our locus, the quite beak, and all of them don't even feet into the view port. Our each one is also out of reach. Let's fix this. Opens the styles. Dad sees us. Well, first, we need to target all the images with the AMG selector and set it to display block and wheat 100% off the parent. Then we need to target the partners class and applies of holding styles. I want to add 100 pixels margin from the top. So we have some space from the H one heading. Then we set it to display. Greet is run on locus. So, to my mind's records, would be quite good for that. We explicitly said them with the great stamp it comes property. Well, that's set each call them to be 200 pixels. We can do it by simply type in 200 pixels three times. Oh, by using the repeat function, let's previews. The result looks much better now. Notice how each image nice defeats into the column. That is because I have said them to be 100% off the parent container. If I switch it off instead of tools, the images will simply return to their respective sizes. Well, that's inspect films. Every call, um, is exactly 200 pixels, but we have a different car. It was a great rose that's also peaks of this moment. For that, you can use degree temperatures, property and explicitly said the size for three rows we have. Or we can use his agreed Outer Rose property, which allows us to set the default size for all the rules. As potentially we can have more than three rows. It would be better to use the great Outer Rose property. Return to the file adds a property to the great container and the world for wheat. I think 80 pixels would be enough safe and preview, and all the rest now have an exact height off 80 pixels. Then we can add some spacing between rows on columns. Let's return to the I D and said them Who is the Gap property? The distance between zeros I want to be 60 pixels and between the columns, 80 peaks off previa was the result. Here I can measure it with the rule to and every since seems correct. At the moment, our greets tricks are aligned to the left edge of the great container. Let's also fixes return to the styles that ceases. Here. We can use alignment property and at the justify content to the Greek container and the very for eat center safe and check the changes scenes. Broza and the Greeks tricks are now centered. The final touch here is to center the items inside columns. The items are aligned to the top, left each of the columns by default, and we want them to be perfectly centered. For that, we can use of the items properties go back to his coat editor and at the Correspondent Properties, the Airline Items center for the Vertical Lyman and the Justify Items center for the horizontal. We can also use the place items, shortened property to achieve the same results, save the changes and previous, um in the Broza. Now all the great items are perfectly aligned to the center off their respective goals. And if I manual said the size or one logo, for example, to be 150 pixels, it is still a lend to the vertical and horizontal center. Well, that's it. With the help of the sales is great. We were able to easily create a section with a bunch of locus and positions them as we want . Let's move on to the next video. 41. Grid Navigation: in this video will make a herder reasonably Gatien legs. There are multiple ways off doing it, but as a topic, of course, is the same, says Great. We will utilize its properties to get the result we want here have images folder with a single logo, html file with some template coat and a custom formed and sees this while linked to it and some general styling for the file. If we pre right now the index dot html file in the Broza, we will only see as a great background. So let's we'll start with the HTML structure. I begin by great in's ahead element with a glass off header inside of it. I it a dif was a glass off heather container. It would hold the header content. Then I add an image element provides a source best and the old attribute Next I type is enough. Element was a class off Neff. It will hold two. They're not, at least with the class off Neff least and five least items with links. The first item will have a class off active. Let's also give names to links. The first is home second articles cert Video Force support and the last one contact. At this point, HTML structure is them that saves a file and Previ it and the squatters like until everything seems fine. Now we can apply our styles. Return to the base coat, opens the styles that's here's this file. First of all, let's targets ahead Class. Give it a week off 100% and the background color off triple E hex value. Next, I want to set some styles through the head. A container. It will have a week off 100%. Mike Sweets off 12 80 pixels Margin said to auto braiding off 20 pixels and the mean height off 80 pixels. Pretty areas that changes and things start to look much better. The next step I want to do is to turn the container integrate, go back to the release coat applied to the container. There, display greet property. We have a logo and a navigation. The local wheat is 200 pixels, so let's get a great templates Columns, Property said. To comes. The first is a local call off 200 pixels, and the second is Neff one fraction unit, so that it would occupy the rest of the weeks off the container. Pretty recent changes in Sub Rosa Look at the death tools here. We can see that there are two goals. The first is 200 pixels, and the second occupies is the remaining weeds. But at the moment, the logo ends in F are not vertically aligned, and I also wanted enough to stick to the right side off its coal. Let's fix this return to the I. D. Let's at the airline items sends appropriate to so that the content inside the combs is centered and wasn't have to stick to the right side of the column. We can targeted by the dot Neff class at the Justify Self Property and said It's will you to write previously changes in the Broza now items sent, aligned and the Left East on the right side. All the container. Finally, let's make the navigation itself look better. Return to severe scoot type in F least cliffs, which is our own ordered police to ease links. Set it to display Great. We don't want each new item here to be on a separate room. On the contrary, we want every new item to be inside and you call, Um, is it probably remember we have a pro pitiful that Let's it was agreed out of flu a property and said it's willing to call him. Starting from that moment, each new item will be added to the least as a separate tickle little at agape between the columns and set it to 40 pixels safe and previous. The changes in Sub Rosa and now we can see the Dow released consists of a single roar and multiple combs, and every column has its own wits, which depends on the amount of content inside of it. We're almost done. Let's tile ceilings by returning to the base coat. Target all the links with enough least a selector. Each link will be displayed as in line block, with the font size off 24 pixels. The Heck Scholar off Triple three braiding from bottom to pixels board the bottom off three pixels Sollett transparent and at a little bit off transition board. The color zero points two seconds is Let's also said the active ends, however, states for that I use the nef least active a and never least a Harvard selectors and said the bold color to the RGB value 153 Soutine 181 The styles are ready. Let's preview is the result. Links look good. The actively has a purple border and it will hover over other links. They also show their boredom. Excellent. So as you can see, we were able to create a header element with a simple left by using only the sex is great and that's tells us how flexible it is. Let's explore what else we can do with it. He was the next video. 42. Grid Frequently Asked Questions Block: welcome to the sort practical. Listen off this year, says greet. Here we will. Great. A simple, frequently asked questions. Block, as you can see right now, is a page is blank inside the index dot html. While we have some boilerplate coat with the letter forms and styles that CS is included in the styles does Jesus while I have a board books, property, set, some margin rece it's and also the letter phone set as the default formed. Let's we'll start with age, tumult structure. I add the main element. It would be our rep and block was the H one heading inside of it, and it's X constant, for it would be frequently asked questions. Then I created the section element with the glass off F A. Q. It would be our great container. Then at the article element was the class off her fake you. There's dish item. The article element will hold the age to head in with the class off Africa. Que There's this item. There's this question and the paragraph element with the class off F A. Q. There's dish item there dish Answer. Let's get the text content with age to heading again. I integrate my enterprise software. Who is space So and it was a paragraph element. I will insert some damage. Lauren text. That's basically our college Demel structure. We need five more article elements to it. I don't want to waste your time and which might happens the same stuff again, so I will simply insert. They permit HTML into the file. You can seem to download the file so much to the listen and do the same. Okay, the aged infrastructure is ready. Let's preview what we have in the browser. A se comptel. The structure looks fine about the content on the page. He's itself ugly. Let's not work on styling. Return to CVS. Coat opens styles that sees this well, let's start with some general styles. First of all, I want to target the H one heading. Press it. Its margin to zero says color value to RGB. Want three Tim 179 foreign size to search a six speaks off and won't wait. Two extra bolt 900. Next comes is a better Griff element. I wanted to have the phone size off 18 pixels formed weight off 300 and the line height off 1.3. As this point, we're done with some general style. Next, I want to target the weapon. Main element. Little be 100% in weeds. Heaven Mac sweets off 1300 100 pixels. Margin from top and outer on the rest of the sites. Finally, a little bit off. Paid in 10 pixels on left and right sites. Then I target our great country in a section with a glass off every cue. Let it have 80 pixels margin from the top. Set it to display. Agreed. I want to have two columns with equal weights. So for this we can use the agreed templates Columns, property and said it explicitly. 21414 Finally, at some spacing between rows and columns with the group property, I seeing 60 pixels would be enough. Let's saves, if while and review what we have so far. Now the content looks much better, and it would have a look. A tower. Deaf tools. You can see that the great country and there was defiant, and you have two columns equal layout. Now we need to style the questions and answer elements. Go back to the I D and I started by targeting the F A. Q. There's this item. Does this question class. I want to rest it. Its margin to zero. Give it a phone size off 24 pixels, front weight off 400 and the Belgian from the left side off certain pixels. I also add to the position relative property so that we can positions that I can relative to the hidden we can create. And I come by using their before students selector. If f a. Q. There's this item there. This question before pseudo selector said it's counted to question mark position absolute five pixels from the top and minus 10 pixels from the left side. Then we set it to display Flex and sent as a question mark. Why plans a justify Contin center and align items center properties. Let's also give it to fix tweets off 20 pixels, the same for the height. Make the collar off the question mark. White phone size 14 pixels won't wait. Seven countries line height said to one. The background Color Wolf RGB 123 10 179 and turn it into circled by plans that border Rijs , 50% was the question element to the radio. Then we need to set some style and for the answer element. F a. Q. There's this item. There's this answer that said, it's margin to 40 pixels from the top and zero from the other sides. Then the pageant off five pixels from top zero from right fly from bottom and certain pixels from the left side. Finally, a border from the left side. Two pixels sold it. How did you be? 12? Three Tim 179 and 0.4 for L for transparency. Here the energy be Will you allows us to change the elf transparency off the color from 100% to 40% at this point by them. Let's preview the changes and now everything looks pretty. The grid is set, the question I can ease present and the left Bardo was answer is also set and have a more transparent people. Color, as far as it goes for the series has great itself. Here we have used on the three sets has great properties and got such a great result is this really proves how powerful is the sex is great. I hope the practice in this lesson was useful to you. Let's move on physical 43. Grid Features List: in this video, we will build a future some block. It is a common element off many landing pages, so why not too great one using that ceases greet as in the previous, We just have somebody six set up in the vegetable file in which we go to the open sense formed from the Google service. The front awesome I can pack. We will need to include Americans into our markup and the styles that CSS While here we only said somebody sick styling, If I prefer is a while in the browser, you can see that the page is totally blank. Let's start with HTML markup first with defines agreed Container for all the features For that, a type of the section element with the class off features least inside the section, I want to add a development with a glass off feature item. It will hold an eye tech with the class off feature. Aiken and the Description block DIF with a glass off feature block inside the description block. I want to add the age to head in Was the glass off feature block Hidden was that ex content for it would be well designed next a paragraph element with a glass off feature block text and also paste some text constant inside it. The last but not least, a simple link that would look like a button feature block link inside it. We type more now we need to get as a form tossem Aiken. If you count here the week before, it is a very popular I can set that any Web developer can use in. He's off your projects. We already have it linked to our file. Be ah si jin service. We need to get glasses for cycm. In order to do that, we go to the Broza, opens the front or some website click on the icon slink and search was I can we need I type pellet in the search field. He ever half a bunch of results. I click on the 1st 1 here. We need to click on the start using the Eiken Bytom and here front Awesome shows us how to read it to our HTML markup. We already have I elements defiant. That is why I will only copas the crisis and praise them inside our element. At this point, the first item is set there would be total off six items inside the least. I don't want to lose your time here, so I will simply place the rest of the items inside the file. You can do the same by downloading the resources attached to the lesson. The only differences between the items, icons and text content was a markup is the same. Okay, let's save the changes and preview what have NZ Broza. So here we can see our text content and as far as like until the structure looks fine. No, we need to add styling toe. Our market opens the styles that sees us well. First, we targets agreed container by typing the features least class. I wanted to have 100 pixels margin from the top and outer for the rest of the sites so that we can center it. Let's also give it two weeks off 100% and the Mac sweets off 12 80 pixels. Then we said it to display greet the rustics items total. So what set? It's 23 column layout by agent has agreed to temperate areas, property and assigned to it every year. With the help of the repeat function, let's repeat it three times and the wits off the column would be 300 pixels with me also Earth Some space in for that I had the Gap Property and set it to H pixels. Four rows and 80 pixels. Four columns Save the changes and preview what we've got. The markup is beginning to change its form. Let's switch on its agreed stools. He will look at the dentals. We can clearly see that the Greeks tracks. I lined to the left edge on the horizontal excess off the Greek container. Let's let them to the center, return to the court editor and at the justify Contin center property previews the result in Sub Rosa. Now all the greats tricks are horizontally aligned to the center off the great container. Next, we need to pay its styling tools, agreed items. I want the I come inside the item to be on the left side and the block content on the right side. We can achieves this with the series as great. Go back to the edge. It'll feels to a target. The item With the future there's this item class set it to display greet. There would be only two columns. So I at the agreed templates columns Property said the first call them toe outer because I want it to occupy only as much space as it needs and the second call them toe one a far so that it would take the rest of the wheat. We also need to add to the space in between the calls Hi types of colon gap property and give it to really off 25 pixels. Let's it a little bit of starting to the teacher. I can class. I wanted to have seven pixels margin from the top. The color off the icon will be the expected Ismael Elio off 03 a nine have for and a phone size off 24 pixels safe and previews the result in the frozen. So here we have our second great defined. There are two films. The color off likens is blue and the block content on the right side of the feature item element. Let's style the rest of the content. I start with the future bloc glass. Let's make it one cocom great with the distance between the rows 30 pixels was that I had set it to display greet and at a zero game property with the well off 30 pixels so that the distance between head and paragraph and link elements who would be the same. These jobs agreed here is not necessary. But of course he's dedicated to that topic, so let's use it. Why not? Next I Target is a feature blockhead. An element arrested its margin to zero. Give it a phone size off 28 pixels and said it's formed. Wait 23 hundreds. Then, before courses the paragraph with the class off feature block text, Give it a phone size off 18 pixels. Won't wait three hundreds and the land height to 1.5. Finally, which target links with the class off feature block link. But this time I will use display in line. Flex property sent us a text whizzing by blinds. They justify content center and align items center properties. Let me also assigned to it the Mac sweets off 120 pixels and the fight off sort of five pixels. Then we said it, too, was black color form size off 16 pixels formed, beat three hundreds, border off one pixel, sold it black and a little bit off transition. Background collar. Zero points, two seconds. Border collar, zero points two seconds and simply color 0.2 seconds. Then signs the horse state with the future block link. Horror Selector said The background color to 03 89 4 Text call to white and the border color to the same value. 03 a nine F four. The style Sodom That's Previa was the result. The title and paragraph. A looking good This earth agreed, is defined this basin between the rows he's equal and the links also turned and blue with a little bit off animation. So now we have a rather pretty features. Least that is one of the ways how the sex is great can be used to style. Sergeant Bocks. I hope you liked it. That's it. See you in the next video. 44. Grid Pricing Plans: in this lesson will use a little bit off the sales says Great to build a price and plans block as usual, I've prepared some basic set up index dot html with links formed cold measure up formed awesome because will use Americans and the CSS while in the styles that says us while we do some general rest it off margin and bidding on elements apply a black background and the white text color. And if I prayer is a pile in the browser, we would only see was a black screen. So let's start has usually begin with HTML. Markup was the first element is a dif with a glass off rapper. It would hold all our content. Next I it on h one element was the text content off price and plants. We follow it with a paragraph element that export spirit off is our price and scales with your needs. Try it for free. No credit card required the H one and be elements would proceed. The plans block next to a greater section with a glass off price and plants. It would serve as a great container. Now we're ready toe hurt individual items. I start by typing a dif with a glass off plan item inside it. I first at the plan item I come dif and I can itself was in the eye element. Was that were you special classes? If a s a fe dish user, he ever using the front or some closest to add the Eiken. Remember that we haven't linked toe our html file. Then I had the age to head in with class off blown item name and X constant developer. Next comes with the price paragraph element with the class off plan item price inside a good type Dole sign 29 and I also ribs a little sign with this up element so that it would be smaller insights at another burger off element with a glass off blend item duration, It will contains a fallen text. Their user forward slash months. Here's the way it a link element Class off plan item Trey and the text Try it with the exclamation mark. Then comes another paragraph element with a glass off plan item free and the text inside three months free. Finally, we add on an order to least with the glass off plan item features and fold five Lee Statham's Inside Let's add text to each item. So for the 1st 1 it would be no great cards. Require it second one team member, cert One gigabyte off Closed Space Force three months off Records History fiefs Free components. Well, that's it. This is a structure for an individual item. We will have three items in total, So let's cup is the 1st 1 and change its content to something. You change the Eiken class to F A S F way This use a difference. Age two to team Prized to $49. It's the second item in the least to five team members. Assert to 10 GB's Off called Space and the Force to six months off Records History Corp is a blind item. One more time changes. I can classes to F A S F A dish Users age two to organization price to $69. Jumped his list. Changes a second item to 30 team members short to 115 GB's off cloud space. Why there is a force 1 12 months off. Records History. The markup is ready. Saves a file on previous in Sub Rosa as far as like until the structure looks correct. But the appearance is ugly, so let's start to style. Our HTML opens the styles that CSS file. First of all, I want to start with H one element, given the margin off 20 pixels from bottom and zero from the rest of the sides. Apply a phone size of surgery, speak self and align it to the center by Satan's Their text Align center property. Next, I want to target the Reppert element and give it the page in from Top and the bottom sides off 100 pixels and zero to the left and right sides. Then I select the Derrick Child paragraph Element said. It's one size to 16 pixels and also alliance to the center. Well, that supply style stools agreed. Country Now types of pricing blends cliff and add to it. The colon rules margin off 80 pixels from top and out to the rest of the sites, then 100% tweets. Max Sweets off 11 40 pixels set to display. Greet the rest replaying items sold that's assigned to eat the agreed stem political homes , property and a very off 14141 before so that the combs would be even insides. You can also use their bid function instead, save the changes, and let's have a look at what we have Now. The content looks a little bit better degree. It is also defined. Let's style the individual items return to the court editor feels to a target. The blind item cliffs. I add to it a pigeon off 40 pixels from top and bottom and certain pixels from roughed on dried sides, says the background. Carla, too. E nine e 60 e Text color to black and text alone. Center. Next. Which target? All icons Plan item. There's dish. I can class. Set it to display flex. Make it vertically and horizontally aligned by a blind justify content center and the line item center brokerages and give it a fixed heart off 100 pixels was on target that I can itself plan Item there. Dish. I come I and give it the phone size or 50 pixels. If you want. You can say the file and review how the content is shaping on the different stages while styling. I will keep going on until we fall. The style of the items fill the eye targets of their age to hidden playing item and dish name. Give it the margin off 20 pixels from top and zero from other sites. Phone side. So certitude, pixels and the front weight said to six hundreds. Then the price. Birkoff Element Plan Item Dish price. 20 pixels margin from sit up. 60 pixels. Phone size, front weight off seven hundreds. And the line heights said to one. Let's also target is the sup element with the Dole sane plan item. There's this price. It's up said it's one size to certain. Four pixels, lying quite off 50 pixels and formed wait to six hundreds. The next element He is the plan item. There's their duration. Give it a margin from top 20 pixels. Phone size off 16 pixels and formed Wait three hundreds. Next, with styles a link element blend item. There's destroy. Set it to display in line luck. Margin off sort of pixels from top and bottom and zero on the left and right. Sites. Baird in 0 15 pixels from top and bottom and certain five pixels on the left and right sides. Then the background scholar Wolf E. To one B one B formed weight seeks hundreds phone size 16 pixels. Lank right off 1.5 one more paragraph elements blend item. There's the SRI set its phone size to 18 pixels formed. Wait to six hundreds and lying hurt to 28 pixels. Finally is on, or at least blend item there. There's features simply assigned to eat the margin. Top 20 pixels Target Individual least items Plan Item Does this features L. A. Set the phone sized to 16 pixels won't wait 23 hundreds line height to 1.3 and assigned to each item. Besides the 1st 1 margin from the top 10 pixels. Blend item Dish dish peaches L A Plus l A margin Top 10 pixels. All right, let's save the changes and look at what we have. Not bit, but we need to give an accent to the second item and make it stand out. Return back to the V s court opens the index that html file and give a second item an additional glass off popular safe and switch to the sisters. Well, let's target it. Plan item that popular. Give it a negative margin. Top off minus 30 pixels to push the little bitter margin bottom off minus 20 pixels to make it longer than the other items. Braiding top off 70 pixels to even with the guns unplayable background collar off one a 00 CD to give it an additional xom and the text color off white. We need to all star get the link when item 0.4 pillar plant item does destroy. Give it a background color off E nine e 60 and the black text color that should do it saves the changes and prism in Sub Rosa, and now the second item stands out from the rest. And generally price and plants are looking good. Let me also add the finishing touch. I want a second item toe. Have an additional tech line at the top, return to the I D. First, we need to add to the HTML markup. So inside the second item additive with a glass off plan item, there's that tag line. It will hold this pen with the text content off best offer safe and switch to the CSS file that's at the position relative to the plan item. That popular class next target is that tag line itself. Plan item. There's they're struggling. Give it a week off 100% position. Absolute zero from top zero from the left side, them targeted spend element Plan item. There's the stag line spin. Give it a front weight off six hundreds line height off 1.8. Position a relative and that index to find all the targets that up to suit a cliff plan item. There's the Stig line after said, That's content to an industry. Weeds to 170 pixels. Position absolute zero front up 50% from the left side. Transform translate X minus 50% to position its center board it up certain pixels sold it e to one B one B, then would lift 15 pixels. Sold it transparent and border right. 15 pixels sold it transparent and finally, and that index was the weather off. One that's all. Save the changes on previously result. And now the second item has a tag line as it up. Making and stand out you and more does the price and plans block. He's done and looks pretty decent. So with a little bit off, the CS is great and other starting properties we managed to transform an ugly HTML markup. Too good looking price and plan. I hope you had a good practice. See you in the next video. 45. Grid Places List: the next project in which we can use this. Yes is great. He's the places least as usual. I've prepared a little set up inside the index dot html file. We have an open sense from Google forms and the linked with seasons while inside, so their styles don't sees us. Well, I do some general margin rece it's and to the open sense won't and said it was a dark background. And the results are enemies. Just holder. Here. I brought six images on one s energy, Aiken. Okay, so let's get started. If I previews the index file inside the browser, you will. Caesar Tages Blank. So I want the least to have two columns. Each item will have a became which we startled. And some additional information festival. We write html markup. There will be a Deve with the class off ripper that will hold the gun tint. Put each one inside it with the text content off. Anyways in places in the world, follow it with a paragraph element. Text content for it will be. Have a look at some best sinners in the world a person can visit. Then we need to add the Greek container. It is a main element with a glass off places. Least it will hold an article element. Class worried is place item inside. It will put a link element that will be a container for the photo. It will have a glass off place photo inside a trip edge a bit. I type a link to the video at Target Blank attribute so the zillion could open in a separate step and a style attribute inside of which we specify the best to the photo Lingle also contained in the elements. The 1st 1 is the name of the photo. Spanner was a glass off pain and the text worried is Grand Canyon. Then we need to end a Supplee. I come. It is in my element was a glass off play I see and a paragraph element with the legation text classification and the text Contin trees, location near beliefs sitting. So that's the block with the photo. Next, we need to add a block with the description Information. It is a dif with a glass off place in, for it will hold a live with the glass off place title and age two elements inside of it with the text content off Grand Canyon. The title block will be followed by a paragraph element with the class off place text, and inside it I insert some description off the Grand Canyon. Basically, that is a structure for our HTML. So we have a big photo with the name I come and application text inside of it and a separate description block that holds a title and a description Text. 05 more items we need to insert. I will cover them so we don't waste our time own typing. You can download the files attached to the lesson and to do the same. The difference is only in text and passed to video was the markup is rating. Save the changes and review what we have. It looks like a lot. Images on their places was a structure is correct, but everything looks awful. So let's start to style. The content. Return to the I D and opens the style that sets us while first we need to positions. The rapper element were targeted. Give it to eat off 100% Max Sweets off 12 80 pixels, 100 pixels Margin from the top and out of for the rest of the sites and 100 pixel spreading from the bottom. Next I targets in the H one element said its form size to future five pixels and takes the loan center, then targets a paragraph that follow it. You the margin. Top 10 pixels, phone size off two into four pixels and text. Align center as well. That's pretty a what we have. Europe is sent it and styles to H one and Berghof elements are applied. Okay, go back to the editor targets. Agreed. Container place. It's least give the margin from the top 100 pixels. Set it to display. Agreed Assign two columns. Great Tim. Political properties here Hands repeat function. Let's also ad space in between the combs with the Golden Gun property and the very off 88 pixels we can makes agree to look more interesting and said to all even combs an additional margin from the top. We don't need to set Rogue IP instead of Kentucky. It's even columns. Police item anti child human and gives a margin top 200 pixels. Will you save the changes and previous them in Sub Rosa inside the developer tools we can see there's a great was defined to equal combs. And every year in column has 200 pixels margin from the top, which ship them a little bit closer to the bottom. All right, there's no style photos in previous court. I target the photo place that there's this photo Cliffs set it to display greet so that we can taken advantage off line and the items inside of it. Also set one explicit column and assigns three explicit Rose greed stamp. It arose property here with the really off auto. One of our outer Ziff Extra is, was the name of the porter, which would take only the space it needs for the text. The second was taken. It would take as much space in as it can, and the thirties was the location paragraph. It will also take as much space as it needs. Then I want each water to have a fixed kite off 400 pixels, a little bit off Brayden turn pixels so that our text one stick to the edges. Then we need to apply image specific properties, said them to the ground. Repeat no repeat positions. Them center the ground position Que? 2% 50% and make them Carver's Holly and block with the big round size cover property at a little frame aboard the property. Five pixels Soul it on the Texas really off F f ce 00 and said its position to relative. I want to cover images with a transparent black bloc so that the text would be better visible on them. Let's create a transparent block we targeted to is there after pseudo selector said. Content to an empty string position. Absolute zero from top zero from left wheat, 100% height also 100% and the background color off air G B 000 0.5 Transparency and that index off to We need to that index property here to positions of black screen behind the text. Next, we need to style our inner elements targets and name spin place photo that's name. Use the grid alignment and position it to the top left corner with the place. Cell property said to start left set one size to 14 pixels position relative and that index off three so that the name would be on top off the black transparent block was the target's location. Paragraph place for two dot location. Place it to the right bottom side of the photo play self and right phone size 14 pixels. Position. Relative that index three to stick it on top off the black, transparent block. Finally targets a plea. Hichem. It plays photo dot play. I see glass. Position it as a central photo play. Self center center said it. Sweets and height to 80 pixels assigns that I come. We're groans property. You're ill passed through the Eiken 00 No repeat and said its background size to cover as the position relative and that index three to stick on top of the black Bloc. That should be for the photo block. Save the changes on Look at what we have in Sub Rosa. Everything looks much better now. We have our black transparent block. The name and location are at the different cardinals off the photo and the play icon. He's has the center. If you look at the diff tools, you can notice how the name and location Ross occupy exactly the spaces in it, and the play I can takes the majority off it. Why are they likely cause the photo he takes us to the correspondent Vito Excellent feels only needs to style the description. Block Return to the editor inside the sisters, while I target is a place in four block and give it a margin top or 40 pixels next to the place title Contender said. It's to display in line block. Give a pageant off 10 pixels, background collar off F F C E 00 and a little bit off. Transform skew X minus 20 degrees to make it to look a little bit cooler, then targeted age to inside of it said it's one size to 16 pixels formed. Wait to six hundreds text. Transform uppercase and negate. This group picked Transform School X positive 20 degrees, then targets a textbook that place there's this text. Give it to margin. Top of 25 pixels, right and left 15 pixels more. The left two pixels sold it F f ce 00 phone size or 15 pixels formed. Wait three hundreds line Quite one point. Buoyant wife and Ellen text to the left for the even. Combs want the textbook to have border on the right side, so let's start with them place item and teach child even place. Text risked spreading left and border left Property is 20 and said Brendan, right to 15 pixels and board right 22 pixels. Soul it F F c 00 That's it. The description block is done. Save the changes on previous um, in Sub Rosa here we can see that the age to hedge and he's looking now like a label and text block has a yellow border on the left for short films and a yellow border on the right . Was they even columns? Let's give her finishing touch to his least and at some animations when we hover over photo , I want the name location I can and black screen blocks to gradually disappear and for Toto scale up a little bit. Finds a place for took lifts, add to eat their transition property said it to transform. One second is in out for the place Photo After pseudo selector, we need to get the upper States set to one and to visibility visible properties and transitions them. Opus T one second is in out and visibility one second is in out. It is, uh, posted one and two visibility visible properties to the name class and transition it with a place to said to 0.3 seconds and the same for the visibility. Add these properties to the location, and I can classes as well. Finally, we needs toe get the however state. So I feel started the photo place. There's this water Hohler and said it's transformed property to scale 1.7 was quite the other elements. Well, that started them place. There's dish photo, however, after pseudo selector, please, There's this quarter hour that name place. There's dishwater, Hauer, that location and place. There's this water power That play, I see said they're opposed to 20 and his ability to hidden. I guess at this point we're done. Save the changes and previous was the result. So if I have always a photo, the name, location and I can disappear in a time spent all of 300 milliseconds. The black screen plays out in one second, and at the same time the photo scales up a little bit over one second. Isa and he would click on the photo. It still works and takes us to the veto. That's it. We have a nice looking least. This year's has agreed to one more time proves to be fending in construction. Such layouts. I hope you like to see a video. See you in the next one. 46. Grid App Tiles Screen: This will be the last project office. Of course, here we will use to their senses great toe. Construct a piece off you I looking like tiles with some fitness up like information as a starting template to have index dot html file Willing to eat a formed called Weapons Front Awesome, Aiken's and the CSS File. The style file contains a little bit off residents, and we also have an image. Is Walter with a single image that we will use in the project? And if separated, our file, you'll only see a black screen. His idea for the project is the following. We greet au I consistent off tiles. Is it up? Left corner and bottom right Cornice will have AB struggles as the center tiles, Who is the image and some fitness information. And for the rest of the space, we will use black tails for the contrast opens a cold digital. First, we'll start with a JDAM instruction, and the main element was a quest off. Yep, it will be our agree to contain them. Then we need to air to greet items. For that, I use an article element with a glass off reptile. There would be 18 tiles in total. Here, I use em it too quickly. Heads, Um was it your style will hold An H one was a text content off a run for feet. And the last tile will also hold H one with the reversed slogan feet for run. Let's also ascent of them a glass off orange tile. Lately, we will add to them an orange color. Then why in detail Number three adds to it a class off digital. With that glass, we will assign background image to certain tiles. Next is a title number seven digital glass as well. Plus it will have a Nikon with glass off every S F, a heartbeat and the age to hidden with the text content off HPR, which states for heartbeats 175. The title number eight will also have a class of big detail. And in my element with the Iranian Aiken glass off every s every dish running was at age two element with the text off 25.2 into eight kilometers and the total number nine digital class as well. And stop which I can with a glass off every yes and for a dish stopwatch at the age to element and the text contents for it would be two hours to winter. Seven minutes was in fine detail. Number 12 assigned to eat is a digital class sums up American with the glass off every yes FAA dish sums dish up and H two hidden takes constant authorities. Good job. You have earned 149 points today. Finally find a tile number 16 and decided to it a glass off digital and to the rest of styles we need to add a glass off black tile. - Okay , as this point, we're done ways. Markup. Save the changes and preview what we have. Let me check the structure. I see that I have forgotten to delete some digits inside the article elements world. Is it lately and apart from that ever since seems fine, but the look is ugly, so let's apply some styles, opens their seats as well. We'll start with the Greek container. That class set it to display. Agreed. We need five combs. So type was agreed. Stampede columns. Property repeat function five times, one before. As for the rose, I want them to be 230 pixels in height. Let's uses their greet el Toro's property here and says this as a default, Will you? And at some space in between the rows and columns use a good property. 10 pixels would be enough. The to solve the style in we need was a great container. Next, let's style greet items. Target the hep. There's their style, Cliffs said. It's to display flicks. Legs, direction. Call him and align. Ever since center, just for constant sense of property in and align items sent him. Then we need to adjust. Aiken's AP There's the style. I cliffs set their phone size to 40 pixels. Target H one elements for in size, 50 pixels formed, Wait 700 and text transform uppercase select H two elements as well. 10 pixels margin from the top phone size. Off sort of four pixels formed. Wait six hundreds. Finally, let's assign different scholars and images. Four tiles just comes. Is it orange style cliff. Give it a big round collar off F 948 to 1 and the white text color. It sounds a black title cliffs simply a background color off one a one a one a And in the images style. Glass off. Big detail. Background. Image property provides the needed Ural the grounds. Repeat No repeat big round size cover and scholar White. Well, let's save the changes on to preview what we've got. Everything looks much better now, but I want the tile with the score. Points Toe occupies three columns on to be exactly underneath the top three digital items. So let's preview how greet in the deaf tools. Watchful line numbers. So was that style to occupy three columns. Underneath are the digital items we need to spend it from the line number two. It was a line number five. We can achieve that by returning to the escort target style number 12. With the lip, there's the style into each child cliff and use a great goal appropriate to you with the really off to forward slash five Previa was the result hands. It'll now is really a streak, a limestone and underneath other digital items. You can also notice that every bridge it'll has the same image applied to it, but we can use a magical property to change that look. Return to the I D at the background attachment property to the digital class and type of alien off fixed, say friends. Preview. Look what happened. Now that image is looking like a whole consistent of different parts in each cell. It's like seeing one movie on several tiers, greens or monitors. Very interesting effect. We can also see that the images quite bright and the white collar looks better with Let's exist, Go back to the base coat. First, we need to create a black screen for the digital items. We can use the suit element with it. It is a position realty property to the digital cliffs, then target and after sue, the element by typing digital after and type was the full in properties content. Empty string position. Absolute zero from top zero from left. Well, it's 100% height, 100% and a background color off RGB 000 zero points. 55 for l for transparency by the screen will overlap the icon and head into, so we need to push them in front. Yeah, I will use Xavi s cold. Multi Carson feature two targets. Both cliffs hold option or old to do it it to them position relative And that index to let's previews the result. The black screen is set and the white text is looking better now. I also need to correct the orange glass was a feel style looks as it should know. We already have a rather interesting look, but let's make it even cooler by applying sums Ready Sleep mission to the black tiles. In order to do that, we need to change a little bit there. Markup opens the index dot html file finds the first black tail adds to its achieve with the class off app, there's their style. There's this constant that if will also hold two deeps with the classle. Yep, there's the style there's this Faith was the first was a glass of front, and the second was a quest off back. Well, that's insert the same markup into other black tile self. Also remove that I want to ditch it. The market is set all right, switch to the styles that sets us while points of electoral cliffs remove the background, color will set the background. Still none and at a perspective, property. With the weather off 600 pixels, the Perspective property will be used by an EP tile content element. Let's targeted. That's well, Give it properties off 100% tweets, 100% height position. Relative transition. Transform one second and transform style with the really off preserve. Three d. We need the preserves ready property so that the front and back parts off the tell would not be flattened by their parent. Next, we need to arrested the position off the front and back blocks. Type the EP. There's the style. There's this place and give it the full in properties position. Absolute heart 100% reads 100%. And Burke Face was a bill to property set to hidden the back place. Visibility property is usedto hide the backside off the faces when they're faced away from the viewer. Then targets is a front sight and give it a background color off one a one a one a and the book site background color as well. RGB will you off 16 1 to 2 215 and at the veterans foreign property rotate away 180 degrees . Finally, we need to great a Our state was there. Their style does this constant element that holds our faces targeted and apply the transformed property with the rotate. Why 180 degrees value and one more moment is too hard, the awful on the body element? Because otherwise we could encounter some issues with the browsers grow but where the tiles start to rotate. All right, I guess ever since he is ready, save the changes and return to the browser reloads a peach. And now, when we hover over black tails, they start to sleep. Their faces looks much more interesting than before and gives a new flavor to our you I that's it. That is one more way off how you can use their sales is great and what effects you can achieve by combining it with other senses. Properties. Really, Everything depends on your imagination. And how good is your knowledge? Off ceases. I hope you like to their tutorial on that. It gave you some decent practice. Let's wrap up of the module in the next video 47. Class Wrap Up and Next Steps: my congratulations to you on completeness. Of course, we have coward every long distance here. I learned a lot of new things as well as practice them so you can be by right, proud of yourself. I hope that now we have a decent knowledge of the sex is great and ready to implement it into your own personal projects. Let's talk about what you can do next. First of all, it's very important to practice the things you have learned. My advice is to use in your knowledge in your day to day work or personal projects. Try to implement their sales, has great properties in your existing projects and experiment with it that will help to strengthens the memory for all the new properties we have covered. The more you practice, the better developer you will become, then it is natural that we forget some things. If you feel like you need a refresher on some sisters greets topic or want to understand things a little bit deeper, treasure would be just over the course. You have an old time excess to eat, so why not take an advantage of it? This is his great topic is not easy, so it would be really nice to remind yourself about some off its aspect. Police also supplies is with Origen off recommendation, for example, on the Mozilla Developer network that will also help you to understand the material better . Next, try to combines this. Yes is great with us early out properties like flex books, floats or in line blocks. Together, they make a really strong foundation for building any kind off layouts, especially as a seamless usage or flex books. And the CIA says greet. Finally, don't stop exploring ceases fills. A. There are many interesting properties like we did in our last project, two D and three D animations, making off shapes with of your senses, sliders, filters, text, Gretchen's and many, many other things. All in old. Keep practicing and learning new stuff every day. The consistency in learning and doing things is that rate that will for sure bring you to the results you want. Set your goals on. Keep moving towards them every day. I guess that's it. If you like the course, consider leaving a review treat Anyways. I wish you best of luck and hope to see you in other courses. Take care or yourself and keep moving forward