Mastering CSS Grid | Hesham Hassan | Skillshare

Playback Speed


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

Watch this class and thousands more

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

Watch this class and thousands more

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

Lessons in This Class

27 Lessons (1h 51m)
    • 1. Introduction

      1:50
    • 2. Is CSS Grid alternative for flexbox?

      3:40
    • 3. CSS Grid terminology

      1:37
    • 4. Grid display property

      2:38
    • 5. Setting columns and rows

      6:40
    • 6. CSS Grid gap

      1:06
    • 7. Implicit and Explicit tracks

      2:03
    • 8. How to use minmax function

      2:27
    • 9. auto-fill vs auto-fit

      2:48
    • 10. grid-auto-flow property

      1:56
    • 11. Positoning items with line numbers

      4:46
    • 12. positoning items with span

      2:29
    • 13. Filling empty cells automatically

      2:42
    • 14. Grid template area (part 1)

      9:01
    • 15. Grid template area (part 2)

      1:14
    • 16. Implicit grid lines

      4:08
    • 17. Explicit grid lines (part 1)

      1:34
    • 18. Explicit grid lines (part 2)

      5:03
    • 19. Alignment properties

      2:40
    • 20. Alignment properties - practical

      3:41
    • 21. place property

      1:40
    • 22. Project overview and how to start

      2:51
    • 23. Create Header section

      12:43
    • 24. Create Overlapped section

      9:43
    • 25. Create Features section

      3:47
    • 26. Create Gallery section

      6:14
    • 27. Create Articles section

      9:54
  • --
  • 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.

6

Students

--

Projects

About This Class

CSS grid is a new way for creating a 2 dimensional layout that gives you the ability to create any advanced web pages layout with an easy way and literally short lines of code.

This course targets all front-end developers or if you are a designer who is coding some HTML & CSS for creating pages/ components layout.

In this course we start from beginning to know :

  • The CSS grid terminology (which are the basis that will help you learn CSS grid easily).

Then Will cover all the css grid properties that gives us the ability of creating advanced and creative layouts. Such as:

  • Grid display properties

  • Grid-template- columns&rows

  • Grid units

  • Grid-gap

  • Grid-auto-flow

  • The explicit & implicit lines

  • naming the grid lines

  • the Repeat and Minmax functions

  • Ways of positioning the grid items

  • Grid items overlapping

  • The grid alignments

And each property you will learn by practice. As there is an exercise file for each explained property in this course, so you can apply it by yourself after each video.

Meet Your Teacher

Teacher Profile Image

Hesham Hassan

Frontend Developer

Teacher

Hi, My name is Hesham, frontend developer and so obsessed about CSS. I've been working with international companies in Egypt, USA and recently Europe. Currently working as senior frontend developer at Netcentric. I will be glad if you could take a look on my first free course "CSS Grid". I'll see you there ;)

See full profile

Class Ratings

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

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

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

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

Transcripts

