Hello and welcome to the channel in this video I am going to discuss about the CSS grid and its different properties and also how we can make it responsive. So let’s get started.

 CSS Grid Layout divides a page into different regions using horizontal and vertical lines into rows and columns, just like HTML tables. The parent element where grid property is applied to is called ‘container’  and its children are called items. Each container consists of a number of boxes formed by the horizontal and vertical lines called the cells and the items are contained within these cells

Here I have already created a web page which consists of a section containing seven divs each div is of a different color and numbered. Here the section is the container and each of the divs are items.

Now to turn any HTML element into a grid container we have to set its display property to grid. This allows us  to use all the CSS GRID  properties within the container. There are different CSS properties that can be used to achieve the desired result. Some of these properties have to be applied to the container and some to the items. Here is the list of CSS-grid properties divided into two columns on the basis of weather it should be applied to container or item

CONTAINER

ITEM

grid-template-columns

grid-row

grid-template-rows

grid-column

column-gap; row-gap and gap

grid-area

grid-template-areas

justify-self; align-self

justify-items; align-items

repeat function, minmax, autofill, autofit

Initialize grid

Add columns and rows

We have set the display to grid but to define its structure we have to first add some columns to the grid. by using the grid-template-column property.

   grid-template-columns: 5em 5em 5em;

I added three columns of width 5em each. If you want to add or decrease the number of columns just add or remove the number of parameters. Say I add one more 5em than the number of column becomes 4 and if I remove two 5em than number of columns becomes 2 

   grid-template-columns: 5em 5em;

The grid-template-column property automatically sets the number of rows and their sizes but if we want to manually add the number and size of rows then we have to use the grid-template-row property. So

grid-template-row: 5em 15em 10em

These set three rows of different sizes of 5, 15 and 10em.

Use Grid units to change the width and height of rows and columns

Apart from setting the dimensions of the grid elements in px, em or rem. We can also use::

fr which  stands for fraction of the available space

% that sets the width and height in percentage of the width or height of the container.

and 

auto that automatically sets the dimensions.

grid-template-columns: auto 20% 1fr 2fr;

GRID GAP: If we have to give some space or gap between the different items then there is a property for it.

Earlier the property to give gap between columns was called ‘grid-column-gap’ but it is obsolete. Now it is called ‘column-gap’. Similarly for rows it is ‘row-gap’. 

  column-gap: 1em;

  row-gap: 1.5em

There is a shorthand method to give a gap by using just ‘gap’. If it contains only one value then it will give the gap to both row and column but if it contains two values then the first one will be for row-gap and the second one will be for column-gap.

GRID COLUMN

The horizontal and vertical lines that create the grid are simply called lines. These lines are numbered starting with 1 not zero at the top left corner and moves towards the right for columns and moves downwards for rows. To set the number of columns an item will take up, we can use the grid-column property along with the line numbers so that we can set the item to start and stop at.

Now if we write grid-column: 2/4 in #div4; it means the item will start at line 2 and end at line 4. One more thing to notice is that the property will be given in the individual item, not the main container. 

#div6{

    grid-column: 2/4;

}

Similarly to set how many rows the item will take up enter  grid-row: ⅘; 

#div4{

    grid-row: 1/3;

    grid-column: 4/5;

}

CSS GRID Positioning

We can align the items inside the cells horizontally using the property ‘justify-self:’.This property aligns the contents within the item in three positions: start, end or center. By default the contents are given the property of stretch which makes it occupy the whole cell. The property has to be applied to the individual items.

To align the items vertically, a property called ‘align-self’ is used. The positions are the same as justify-self and are applied to the item.

To align all the items vertically or horizontally at the same time instead of individually positioning each item we can apply ‘justify-items’ property to the container to align horizontally and  ‘align-items’ to align vertically.

Divide the grid into grid template areas:

Using the property called ‘grid-template-area’ we can group cells together into areas by giving the areas a custom name. We can do it in these manner

  section{

    display: grid;

    grid-template-columns: 5em 20% 1fr 1fr;

    grid-template-rows: 5em 5em;

    grid-template-areas: "header header"

    "Links content"

    "Links footer";

    gap: 1em 2em;

}

After we have created an area template for our grid container, we have to provide a reference to the items in our custom area, by putting the property ‘grid-area’ in the particular item we want to refer to. 

#div1{ grid-area: header}

Use grid area without creating an area template

There is another way of using grid area but here we don’t have to create a grid-template area at the container but instead the apply the grid-area property at that particular item where we want to create the area. Here is the syntax

 /* grid-area: 1/2/4/3; */

    /*grid-area: horizontal line to start at/vertical line to start at/ horizontal line to end at/vertical line to end at */

REPEAT FUNCTION

Suppose we have a 5X10 grid with 50 cells each of width and height of 5em. Now it will be a hassle to keep on writing 5em 50 times. To get around this css-grid provides us with a function called  repeat(), which we use in this manner

 grid-template-columns: repeat(5, 1fr);

We can also give different values to grid-template-columns.

Say we have a grid having two columns of 5em and 1fr repeating twice and another of 50px. To get that we write  repeat(2, 5em 1fr) 50px which simply means there are 5 columns grid-template columns: 5em 1fr 5em 1fr 50px

MINMAX FUNCTION

Now if we change the size of the container and we want to limit the size of the items up to which they can expand or contract to we can use a function called minmax() function where we pass in two parameters. The first one gives the minimum width the item can contract to and the second gives the maximum. Here let me show you how it can be done

grid-template-columns: 100px 5em minmax(50px, 200px);

Here grid-template-columns are set to create three columns; the first  two are 100px and 5em wide, and the third has the minimum width of 50px and the maximum width of 200px.

These two functions repeat and minmax can be combined in these manner

grid-template-columns: repeat(2, minmax(5em, 1fr)) 10em

which means first two columns will have minmax value of 5em and 1fr and the last one will have fixed width of 10em

Autofill:

The repeat function offers us a property called autofill which we pass in the place of the number of times the columns repeats. It automatically inserts as many rows or columns of the size we pass depending on the size of the container. 

gird-template-columns: repeat(autofill, 5em);

We can use it in combination with minmax in the following manner.

grid-template-columns: repeat(autofill, minmax(5em, 20em))

Here it keeps on filling with columns of minimum width of 5em and maximum width of 20em. If it can't fit  with any more columns it will pass the remaining cells in a new row.

Autofit: increases the size of the item to completely fill the container auto-fit works almost identically to auto-fill. The only difference is that when the container's size exceeds the size of all the items combined, auto-fill keeps inserting empty rows or columns and pushes your items to the side, while auto-fit collapses those empty rows or columns and stretches your items to fit the size of the container.