# CSS Grid

# What is Grid

CSS Grid Layout (aka “Grid” or “CSS Grid”), is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces.

# Properties for the Parent (Grid Container)

## 1. Display

Display Property Defines the element as a grid container and establishes a new grid formatting context for its contents.

**Syntax:**

```
.container{
    display: grid;
}
``` 

## 2. Grid Template Columns and Grid Template Rows

Defines the columns and rows of the grid with a space-separated list of values.

### 1. Grid Template Rows

The grid-template-rows property specifies the number (and the heights) of the rows in a grid layout. The values are a space-separated list, where each value specifies the height of the respective row.

**Syntax:**

```
.container{
// we can use any syntax both will perform the same task
grid-template-rows: 1fr 1fr 1fr;
grid-template-rows: repeat(3, 1fr);
}

``` 

### 2. Grid Template Columns

The grid-template-columns property specifies the number (and the widths) of columns in a grid layout. The values are a space-separated list, where each value specifies the size of the respective column.

**Syntax:**

```
.container{
// we can use any syntax both will perform the same task
grid-template-columns: 1fr 1fr 1fr;
grid-template-columns: repeat(3, 1fr);
}

``` 

%[https://codepen.io/pratik739/pen/gOKeqWo]

## 3. Grid Template Area

The grid-template-areas property specifies areas within the grid layout. You can name grid items by using the grid-area property and then reference to the name in the grid-template-areas property. Each area is defined by apostrophes. Use a period sign to refer to a grid item with no name.

**Syntax:**

```
.container{
    grid-template-areas:
          "item1 item2 item2"
          "item3 item2 item2"
}

``` 

%[https://codepen.io/pratik739/pen/NWzYoze]


## 4. Gap

The gap property defines the size of the gap between the rows and columns. It is a shorthand for the following properties:

**Syntax:**

```
.container{
    gap:row_gap column_gap
}

``` 

### 1. Row Gap

As the name suggest it will apply gap between rows.

**Syntax:**

```
.container{
    row-gap:10px;
}

``` 

### 2. Column Gap

As the name suggest it will apply gap between columns. 

**Syntax:**

```
.container{
    column-gap:10px;
}

``` 
%[https://codepen.io/pratik739/pen/zYaWemq]

# Properties for the Children (Grid Items)

## 1. Grid Column and Grid Row

### 1. Grid Column Start

The grid-column-start property defines on which column-line the item will start.

**Syntax:**

```
.item{
    grid-column-start: start-index;
}
``` 

### 2. Grid Column End

The grid-column-end property defines how many columns an item will span, or on which column-line the item will end

**Syntax:**

```
.item{
    grid-column-end: end-index;
}
``` 

%[https://codepen.io/pratik739/pen/PoaRVXd]

### 3. Grid Row Start

The grid-row-start property defines on which row-line the item will start.

**Syntax:**

```
.item{
    grid-row-start: start-index;
}
``` 

### 4. Grid Row End

The grid-row-end property defines how many rows an item will span, or on which row-line the item will end

**Syntax:**

```
.item{
    grid-row-end: end-index;
}
``` 

%[https://codepen.io/pratik739/pen/JjZLzdy]

## 2. Grid Area

The grid-area property specifies a grid item's size and location in a grid layout, and is a shorthand property

**Syntax:**

```
.item{
   grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end;
}
``` 

%[https://codepen.io/pratik739/pen/yLEKwOe]