1. Introduction: Hi, welcome to mastering CSS Grid course. Css grid is a new way for creating two-dimensional layout that gives you the ability to create any advanced width layout with an easy way and literally short lines of code. This course targets all front end developers. Or if you are designer who is good in some HTML and CSS for creating pages or components layout. In this course, we saw from beginning to know, this is, is great terminology which are the basis that will help you learn CSS grid easily. Then we'll cover all the CSS grid properties, such as the grid, display, grid template columns and rows, Grid units, gaps, grid auto flow. The explicit and implicit lines help to name the grid lines, repeat and min-max functions, ways of positioning with the grid items, grid items overlapping and the grid alignments. And each property you will learn art, practice as there is an exercise file for each explained property in this course. So you can apply by yourself of the reach video. Not only that, we will apply all these CSS grid concepts, and properties in real projects, a webpage that has been designed specifically for this course. So we can practice all the CSS grid features and apply it on developing basic and advanced layout. So who am I? I am Hashem hasn't senior front end developer for more than 80 years. I've been working in different multinational companies currently in Germany and work at Net Centric. So what are you waiting for? Get started in learning CSS grid? 2. Is CSS Grid alternative for flexbox?: Choroid. What is CSS grid? This grid layout. Css Grid is a layout model that has powerful abilities to control the sizing and positioning of boxes and their contents. Css Grid is optimized for two-dimensional layout. What does it mean by two-dimensional array or why we need it at all as we have already Flexbox and can be easily initiate or layout. All right, The first that Flexbox is used for one-dimensional grid layout, but CSS grid forth two-dimensional layout. What does it mean? Imagine that we have this layout that we can initiate is l0 by CSS Flexbox. Flexbox is one-dimensional grid. So we can determine what's our layout going to be one-dimensional in rows axis, or one dimensional in column xs, or both of them together as we have in this current layout. But when we have different layout like this one, it's hard to determine whether this layout going to be in a row axis or column axis. And that's why he sees is grid is much, much better for two-dimensional grid like this, easier and more flexible in implementation. Of course, you can implement this layout by using Flexbox. But you are going to face a lot of complexity to achieve this layout using Flexbox. Another feature for CSE is grid that's less mark-up. What does it mean? Imagine that we have this simple layout which contains contents, one, content to an aside. These are three elements. Can you achieve that by using Flexbox? Actually, no. You have to do a workaround which is simply wrappings these two containers by another container wrapper. So we can align these two container with the aside element set we have with the CSS grid, you don't have to add a wrapper on these two contents. We can easily achieve this layout without adding additional markup like we had in the flexbox situation. And this is a simple layout to just to demonstrate and imagine your website has a lot of content, a lot layouts, and you're going to add more unnecessary mark-ups just to achieve the layout. So by CSS grid, it will be much easier and less market. That doesn't mean flexbox. We are not going to use it anymore. Absolutely not. Flexbox is much better for aligning content that's inside our layout. However, as the CSE is grid is better for adjusting the layout. So for example, our simple, our simple layout, as we have discussed, it's easier to implement it using CSS grid. But then for example, we have a content inside it. And as a design requirement, we need is a call to action element to be aligned to the bottom with it as a text flints matchings, a court height or not. So this can be achieved by CSS grid as well, but easier to use flexbox for aligning the content that we have inside our layout. So again, better to align and setup your layouts with CSS grid and using Flexbox for a linings the items. This will be more demonstrated in our project section of this is just simple example gives you the idea and the main purpose of both Flexbox and CSS grid. 3. CSS Grid terminology: Sees is grid terminology. Before we get started and deep dive in CSS Grid Concepts, it's much better to know basics of CSS. Grid terminology exists. Layout as exemple. It contains the grid container and the grid cells. So we have 0 upper or the parent element, we call it grid container. And each directly child, it's called grid cell, something else we call it grid lines. The grid lines can be vertical and horizontal, divides us a grid and separate the columns and rows, the grid track simply you can be a column or a row. This is, we can call it grid track or grid column. If it's in horizontal direction, we can call it grid track also, but to be more specific, we call it grid row. Grid area. It's a rectangular space. It can be two items by two items, like we see in this example, can be three by four, can be ten by seven wherever. But at the end it's a rectangular space or rectangular area. So don't worry about the grid area week we will cover it in more details in the practical examples. And finally, we have the grid gutter or is a great gap, which is the space between the rows or columns. So we call it a grid gap or the grid gutter. So all of these are the CSS grid basic terminology. We just had a quick theoretical look, but it will be more obvious in the practical examples. So let's get started. 4. Grid display property: Now we are going to try the first and important properties that we are going to use a long week creating a grid layout. So the first thing to initiate a css Grid is to use the display property, which takes two option. And simply to apply the CSS grid to your container is to apply the display property grid. So if we inspect here this container, and here, which has class great container. And this is a parent that has four items. And these items will be called like grid item or grid children. And now simply to apply or triggers the CSS grid to give a parent or as a robber, display property grid. Save. The nice feature here in Firefox def tool that you can hear click on the grid world to highlights a grid layouts that you have been created with her from here or next, the grid value. So it helps to visualize the grid layout for you and make it easier to debug and create your layout. Also nice feature here if we go to Layout Panel, we see already is at grid container activated because we clicked here and we toggle it from here as well. And we can overhear on the items that we have. And here we can display line numbers that will visualize Zen line numbers for us and will be easier for us to track and determine our items, start and end lines. The same thing here, we will explain it later. The display area names here with no area names because we didn't apply the grid template area yet. And also here we can extend the lines infinitely. So we can see here our grid lines extended horizontally and vertically. And the other grid value that we have also it's called inline grid. And as you see here is a difference is that inline grid resizes as a container based on the content width. Whether the grid, it automatically initiate full widths roles for each item. 5. Setting columns and rows: Welcome back. And after we created our grid container, we want now to set up our columns and rows. And to achieve that we have two properties, grid template columns and grid template rows, simply grid template columns. We can use it for determining our columns, how many columns we want and what's the size of each one. So if we can go here for grid container has grid display property and tight grid template columns if we want, for example, to create a two columns. So we type the size of each one. It says the first one is 40 pixels, and the second one is 80. Click Save. Here. Now we have two columns, 40 pixels and second one is 80 pixels in width if you want it as a percentage for sure weekend type, 50 percent and 50 percent, we have now simply two columns. If we want to have three columns are in different widths, an indifferent units, so 30 pixels and the second one is 40 percent, and the third one is O2. Click Save, As we see here is the first one is 30 and then 40 percent ends in 0, 2, it takes the rest of the widths left of our grid container. We have a specific unit here that can be used only for CSS grid properties, which called a fraction unit. And fraction unit, we can simply write it as f r. And it means like a percentage. But instead of doing complex calculations, we can use it to create columns that have relation in the witches. What I mean by that, if you want, let say it creates three columns. Each columns is the same width. So we can simply type 1 fraction unit, 1 fraction unit, and one fraction unit. Click Save. Now we have three columns are equal in size. If you want, like whatever the codon number, if you want to increase and add more columns are in equal in size. We can achieve that if we want, for example, the first call loans to be doubled in size compared to the other ones. We can simply type to FDR. And here we see all columns are equal in size except the first one are in, as it has a double size. And functions that we can use it here for 0 value is called repeat. So here in this example, I have 12345. So five values, I can simply write them in two parameters. The first parameter is five, and the second one, the actual value that I want to repeat. And then I can delete this value. Click Save. And now I have the same functionality, so it's one fraction repeated five times. And also I can use it also. I can use, of course, also like this. So here it repeats 1 fraction unit five times. Not only that, I can, for example here, add a specific better that I want to repeat. So let's say for example, I want a pattern here as one fraction unit and Zen, 40 pixels. And then 40 pixels and click Save. And as you see here, I have the veteran repeated five times 1 fraction and then 40 pixels, 1 fraction, 40 pixel and so on. The same thing can be applied for zeros by using grid template rows. So if we can go here and type grid template rows. And let's say the first true, I wanted 50 pixels. And the second one, let's say 80 pixels save. And as you see here, very helpful tool enables a grid visualize here, if it's disabled, you can simply here click on grid value. So we can hear sees the first row takes 50 pixels in height and the second one takes 80 pixels in height. And to see here is the second row. We can simply just add more grid items and we can reduce here is the columns to exist. So we have here 1 fraction unit 40 pixel repeated for the columns. And four zeros is 50 pixels and 80 pixels for the second 14 zeros, we have 50 pixels for the first row and for the first row, and 80 pixels for the second row. And the other takes automatic. And the other rows, if I didn't define the height of them, it takes o to hide based on the content inside it. And one last thing that we have a handy property as a shortcut for these two properties, which, which is called grid template. And grid template here takes two values, the first value rows and then the second value, four columns. So what I mean here, we can simply take this value which is zeros value L edit here. And for the columns, take the column values N edit here. And we don't need these two lines anymore. Click Save. And it gives, and it gives the same result. And we can go to here. Sometimes you forget what the first value is for n, what is an x-value, four columns or rows. We can simply here click on this icon and it shows us the first value for the rows. The second one forms a columns grid template area. We will have it in a separate video later. That's it. I'll see you in the next video. 6. CSS Grid gap: Another nice property is that we have, is a gap between the cells, the gap between the columns and rows. We have simply here a property called column gap. And if we type, for example, 20 pixels, save, and it applies to any pixels as a space between each column. The same thing for the rows. We can say Rho gap. Let's save five pixels. Save. And it applies 50 pixels as a space between the rows and the same as we have a grid template as a shortcut for zeros and columns, we have also GAP. And the first value for rows, five pixels, and the second one for 20 pixels. But here we don't type slash as we did here in grid template. And we can hear comment or remove these properties. Click Save, and it gives the same result. 7. Implicit and Explicit tracks: One important thing that we should consider, why are we creating our grid layout is the explicit track and the implicit track. The track is something that you define by yourself. So for example here, if we defined on these columns and remove this value, and let's say we have to repeat one F2 if our ad click Save. So here we defined explicit columns and as you see here, zeros are defined itself. We didn't define the rows, but it created by the grid itself and each item float automatically in a new role. This is called the implicit grid. The implicit grid created automatically. And the explicit grid is something that you defined by yourself and how we can control the implicit tracks that will be created automatically. So for example here, let's define as well as the grid rows. Grid template rows, let's say 40 pixels and 70 pixels. Click Save. And we see here we defined two rows. So the first two rows are explicit. We define it by ourselves. And the other rows are implicit, z, dx, or too high and float automatically based on the content. We can also control these implicit rows by using property grid 02 rows. It means the automatic crows that will be created automatically, or let's call them implicit throws. For example, let's say 90 pixels. Click Save. Now all implicit rules that we didn't define their height, the 619 pixels as height. That's it. See you in the next video. 8. How to use minmax function: Welcome back. In the last examples, we have defined our layout using the grid template rows and grid template columns. And we defined a fixed sizes for each column or row. But in general, we want to build a fluid layout. So it doesn't make sense to use effects at sizes for our layout because we don't know how much or how big the content that will be in our items. So for example, here we have one character in each item. Let's copy this paragraph. Add it here. Save, and keep in mind that we defining zeros by 60 pixels for each one. And see here, our layout is broken because we define the 60 pixels as a height for each row. And here is the solution comes with min-max function. Min-max function that takes two values is a minimum value and the maximum value. So for example here, instead of typing 60 pixels, we can use min-max function by adding, for example, 60 pixels is that we want to keep as a minimum value. And the maximum value, we don't know here how big's the content will be, so we can have it auto, save. And nc here our layout is fluid and not broken anymore. The same idea, we can use it for building a responsive columns. So if we comment this line and assume we have a fixed sizes, four columns, 80 pixels. See here again, our layout is broken. And similarly we can use again min-max function instead of z fixed and value. Adding min-max, whatever is the minimum values that you want to add if you want to keep the 80 pixels, Save. And here our columns are fluid and when I resize, I have the minimum value, which is 80 pixels, and the maximum value, our O2, which is responsive based on our content. 9. auto-fill vs auto-fit: Welcome back. In the last example, we have seen how we use min-max function to add the minimum and max values to our column and to avoid breaking the content inside our items. One thing here we are missing about the courtrooms number. So for example, if I added here in the ribbit for because I have four items and the minimum and maximum value is 80 pixels, NO2. What if I have more items and it might be increased dynamically later? If I click Save, see here is that as a new items are adapted in a new role. And if I want to keep items all in one row, so I have to go back here and count them. Okay, 12348, then I have to type it here, save. Now I have the items in one row, and this not a good solution for the long-term, as well as the items are not responsive. I mean Z are not float below each other's stills or layout is not responsive. The solution here is be using auto-fill. Auto-fill here, I don't have to count the items anymore and it adapts layout to be responsive. So if I click Save and go back to the browser. So now I have the items in one row and z are fluid. And you see here is a columns are fluid below each other based on the size. The other values that we have, which is pretty similar, which is auto fit refresh. And we see here it's pretty similar or act exact like autofill. But what is the difference between same? If we remove the extra columns that we have added here, save. We see here is a four columns, takes the full size. However, if we go back to add autofill, save, we see autofill fits items based on the content size insights and, but it's still fluid based on the container size. If we go back again and add auto fit, Save, and we see all to fit, it doesn't consider as a maximum value, which is O2 we have added here. It takes his items and fitted based on the container size. Still also wrapping items and still also flowing z columns below which muscles. 10. grid-auto-flow property: Welcome back. And other properties that we can use in our grid container or our grid wrapper is called grid auto flow. Grid auto flow is responsible to set our grid items direction will be rows or columns. Here in our example, we set on the display grid property and these properties are commented. But once we said display grid, as you see, our items takes 0 directions, each item beneath each other, which is rho direction to this direction, to a coelom direction. For example, we had the property grid template column, and once we set it, it takes the colon direction. But what if I want to change the direction without settings a column sizes? So back to the code and simply I can use grid auto flow and set it to call them Save. And here are items set to column direction without setting z column sizes using grid template columns and the chicks a default value, as we have said it, it's a row, the erection, we can comment this property and go to compute it. And make sure to check browser styles. We can search here for grid auto flow. We see it has a row value by default. And once we change it to a column, it sets our item direction to a colon. It has another really important value, which called dense. But we will take look into it later when we go through our grid items trying to size each one to a different size and see how dense will help us to fills the empty spaces between our items. But we will take a look into it later. 11. Positoning items with line numbers: Welcome back. We have tried all grid properties that applied on our grid container or our grid wrapper. Now, let's get started with the first and important properties to control our grid items or the grid children. So first properties that we have is two properties for controlling the grid. Columns start and end for the item and grid draw start and end to control the start and end of the item row. For each lesson, I have implemented a challenge. So our targeting, our grid container is to implement and achieve this challenge. Screenshot is the target here that we want to position and size our grid item number 1 to be here in the middle and take two rows of height. If you go here to our grid, go to our grid container first, click on Grid property, and click on Grid so we can see our tracks and line numbers. If you don't see is a line number in your browser, you can go to Layout Panel, scroll to grid section, and make sure that displayed in line numbers is checked. Let's focus here on our grid. Item number one that we want to move it and size it. The first properties that we have, grid column stores and grid column end for defining the column starting end. So here in our case, our grid item 1 is started from grid line number 1 and end in grid line number two. What we want here is to move it to the second column so the item should start from line number two. And in inline number three. We can do that by these two properties, grid column Stuart and grid column in the let's go to our editor. Here we selecting our grid item number 1. And the first properties that we want to define is grid column start again here our grid columns start, it will be from number 2 and grid column end. Let's go back to check, should be here on number three. So grid column end will be number three. Click Save, and Go Back. See here, our grid item moves between line number 23 as we want to achieve based on the screenshot. One thing left here is we want to size our grid item so it takes two rows. So we want 0 stored in line number one and end on line number 3. How we can achieve that by using as well grid row starts angry Boudreau end. So let's go here and define our grid. Row starts is one and grid row end at three. Save here we have our item size to take rose as a screenshot in our challenge. One thing here that helps us to write the properties Foster is a great column and grid row properties which are short-handed properties. So grid column property is a shorthand for grid column stored and grid column end. Let's see here that we can use grid column and the first value, It's 0 Start which is two. Then we type slash, then adding the grid column end. That's pretty easy. Then we can combine these two properties. We don't need them anymore. Back. Still the same layout and the same thing we can apply by using a grid row. We can go here and type grade row. The first value is a grid row starts which is one type slash, adding a grid row end value, which is three. And then we can combine this property, these two properties as well, save and as we see here, we achieved the same layout by using only grid column and grid row properties. If you forget what the first value is, it start or end, you can go here to our items that we positioned it. As you see here is a grid column. You can click on this icon to see what the shorthand for this property. So the first value is grid column, start to grid column end is three, and the same for grid row. 12. positoning items with span: Welcome back. We have another challenge to position and size our grid item again, and we're going to use is a spank keyword. But first, let's implement this challenge by using, this is a line numbers as we have learned in the last video. So we have our selector for item one, and we're going to use grid column. Start should be from line number 2, slash, and grid column end shall be lane number 4 or minus1. Save. Then we need to define grid row stored. As we see in the challenge should the two slash, we can count it here. So 23 For five Save. We have implemented the challenge and other ways that comes in handy by using the span keyword. Span keyword represents the item size in cells. What does it mean? If you look here to our grid item and it checks the widths, It's equal to two cells. Two cells here we can translate it to two spans. So here we defined the grid column start, which was two. And then we don't want to count the line numbers. We can define the widths by using suspend keyword and our width equal to two cells. So we can delete the four n-type span to save and gives me the same result. If we type span one, it will be equal to one cell in width. If we typed span one, will resort the items and applies a width here to be equal to one span or one cell. Let's back here to our challenge and trying to achieve it by using spent two for the width. And here, if we look to our grid row height, It's equal to three cells. It means spends three. And then here after we define the grid row start, and then we want to type span three instead of inspecting the line number so we can use the span keyword and type suspensory save and gives me the same result. So we have the two ways and both of them we are going to use depend on the case or which is easier for you based on the design to count the cells or to check the line number. 13. Filling empty cells automatically: We have talked before about grid auto flow. And we have seen how we can control the grid. Items are erections with using grid, auto flow, row or column. But we didn't talk about dense and I prefer to talk about it now after we have learned how to position the grid items. So let's say we want to position Grid 2, 4, 5, and let's say 12 to grid column three. We can do that simply by selecting each item. So item 2 and grid column store three. Let's see item to how it moved. Now item an item to move to grid column 3. And let's look for example, 4, 7, and 8. Item. For item 7. Item 8, Save. And we see 2478 moved explicitly to grid column three. And you see here there are empty tracks. Because I moved these grid items explicitly. To solve this issue, cell can use grid or overflow. Dense. So dense simply fills the empty tracks by the other tracks, the tracks that I explicitly selected 24, 7, 8, or here in column three, and the other following tracks goes to the empty tracks. So simply is that's it. In addition, also, I still can control the grid direction by adding before is a dense value column and then space dense. So now my grid container in a column direction and also applying the dense value, which means I still in column 1 and 2, but 3, 4, 5, 6. So it goes to the column direction from top to bottom and then goes to the next column and also still fillings empty tracks. If I move explicit items, I can also say row space dense. So it goes to the rho direction one and then Er2 because it's smooth explicitly 3, 4, 5 and sends an extra 0, and so on. 14. Grid template area (part 1): Welcome back. We have another new property called grid template area, which helps us to set up our layout in a very smooth way. For example, here we have our items. We have four header for page content, for sidebar and for footer. And we want to achieve this layout by using grid template area property. We can achieve this layout, of course, by grid template columns and rows and defining the column start and end for content and said bar and leaves a header and footer as Zr currently. But we want to give this example a try with grid template area with would be easier for us to set up the layouts using grid template area and inside the grid container which has display grid property, we can apply here, the grid template area. And here in our grid template area, we are going to write our layout by your roles. What I mean by that, if we can go back to the screenshot exemple, we have here in the first row, the header, the second row, content, and the sidebar. And we see here is a content area takes two-thirds of our row and the sidebar takes certain of the 0 width. Here adds ends. The footer text is a full roll like the header. So the best way here, because of the content doubles the widths of sidebar. We can imagine that we have three columns and content area. And content element takes two columns and sidebar takes to incite Bartok's one column. So here we are going to write each row in double quotes or single quotes, the first row that has the header. But as we have three columns on each row, we are going to type it three times header and header. Then I prefer to press Enter and press Tab here to indented. And then let's go to the second row definition by pressing Enter and adding a new double-quotes, again, write each area name for the second row. And as we mentioned here, the content takes two column and sidebar takes one column. So we are going to name content, content and then insert column that has the sidebar. Them press Enter, then defining the third and the last row, which is the footer that takes the full width of the row. So we'll type it three times because we have three column. And see in our layout definition we intended to have three columns on each row. So we should write in each row the name of each column. Posterior hashing hit the limited, therefore they don't save. And back to our example. And we don't see here. We see here a changing of the layout. And let's see, and we see here once we define the grid template area, each element takes the actual width based on the content inside. But we have a pretty nice tool that helps us to inspect the grid template areas that we have written. If we can go to our grid container, enable the grid visualizer and go to Layout Panel and zeros option called the display earlier nims. And once we click on it, we see our names that we have given to our template area. The first rose at has header, the second content and sidebar, and the last row for the footer. So last step here, we want to position and align each element here based on Z template area that we have given. For example, we want to as a header content to fit this first row. The same for content sidebar and finally for the footer. So we can go for each one is explicitly and grid column and grid code on is shorthand for grid columns Stuart and grid column end. So instead of defining the column line Stuart and column line end or using spends, we are going to give z template area name here is that we defined in our container. So our header, we want the element header to fit the first row. The first row takes the name, header and content. We're going to use as well grid column and give it the name content the same for sidebar, grid, column sidebar. And finally for the footer, grid column, footer, save. Go to our page. See each elements that already positioned based on the template area names that we have given. We can hear it disables the area names. So we can see our layout. That's already finished by using only grid template area. And here for the height, we can define explicit height for our second row. So we go to our grid container and give grid. Template, throw the first one we want to keep it. So give it one FOR based on the content size. And we want the second row to be responsive based on the content. And we can also give it a minimum height. So the best way to give minimum and maximum value is to use min-max function. And let's say the minimum value is 200 pixels. The maximum value is 0, 2. For the footer, which is the third row. We can give it one FOR save and reload the page. And here we have our challenge implemented exactly like this screenshot. So we set up a robust layout for our page header, content areas, sidebar, and the footer by only using the grid template area. So for example, if we want, if we don't want the footer to acute full row, for example, we can skip this third column and add dot, click Save. And we see here is a footer takes two columns on the ends and columns, which we added a dot for it. And think also about the flexibility that we can take from grid template area. So for example, if we want the sidebar to take the full height, we can go back. And here instead of header, we can sidebar. Sidebar. And in the third row, the last column should take also sidebar and see sidebar doesn't fills the area in the top and the bottom. And we see here that doesn't fill the full columns that we have given. And the reason if we go to the sidebar and check the properties that we have given, we give it grid column only. Wear for sidebar based on the layout, the sidebar is occupied in the second row. So to extend it to the first and the third row, we should also give it grid. Grid row and type side bar. And now was a sidebar occupied, being occupied in the third column fall height. So again, because the sidebar was occupied in the second row based on our grid template areas that we have defined. And the sidebar we have defined using grid column only. If you click on it. It's a shorthand for grid columns taught and grid column end. But for the vertical positioning, we need also the grid row, which is grid row Stuart and grid row end. But even easier instead of these two properties that we can use, grid area and then give it the name of sidebar. So if we go back to our code and instead of using grid column, we are going to add multiple cursor here and change it to grid area. Save. It work is the same. And if we click on this cursor to what this shorthand for, it's a shorthand property for grid row, star grid row, and grid column start and end. So easier to use grid area if you want to use explicit property grid row or column, you can use it as well. 15. Grid template area (part 2): There is a big advantage is that we can take from grid template area that changing the layout structure in multiple Viewport size. So for example, assumes that this is the mobile layout that we have done and we want to change it when the screen is larger than 800 pixels. So we can copy here is the same selector for grid container. Paste it. And we don't need to repeat the display grid property. Even this end assumes that we don't want to change the rows, for example. And here we can play with the grid template areas as we want. So for example, if we want thin desktop screen size, header takes the full row and the same for the footer as well. Save back to our page. Let's change the diff tool position to the right so we can resize with it. You see the layout, change it once we switch between the two view port that we have defined. By just changing the grid template area ends that's revealed the importance of using grid template areas that makes our life easier to set up our layout and change it in multiple Viewport, as we have seen. 16. Implicit grid lines: All right, Something happened actually when we created our layout using grid template area, which called the implicit grid lines. What does it mean? When we define our grid template areas? And we were able to achieve this layout, you have seen that each area has a specific name, header, content sidebar, and Fuhrer. And actually something happened in addition, which called the implicit grid lines don't freak out by z steams. It suggests the start and end based on the template areas that we have defined. For example, we have the header here, which has a row line in the top, row line in the bottom. And from the left a column line and column line as well in the end line rows that's on the top called Heather Stuart, and in the bottom here called header end. And this line also has another name called Contents start because the content area started here. And it has another name called sidebar. And you might guess, of course, because the sidebar area started from here, the same thing for the column lines. Here. This line called the header is also called content Stuart and called footer sort because the photo content ends header started from Z slide. And in the other side, header and sidebar end, footer end, because also z's areas ended here is that simply is the implicit grid lines. Let's see in our example how we can use it. So here if we go into inspect our grid and going to the header area, for example, we can see the properties that we have applied, which called the grid area head. Or if we open this property to see what is its shortcut F4, we can see four properties. Has a grid row store columns, third row and column nth, and all of them has header. That's how Grid works. In another words, if we can copy these properties, for example, and going here, instead of grid area and typing these four properties, Save. And we see the same layout. But we prefer to use a grid area as a shortcut for all these four properties. Let's try to use the implicit grid lines. Let's say that we have the header element to store from first line, which called header restored or content start or footer start and end the BI content. So we can go and grid column headers starts slash n type is a line where we want our header to end, which called content and save header start from header store line and end by content source. And of course, as we know the first line that has now three names. So we can use it. Either content start or also footer starts, because this line has a three names, as we mentioned, the same thing is that we can deal with the grid rows by using the implicit grid lines. So we can talk your greed through. And we want the header to start from header line, which is in the top of our layout. And let's say we want to stretch it to the end of our layouts, so it goes to the footer end save. And we can see this particular changes because already the content and the footer are occupying this as rows. So for the footer comment, this line of grid area, the same for is a content saved. And we can see our grid row property which has applied to the header, can occupy things ahead or from Heather Stuart line till the footer and line. That's something important to know that Z lines are implicitly created because in the next lesson we are going to learn how to give explicit names for our grid lines. See you in the next video. 17. Explicit grid lines (part 1): Welcome back. This have a look about naming explicit CSS grid lines. Assume we have a great container that has grid template columns property for one if our three times, which means that we have three tracks. And, you know, between each trek from the left and the right side, there is a line. The point is that we can naming each line explicitly by ourselves. For example, assumes that we want to name zip first slide, and the last line. We can do that simply is as him property and the same value. But before the first column value, we can swipe here our LIBNAME, and for naming the last line, we come after the last value of the last column and type for example, outdoor dash n. So imagine it like this way. We have three tracks and we'd just giving a name for the first line and the last line like this, the same thing if we want to name each line, for example, I have outer store, outer end lines, and I have the center track. I want to define the center Stuart N the center. So is the same value we have seen for the first enzyme lost, like naming and coming through the center column value m before it, we thought center stores and after its center end simply sets it. Same thing can be applied for zeros as well. We can name each line explicitly. Let's have a look on exemple and how we can get benefit of this. 18. Explicit grid lines (part 2): Let's apply some examples we have seen in the last slides. We have 15 columns in a container grid. And so if we go and inspect this container, we have here the great container which contains 15 items. Let's go to the code example. Here. The 15th item tracks and the grid container has grid template columns. Repeat one if R, By the way, I can name also lions explicitly inside the repeat function. So for example, before the value I, type square brackets and name it, for example, column Stuart, and authority. Name the last line of column. What will happen here? Each column will have column start line and column end line names. So if we go to the example again, and luckily during the time record of this video, google Chrome browser has enabled finally, the grid visualize tool. So I have here is a grid container the same like Firefox. I can enable NCEES grid lines a number. But what's even better than Firefox four? Now, if I go to Layout Panel and here choose option show Lie names. So I can here see the line names which are not currently exist in Firefox. And this is a really nice feature. So we can see each column now has columns start line and column, int, column store line and column in the same thing till the last column. But if I want to name all these are columnstore ends a coelom end of my container. Or I can't use a repeat function in this case. So let's go back and remove the repeat function and type it manually here, Let's name it out or storks. And then types of 10 if our five times. And then here the last line will rename it as outer or upper end, any name that you want to give a save and enable the grid visualize tool. So I have here the outer stylers and outer edge. Let's try also to name the center column lines. So the center here in this case, which will be the cert, and let's give it a name, for example, Centre stores and after is a value type center n Save. We have defined also is a column center. If we think about this in a calm symptoms that we have defined, I can move any item easily and position it 26 column center. So for example, if I want to move this item 1 to center column, I can go directly to item 1 and type grid column center. What's happened here? It moved automatically to the center column. Grid column is a shortcut for grid column sort. N grid column end as we named explicitly, then line start, column, Center, Start ends align in the center. And so this column area named implicitly center. Let's apply this to our code. So type item one grid column sensor, and let's give it a background color. We have color variable purple. Save, and now we have item one moved to the column center. If I want to apply for another item, let's say I M for as well. It's moved easily to the column center. I can also apply it in a more generic way. Let's define a general class called column center and use it for any item. I want to center it in my grid container. So let's name this one, call center and gives this class for any item I want to center it. For example, I'm engine applied to any item. I want to position it to the column center. For example, here, items, item 5, 9, 11, Save. And as you see, I moved it easily to the center. And of course, if I want to fill this empty tracks, I can use in grid, container grid all to flow dense fills, any empty tracks automatically saved. And here is a grid overflow dense applied to migrate container. And all the item I have given column center class, I'll move to the column center. 19. Alignment properties: Welcome back. Css grid alignments, which is pretty similar to flexbox properties for alignments. So we have in CSS grid properties which are justify content, align content, justify items, lie, lie tells, justify myself as a lens. For us. The first look, it may be confusing or difficult to remember which property I want to use. Let's simplify it in a nice way to have any confusion in the future. First thing we need to know that justify worth is related to z, x or 0 x's. So whenever I use justify, it will align items or as a container or row axis, then align word in any property is responsible for alignment in y or z column xs. So now we know any justify property is assigned to horizontal alignment. Any align property is aligned to the horizontal, vertical, or is a y column xs. Okay, what about z? And let's have a look on each one. Content. I can use it to the parent. The great container, our case, once I give it, justify content stored, for example, it will move all the container items to the story. The other way, if I give it, for example, justify content and we'll move it to the end. And as you see, justify is aligning in a horizontal direction. Justify items or align items are responsible for IT. Alignment itself. If I give it to greet container justify items, start for example, will align all the items called in to the store. The same thing if I give it justify items, n will align what's inside each items. And of course, if I used a line items instead of justify items, it will align vertically. We will see it in a quick example. The last two properties for Justify cells and colon cells. This can be applied to a particular item. For example, if I have item Sue and I give it justifies self-censor, I want to give item two different alignment or I want only item to be, could be aligned center in the horizontal direction. I give it justifies self centered. Let's give it a try. Practical example. 20. Alignment properties - practical: Welcome back. Let's give a quick Troy to alignment properties that we have seen in the slides. So let's inspect the great container that we have enabled the grid visualize two. And here, for example, if we're trying to give justify content, for example, and give it centric will be applied. Why is that? Because we have all our columns in a fraction unit, which is stretchings the columns widths based on the grid container widths. So twosies alignment effects we need to give size for each column. So let's say one pixel reload. Now we have here space, so we can align horizontally as well. We need extra space in the vertical direction. So let's give a grid container height, let's say 500 pixels, save. And then now we have widths and heights. So we can see is alignment effects. So now we are on grid container, which has a display grid. And let's try justify content for example, and then press Tab Zeno. We have here all the applied values ptosis property and we can navigate it, but POSIX keyboard the bottom or up. So we can see all the effect you see here also and can be applied to the CSS grid container. Also, we have lift, right? Space around space between space evenly as well. Sorted and stretch, which is a default value. For example, let's say we wanted in the right direction. And let's try is a vertical alignment, which is align content area. We have a baseline values that can be applied in the vertical direction, Center and as well, flexor Stuart can be applied sale here for space around. It says, well, sorry. Let's type it again, align content space around. So we have here is a space around very applied vertically and it's moved to the items properties, which responsible for the items alignment. So let's give a try as well, justify items. And for example, let's select center. And here also we can see is effective for items alignment. It aligns what inside each track or what's inside each item. So if I choose for gambled center, also I can apply a line items. And you might guess why I can't see the effect of a line items. Because while lying content takes space around and occupying all the extra space along the container height. So if we change it, for example, or disable it. So we can hear now sees a line items effect, sensor, flex sorts, and so on. Then let's try just for myself and align self. And these two properties can be applied on a particular item as a direct child for the grid container. So for example here I want to let say item well as different alignments, let's say justify self, for example. And online self to be end, for example. So these two properties give us more control on any particular item that we want to align. 21. place property: Last thing to mention is placed property, this property in motto, new property in alignment in CSS grid, but it's shorthand property for the vertical and horizontal alignment. So what I mean by that, for example, here I have justify self and a lens if I can type them both in with one property which is placed self. The first parameter for horizontal, for the vertical alignment, which is end vertical alignment. And the second value, four, horizontal alignment, which is currently stored. So I can remove these two properties and I can have the same alignment by using placed self if I wanted to give the vertical and horizontal alignments the same value. So for example, I can type center. And then I have aligned the item to be a center vertically and horizontally on the body. One property, please, self. As the same way I can use place property in a state of the two properties for items. So first is the vertical alignment, which is currently flexor sort, and Zen Center, which is justify item. And I can get rid of these two properties the same way. I can use place content for eta replacing could justify content and a light content can tie it to a different videos or can share the same value one time for both. That's it. And see you in the next video. 22. Project overview and how to start: All right, Welcome to the most interesting part, which is applying all what we have learned in CSS grid to build this model page layout. So each section in this page, we are going to apply the CSS grid to achieve this layout. We have folders for this project, the finished and the store folder. We're going of course to work on the Start folder. As you will see here is index page is already styled ways, background, images, font size, font, colors. So we don't get Basie with these styles. All what we need to focus is applying the CSS grid to achieve the same layout. So let's go and have a look in the source code files. All right, once you open the project bike folder, you have finished mockup and sort the MOOC folder that has the two images for the desktop and mobile. So if we can zoom here, we see all the sections are already displayed a block in mobile. And when we resize or go to the desktop layout to use the CSS grid to achieve the same layout. Here's a store folder project that contains icon, styles, and index, HTML. And HTML, which contains all the page markup. And if you open styles, you can see here is an image is that we are using in the project this already included. You don't need to focus in importing or including the images. Most important files that we are going basically to work on is the seas as files. First file is the main.css, which already added to this ECS variables for the color font sizes, is receiving for most of the HTML elements, what we are going to work on is the header file and the sections fight the first header, these S5 is specified for the header section. And then each section, for example, like Section 1, this gray section, section two is the second section, and so on. In each section file, as you see, remote xr is no in each CSS file, as you see, there is no layout applied. Those are with CSS grid or Flexbox. And this is what we are going to do. We are going to start by Header and then going to the other sections too, until of course here is the store file. As you see again, the header doesn't have a layout already, and this is a first part that we are going to implement. So that's good sources. 23. Create Header section: So first I would like to open the finished version as a reference for our layout just for, so if you right-click index.html and you can choose Open With lunch server. And then it will open automatically. If you don't have this Live Server option, you can go to Extensions, panel, and type live server, which is this one. And if it's not installed in your Visual Studio code, you can click and install it. And in fact to the HTML page, you will see this option available in your ID. And then let's do the same thing with index.html in the source file. Right-click, open, left server, right-click and inspect. And then we can switch to the mobile view. And it's open versus a mobile version image. We can see here all our content into header is block element, which takes the full row. And this is a default display for most of the elements actually normal here to implement or apply a display grid. This content, what we have here is a mineral that takes, that's displayed inline and consider also its view. In desktop. It has the same inline layout. But if you go back to the browser, we can see here the header is almost finished already in mobile layout, because again, all the elements takes full row except the navigation. And the first thing you might think about is to set the display grid to x2 L and the list items grid columns. And let's try here first two. So we get this plate grid, and once we apply it to display grid to the element we can enable as a visual lines and then we give it the grid template columns. And let's use the repeat function as we have here, four list items, so we can give four and each one takes one FR. Right? Now, we see that we have aligns a list items in one row using the display grid. But let's go again, checksum mobile design ends the desktop as well. We achieved the mobile layout, but considering as a desktop layout that the list item is in the sensor. So if we go back here and resize to the desktop view, we'll see is a list item shrinks a low resource. And that's because we're using display grid. So again, if you remember the comparison of video between the CSS Flexbox and display grid. That's most of the cases when we're working with content. That's better to use a display flicks. And for when we're dealing with layout, that's better to use the seizes. So here as we are aligning content, we can give it a try with display flicks and aligns the display flex items we can use justify content. Center. Here we go. Now we achieved it likes that designs the items is centered in the page. And if we go to the mobile view, it's already adopted in the center, which is also exactly like some mobile view. Okay, now let's apply the two properties in our code. Go to the header and we apply the tools, the ULs inside an F, So we're good the nav UL and add, display flex and justify content center, click, Save. And what's applied as you see here, mobile layout for the header is, for the mobile layout for the header section is completed. But still desktop layout is not aligned well. But before going directly to our client, our grid for the header port, I want to open the JPEG file, a trope software like Photoshop or Sketch, figma or whatever the software is that you like. We're not going to design. I just want to demonstrate how we can think about the outline of our grid system. So let me first opened the mock-up on Photoshop. If you don't have food shop or your periods it at all. With any design software, you simply can print as smoke up in a real paper copy and just print your pins. So you can easily outline your grid line to determine how many columns and rows you are going to implement. So let's put it on full screen by using keywords and using Z kids. So, so let's put it on full screen by using safe key on the keyboard and zoom bet. Okay, and we have here result, the rulers at we can drag and drop sub lines to just the outline of the columns. And rows that we are going to implement. So by the first clue that you might think, okay, is this text on the left who is a call to action and image on the right. So z are basically will be as a two columns. So let's draw the first column. And here is the second column for the bike. What implementing this way it's a designed will not be precise. We can see here is our image overlapping or taking apart from the second, from the other column. So in another way there is intersection between ends up like image. So in this case, better to implement three columns. So the first we are going to place the text and the second force a pike. And here we are going to do the intersection. So in this way, we can stretches the text in the first and the second column. And as well for the bike, we can stretch it or outline it in the third and the second column. So second column or the middle column will be for intersecting only by using software or even a hardcopy and just outlining our grid lines, it makes the process cleaner and easier to implement. So let's go back to the code and implement Z, three columns. And then let's see if we need to determine or setup rows or not. So back to the source file. And we're going to apply the grid property and set up our columns and rows here in the container div that contains the text, the image, and the call to action, as well as this one we want to be applied only to desktop layout. So the header container selected and then type display grid and Zen grid template columns, as we have agreed that are going to be three columns. But let's have a look again to determine the size. So as we can see, these two columns, the first one and the third one are equal, so we can get them one if R2, both of them. And the second or the middle column, you didn't have to be precise about, let's give it, for example, 150 pixels as widths. So the first column is one of our, the second is 150 and the CRT is one of our. So what are 150, 60, what are safe debt to the browser? And here we can see our layout has been applied. But of course, as because we need to position each direct child in our grid container. And the, in this way, we would better to implement or decide how many rows is equivalent. So let's back to our design. Zeros here can be easily decided. So here is the first true for the title or as a big headlight. And in the second row is for as text. And Zen SAR grow is for the call to action button. And this one instead of adding it here, and we can edit to the end of the image so we can hear have easily three rows. The first for the headline, second for text, and therefore is a call to action. And we can as well positions image to take its height in the whole three rules. And as we are here to add text in these rows 2, we can set XHR height as auto because we might change the text in the future or while we resizing, our layout is the text we don't want to break as a text or causing overlapping. So back here and add grid template through. And we can use the repeat function. And we want three columns and each one has O2 as height. And we have a grid template role applied once only thing left is to positions items in the correct place. Let's go first to the headline and take a look again through the design that occupying the first and the second column and only as the first stroke. So we can say grid column 13 ands a grid row is one slash two. Police go to the header H1 grid column one slash three. So let's start is one and the line industry and grid row is one, slash two. Then moving to the image, which should occupy three tracks in zeros and two tracks in the columns. If you forget the layout, we come back to the design. So it's a column store will be two because this is line number two and column would be number 4. So great. Coelom to slash 44 is a grid row. It will be rho lines one. And the last one is 234. It should be four or minus one because it's the last slide we can type grid row one slash minus one here as well. Of course, for, because this is the last line, we can also type minus 1 wherever you like, Save. And here we go. The design almost finished. As you see here is a bike and the text are overlapping in the middle columns that we have added. And one last thing is to these texts to the right and make the bottle, as it takes O two widths, lots of phone widths as currently. Text alignment properties. So we can align the content on the container directly instead of going to each child and add the alignments we can here try Text Line left. So it works pretty well. And what's missing? All these, the bottle, what's missing is a bottle. So we can go to the bottom and try for aligning the items horizontally. We using justify. And as we are on the child itself of the grid container. So we use justify self and we can say left or flexes short, for example. So here we go. Let's back to our code adding here text align left, and for the call to action where we add justify. Self flexes short save. So we have achieved the head of layout in desktop and make sure that our mobile layout is the same. All fine here in mobile layout as well in desktop. So that's it. And let's move to the next section. 24. Create Overlapped section: All right, let's start implementing the next section, which is called the selection tool. And as you see, it consists of heading H2, H3, and image. And we can take a look into the design to see how it should look. So we go to mockup and open desktop, and here is a required layout for desktop. And in mobile, we're not going to implement changes. All right, and as we mentioned, again, the best way to determine and set up your grid layout is to open it in a mock-up or using your pen and paper to outline how many columns and rows at we are going to implement. So we are going to apply a grid, as you see here in section which called, which has class section two. And because this is a container for our elements, so here we have the design on Photoshop just to add our lines. And as this headline either direct that child to the container. So we are going to consider it as an element which should be positioned in rows or columns. So let's start first tool outline zeros, let's say. So this is the first row and as you see here is there is an intersection between the text, the background, and the image. We considering them as one row and Dennis political coulombs. But you remember, as we did in the header, we need a track to apply or achieves this intersecting. So here we add a row for this area where it is, the bike image is started. So it can just move this line a bit. So we have a row for the headline and row for the bike image. And then the next row will be the sort for the headline. And it will be here in the intersecting area and pans and last row here, we have it for the end of our content. So we have first row for the headline, second row for the image is stored, and then the third row for the texts start. And also where is it, where's the image will end? And the fourth row for the end of the text. So we determined now that we have four rows and let's determine how many columns that we want. So this is line number 1, photos, columns start and we don't want to split. The title is already horizontal text and end of the first column should be here or here. So we considering this intersection area as a column. So we're going to end column here and dragging to implement another column which is the intersection columns. The same idea that we did in the header. And in the third column, which should be the end one, and the third column which should be the last one, where contests that export. So we have four rows and three columns and we are going to implement them and position each element in the right place. So let's go to our code and we are going to open section too. If you forget the number, you can easily go to the file and inspect to see which fight we are going to work on. It is it has, as it has a class section 2, we are working on file section 2. And as you see I added in each sections, this is as properties that out of our focus in this course, we are focusing only on implementing as a CSS grid properties that we have learned. So as it, as our layout going to be applied on desktop only. So we're going to apply inside this media query, which is larger than eight at which it starts from 800 pixel width. And insight section 2, we are going to apply our grid property. So type display grid. And we have to property. Let's start with the columns, grid, template columns, and back to the design to determine the size of each column. So here we can add for the first third columns, the same widths. I know in the design might look, looking equal the same widths about either. We're not focusing on the pixel perfect approach. We don't want to take time to measure the width of each element. So let's say the first and the third column are equal in width. And we're going to give them one FR unit. And let's say as we did in the header, we give it an approximate value for the middle or the intersection column. And here let's say 50 pixel. So the first one is one if r and then 50 pixels than one if r. And then adding the grid template rows back to the design to determine the role, the height of each rows, the first row as it has a text. So we're not going to give it a fixed value. Of course, we can give it O2. And then the second draw, we can give it approximate value as the height of it is like. Almost equal to the width, says that we give it to this column, which was 50 pixels. So we can say this high, this second row, it has height of 50 pixels. And then the third row is that we have here, it has a text, so we are going to give it all to in height. And then again the same height of the second row here, which is about 15 pixels. So we have 0 to 50 pixels, 0 to 50 pixels. We can use the repeat function because we have two values are duplicated two times. So as the first parameter is a repeat number of our values ends ends. The second parameter is our failures. So it was 0250 pixels. Or you can type it manually you two times without repeat function save. So here we have our grid lines from the rows and columns implemented. But of course we want to position each element. So as a first element or the first direct the child to our grid container is H2, which should take the full width. So we are going to give it as a column start one and the coelom end is 4 or minus1 as it goes through his lost fine grid codename efforts. The lines start is 1 and line n is minus one. We can go to the outline that references that we did. It occupies one row. So we can say the grid row is one slash two grid row. You can say of course, a span one. Or we can type it by numbers 1 slash 2. Let's save and see how we'll hit line positions, okay, So it's positioned perfectly. And then the, the next element is h3. So we're going to position it in the right area. Back to our design. Let's start with that grade columns. So it's, as you see here is a text that doesn't start actually from the third column, but it's starts from the second column, which is line number two. And in the last column we can say minus1. So great. Column to slash minus1 going to section two, H3 grid, grid column to slash minus1 and grid row, as we see it, start from the third row, which is 1, 2, 3. So this is line number three, add it ends the last line of froze, which is minus one. So the grid row should be 3 slash minus one. Row, 3 slash minus1, save. And let's check our codons browser. Alright, nice. It's positioned correctly. And the last elements that we have is the image back to our design again to make sure that we are positioned at INSEAD right area. So the image should start from line 1 in columns and ends in line three. So here in Section 2, image selector grid column one slash 34 grid draws its stored from line number 2 and number 4. So the grid row for this image will be two slash for redraw to slash for, save back to the browser. And we have implemented the layout easily. See how it easy way to outline your layout by using your pen and paper or design software. And just to know how many columns and rows you want to apply in your great container. Ends imposition, each element ends in. You can achieve complex designs easily. Let's turn off this visual visualize tool and see how it looks. Our design looks great and check how it's in mobile. Let's go and implement the next section. 25. Create Features section: All right, now we are going to develop Sections 3, which has these three paragraphs and the icon if we inspect it. So we can see the section has class sections 3. And inside it there is a container of loss which sitting max-width to prevent the content from being stretched. And inside this container, there is three divs called feature, and each feature has image and paragraph. So initially from the first look we can see is that we need actually two columns to outline the content here. So it doesn't need here to check on the design and drag and drop lines to determine how many columns and row we just need here at two columns and then position each feature dev to the right areas. So here in the Styles folder when we opened Section 3, and as we are going to implement that in the desktop layouts. So we can go here inside the media query and inside section 3, container selector. We can type display grid save. And we can see here our grip property applied. We didn't add the columns, so grid template columns, one if R, one or two comma one, F are safe. All right, Almost our layout finished. But if we check the design again, we can see that the big paragraph, because it has a bi icon, it's positioned in the right column. So we need to place this feature div to the right and occupies a whole columns. And these two elements weekend, arrange them later. Actually we can positions the biggest 1 first and sees the other two features if they need also to be repositioned. Or the r position the already to the right place. So here if we inspect this feature and I have prepared this lecture for you. So it's Insights section 3 and selecting the div with class feature. And we targeting the third one, which is also we can target with selector is the last one, doesn't matter. So back here to our code and insight section three feature and it's of type 3. We want actually to position this to the right column. So grid row and grid column two slash three, Save. And now we have our third feature. They've occupied, as you see in the whole second column. Now we are going to align the content that's inside each feature there. And if you remember the video where we compared between some grid and flexbox, we have accurately summarize that CSS grid is better to use it while you're setting up your layout. And flexbox is better to use it for aligning the content that's inside the layout. In this case, we are going to align this icon and the text horizontally by using Flexbox. So back here to each feature is that we have and give it a display flex and to ensure the horizontal alignment, so add flex direction property and give it row Save. So now as you can see, we have aligned our content easily by using good just as a display flex property. And we actually finished our section 3 layout, as you can see. So that's it for section 3. And let's move to the next section. 26. Create Gallery section: All right, Now let's start implementing the next section which has a title and a lot of images that we have here. And if we check the design to see how it should look. So inside our project folder, go into a mock-up and open desktop image. And you see it should look like this gallery grid. And we can actually add it to design software to outline or determined the columns we need to add. Or actually we can get it by eyes. As you see here, it's three columns and some images are occupying two rows into height, like the first and the fifth one. Also this one is occupying the two rows. This image we can see it's occupying two columns and two rows. So first let's inspect the sections that we have an aspect. And we can see here our section called Section 4, and it has heading H2 and all these figures each finger has on the image. So we are going to add a display grid property to the section as the parent element and dealing and positioning each image to the corresponding array. So go to Styles folder and opening section for fairest to add display grid property and adding the three columns that we have decided. So grid template columns, we can actually use the repeat function and three as three columns. And each column gets a one of our in width as the r equal the width, as you can see here. So save it. And we have here is a three columns. We just actually need to position the title to occupy three columns and then position some images to achieve as a gallery grid designs that we have. But actually I want to mention something as we hear, give it three fix-it columns when we resizing to smaller view ports. As you see, some images are shrinking and cropped. So it doesn't actually look nice till it goes to the mobile layout. But this part that I'm talking about here is a small view ports as that would be better to a fluid, the columns with sources. So for example, it should be like two columns at some areas, ends in when we're going smaller than it goes as one column. And actually here, instead of adding a traditional media query, of course, we can use auto fit value we have mentioned before. So back here to Xcode, and instead of adding prefixes, columns, we can say auto fit. And here we use a min, max value. So the first value is the minimum width that we want for each column. And the second value, which is the maximum width for each column, back to the design, we can give it estimated with, for example, let's say 300 pixels. And the maximum value we can say as one if R, one flexion and the unit for each column as maximum width save. So let's start resizing as you see here. So when it reaches the three 100 pixels as minimum value and going below it adapt itself to two columns. So here it's much better. We can actually increase the columns if we go in leisure viewports and removing as a container class, because container class adding maximum width, which is one hundred, two hundred pixels. So it's a great can go wider Z, Z widths. All right, now let's position each element that we have first, let's go and possessions a title. So here we have the selector section for H2 and as we give it full width. So actually you can say in grid column one slash minus1 to occupy the whole width. Save. Here we go. And then we are going to select the first image, this one, and giving them height of two rows. You can always check the design to see which images you're going to adapt from the height or width. So here's the first and the fifth image. So we have the selector for the first and the fifth image, and we want to change their heights. So we change the grid row instead, actually off counting zeros, because here we have many rows, then easier to give it span to save. So here we go. We have the first and the fifth images getting two rows into height. And actually we forgot the third image. So we can also add it to the same selector to occupy two rows in the height. So instead of selecting it in separate selector, we can edit as well. It was the same selector, save to the same selector. And then the last image that we want to resize it, the last image, which occupies actually two columns and two rows as well. So selecting it by loss of type and then adding for it grid column span two. Also, we can use it instead of counting the lines and grid row span to save. So we have achieved our grid gallery layout. And a lust saying missing is adding the gutter between each figure. So always adding the gutter to their parent or the grid element and we can use gap property. And as I mentioned, we have variable for the gutter, which called the grid gutter. You can always going to main.css file and copy it from here. Grid gutter is safe and it works in a responsive way. As you can see in mobile. We'll call them two columns and then three columns. So that's it. I hope you enjoy it. And let's go to the next section. 27. Create Articles section: All right, Welcome to the next section which called articles. And here we can see kind of fancy design. There is intersection between the text and the image. So we are going for short to use the grid to implement this court. First, let's check how the code is built, ends and then starts setting up our lines. So if we go and inspect this element and we can see it's under Section five and there is headline and another div which called article. So you repeat this court as many as you have articles in your page. Ideally, we are going to work on this def article as a grid container and dealing with the direct children, which is image, headline and call to action button. All right, let's go to the design tool to outline our lines and determine how many columns and rows we want in this court. So I have a theorem in Photoshop. Let's zoom a bit. Okay, Let's start first with the columns. Here is line 1 and line 2 should be here. No, because we have intersection here, we are going to consider this intersection and add additional column for it. So here is a third line for column number two. What is the intersection happening? And then another line, which is the last one for column three. So we have here is three columns. And I just change it to the lines color so it can be more obvious. So we have here is the three columns and let's outline our rows. So fairest line four zeros. Where's the text, Stuart? And you see here actually intersection from the horizontal view, not on the vertical intersection, but that is also here at intersections that we want to consider. In other words, we want to build Pacific crow here so we can consider as a sport of intersection. So we can add here a line which is as end of that intersection and as the image start as well, then dragging another line. And also we have a bottom here, see, so we are going to consider it if we don't add a line here for another row and consider it in the end of our card, so it will be difficult to handle the bottom position, so we would consider it. So we Consider a line here. Actually that's it. We have three columns here and we have actually as well as three rows. Let's just add another line here. Demonstrates that last row. And it's time to implement it on our code. And before we go, we can give approximate sizes for the columns. So for example here as intersection column, we can give it like 100 pixels, let's say the first and the third column. Actually, they are not almost equal the inside. So we can give this like 0.75% or fraction unit. And this one takes one fraction unit. So 0.75 fraction unit, 100 pixels and 1 fraction unit. So back to the court, as we said, we're going to target this article div as a grid container. So start folder Styles section five. And as we are working on desktop layout, so we typing inside section five, article selector, display grid, grid, template columns as, as we mentioned, we give it as 75 and F, R and Zen, 100 pixels for the second columns, intersection column, and then one FR for the last column. Then implementing zeros, Let's go to the design again and determine it here. For example, let's say as a first row, we can give it 80 pixels, let's say. And the second row, 60 pixels, for example, we are going to change this one, add later. I will explain why, but for now, let's consider the first one is 80 pixels a second as 60, and then the last one is 0, 2 as it's based on the image. So we're given it 80 pixels, 60 pixels, and then auto save back to the code. So we have here our grid applied properly. So the first one is the image. Actually, we want to position it to the right. So we are going to determines a columnstore column in the row start and end. Back to the design. So the grid as a column start and end, it will be number to the end is 4 or minus one. So going to image selector, grid. Call them to slash minus1 and then the grid row. So here we have LAN 1, 2, so zeros tort is two and the row end is 4. Two slash for Save. So the image is positioned in the right area. Of course, if you want to combine them together in the property grid area, you can, of course do that. Then going to the next element, which is the title of the article, back to the design to see where it should be positioned. So the column start one column in that three line number three, row stores is one and the row n is three. So columns 1, 3, and 1, 3, we can hear, for example, use grid area. If you forget the source of the values, you can hover on the property and you will see the explanation here. So it is the first value is row starts in column, start, row end, and column, and the row start is one. The column start is one. We said the end is city for both columns and rows save. So here is the headline positioned very well. The last element we have is as a call to action, back to the design. It's stored in. A column store is one and the rows tort is three. Actually, we don't need to determine here as a column and the row and the, because it's adjust bottom and there is no limit for its size. So we're going to use two properties, column sort one and grows tort is 3. So go into city a selector grid column Stuart, one angry draw store is three. Save. All right, It's actually positioned about, there is one thing that we want the bottom to be resized based on the contents that text inside, of course. So you remember, if we want to justify or aligned elements inside the grid as a grid children, we using justify self or align self so we can check it out here. Justify self. We can say, for example, flexes and align self as well, a flexor, Stuart, you see, and as we have justify self and online self, we can combine them together by the shortcut property, which called the place cells. And as the two values are similar, we can type it one time, only flexes taught and no need to use these two properties. So copy it. Copy this one, adding to the CTA save. So we have achieved the article section. And one thing left I want to mention about the second row. We are going to change its value. And actually because this headline, it doesn't make sense to give it a particular or specific height. So for example, imagine this is like another articulate with longer texts. Let's copy this text. For example. See because we have specified the second row height is a title, overlaps on as a call to action bottle. And also we can't give it auto because we want them to be aligned. If we give the second column or two, you see is a bottom goes down and you can't align it to the top because now it's in a separate row. So Zeff solution for z is to use the min-max function here, mean max, then the minimum value, which is the 60 pixels that we have before. To specify the row height and Zen, the maximum value is 0, 2. So we can now don't care about z texts height. Is it a, is it short or long? Headline is a button is aligned properly after as headline directly. So I'm going to copy this one and add it to the code here inside the article instead of 60. So we combine the betweens. A first solution ends, the second solution is that we want. So that said, I hope you enjoy it and I would recommend of course, to give a try by yourself if you didn't do before watching this video.