# CSS Grid


![CSS-GRID-3.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670569007112/XQoHlbCSx.png align="center")

## 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.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1670487812370/-UEAR05uM.png align="center")

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

%[https://codepen.io/rohan1797/pen/gOKELdd]

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

%[https://codepen.io/rohan1797/pen/oNyVBPJ]

### 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

%[https://codepen.io/rohan1797/pen/abKMyzQ]

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.

%[https://codepen.io/rohan1797/pen/MWXxvBP]

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

%[https://codepen.io/rohan1797/pen/LYrazVZ]

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

%[https://codepen.io/rohan1797/pen/ExRMwNV]

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

%[https://codepen.io/rohan1797/pen/zYabPvw]

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

%[https://codepen.io/rohan1797/pen/QWxoOVK]


### 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

%[https://codepen.io/rohan1797/pen/yLEwrmQ]

 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.

%[https://codepen.io/rohan1797/pen/yLEwrmQ]


For better understanding of all the concept play a game.

%[https://cssgridgarden.com/]