CSS Grid

Grid :

• CSS Grid Layout is a two-dimensional layout system for the web.

• A grid is a collection of horizontal and vertical lines creating a pattern against which we can line up our design elements.

• A grid will typically have columns, rows, and then gaps between each row and column. The gaps are commonly referred to as gutters.

Grid properties and its values :

1. grid-template-columns :

• With the help of this property we can define number of column in the grid.
• values defines number of column and width of each column.
• we can give the values in the folowing ways,
  • grid-template-columns:100px 100px 100px
  • grid-template-columns:repeat(4,100px);
  • grid-template-columns:60px 100px auto 100px;

have a look on below code for better understanding.

2. grid-template-rows:

• With the help of this property we can define number of rows in the grid.
• Values will define number of rows and height of each row.
• we can give the values in the folowing ways,
  • grid-template-rows: 80px 120px ;
  • grid-template-rows:repeat(2,200px);
  • grid-template-rows:160px auto

have a look on below code for better understanding.

3) grid-template-areas :

• Defines a grid template by referencing the names of the grid areas which are specified with the grid-area property.
• Repeating the name of a grid area causes the content to span those cells.
• We can give following values,
  • < grid-area-name > – the name of a grid area specified with grid-area.
  • dot(.) a period signifies an empty grid cell.
  • none – no grid areas are defined.

have a loook on below code for better understanding

In the above code box one and box two both have taken two column and two row space as per the values of grid areas.

4. grid-column-gap/ grid-row-gap :

• grid column gap use to fix the width of the gutter in between columns of the grid.
• grid row gap use to the width of the gutter in between rows of the grid.

5. Justify-items :

• This property help us to align items along with row axis in the cells of the grid.
• we can give following values,

  - **justify-items:start** - align items at start of the cell.
  - **justify-items:end** - align items at end of the cell.
  - **justify-items:center** - align items at centerof the cell.
  - **justify-items:strech** - it strech the item and fills whole width of the cell.
  

6. Align-items :

• This property help us to align items along with column axis in the cells of the grid. -we can give following values,

  - **align-items:start** - align items at start of the cell.
  - **align-items:end** - align items at end of the cell.
  - **align-items:center** - align items at centerof the cell.
  - **align-items:strech** - it strech the item and fills whole height of the cell.
  

7. Place-items:

• place-items sets both the align-items and justify-items properties in a single declaration.
• The first value sets align-items, the second value justify-items.
• This property place items exactly at center of the cell(i.e horizontally and vertically center).

8. Justify-content :

• This property align the grid along with the row axis.grid will move with respect to the container.
• we can use following values,

  -  **justify-content:start** - align grid at start of the container.
  -  **justify-content:end** - align grid at end of the container.
  -  **justify-content:center** - align grid at center of the container.
  -  **justify-content:space-between** -  places an even amount of space between each grid item, with no space 
        at the far ends.
  -  **justify-content:space-around** -  places an even amount of space around each grid item.
  -  **justify-content:space-evenly** - space-evenly – places an even amount of space between each grid item, 
        including the far ends.
  

9. align-content :

• This property align the grid along with the column axis. Grid will move with respect to the container.
• we can use following values,

  -   ** align-content:start ** -  align grid at start of the container.
  -   ** align-content:end** - align grid at end of the container.
  -   ** align-content:center** - align grid at center of the container.
  -  ** align-content:space-between** -  places an even amount of space between each grid item, with no space 
      at the far ends.
  -  **align-content:space-around** -  places an even amount of space around each grid item.
  -  **align-content:space-evenly** - space-evenly – places an even amount of space between each grid item, 
        including the far ends.
  

10. grid-column-start/end and grid-row-start/end :

• With the help of this property we can set starting line and end line of the item in grid.
• We can set row and column start and end line. We can use following properties,
  • grid-column-start
  • grid-column-end
  • grid-row-start
  • grid-row-end

In the above example item started at line 2 for column and row and ended at line 5 for the column and line 4 for the row.Item has taken space of all the cells of the grid those are inside the above constraint.

11. align-self and justify-self :

• justify self is used for position particular items with respect to column direction.
• align self is used for position particular items with respect to row direction. -we can use following propety values,
  • start: align items at the start of the cell.
  • center:align the item at the center of the cell.
  • end:align the item at the end of the cell.
  • strech: it streches the item to fill whole width/height of the cell.

For better understanding of all the concept play a game.