# Grid in CSS

# Introduction
Grid layout aligns the items in a row and column. It is a two-dimensional layout. It makes responsiveness easy by changing a couple of lines for different screens.
Grid property applied on the parent container. Hence,
an HTML element becomes a grid container.
```
.container {
  display: grid;
}```

 Children inside grid container automatically become grid items.
## Grid Columns
 Vertical lines of grid items are called columns. 
## Grid Rows
Horizontal lines of grid items are called rows.
![images.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669358709368/53ZhZnNrZ.png align="left")
## Grid Gaps
The spaces between each column or row are called gaps.

![images (1).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669358920830/-24IlqRjb.png align="left")

#Grid Container
Grid property is set on the parent element to make that element as grid container. Grid container has grid items inside it.
## Grid-template-columns
The grid-template-columns property defines the number of columns in the grid layout and defines the width of each column.

```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
        }
        .items{
            background-color: red;
        }
```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>

```
![Screenshot (1631).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669360756331/0ZP3bjNPM.png align="left")
##  Grid-template-rows
Grid-template-row defines the height of each row.
```
 .container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: 100px 50px 20px;
        }
        .items{
            background-color: red;
        }
```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```

![Screenshot (1632).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669360969412/9Ao7BTYOe.png align="left")

## Justify-content
Justify-content is used to align the items horizontally inside the grid container. Values for justify-content are space-around, space-evenly, space-between, center, start, and end.
### space-around
```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: space-around;
            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```

![Screenshot (1633).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669362120863/t7-BEHRmx.png align="left")
### space-between
```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: space-between;


            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```

![Screenshot (1634).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669362343975/ZdNPPHwJR.png align="left")
### space-evenly
```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: space-evenly;


            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```

![Screenshot (1635).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669362438924/eX8-IAj_R.png align="left")
### Center
```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: center;


            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```

![Screenshot (1636).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669362567975/7icGB8BAg.png align="left")
### start
```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: start;


            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```

![Screenshot (1637).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669362683449/5hq7rKmOi.png align="left")
### end
```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            justify-content: end




            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```

![image.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669362801796/972bHbWKr.png align="left")

## Align-content
Align-content aligns the items vertically inside the grid container. Values for align-content are a space-around, space-between, space-evenly, space-between, center, start, and end. 

```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            align-content: center;
            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }
      
```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```

![Screenshot (1639).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669364193120/HOC0AemCM.png align="left")

The rest of the values are the same as the justify-content value.

# Grid items
We can style the grid items so that they will span multiple columns and/or rows.
## Grid-column
Grid-column property defines how many columns to span.
Suppose we want to span column2 use the following line of code.
```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            
            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }
        .item2{
            grid-column: 2/ span 2;
        }
```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```

![Screenshot (1640).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669364877914/LK4GWolN9.png align="left")
## Grid-row
Grid-row property defines how many rows to span.
Suppose we want to span row1 use the following line of code
```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            
            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }
        .item1{
            grid-row: 1/ span 3

        }
```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```
![Screenshot (1641).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669365165468/6DaVGIPAi.png align="left")

## order

Order property rearranges the grid items inside the container. By default -1 is considered is the first order.
```
.container{
            display:grid;
            grid-template-columns: auto auto auto ;
            column-gap: 10px;
            row-gap:10px;
            grid-template-rows: auto auto auto;
            
            height:500px;
            border:3px solid black;
        }
        .items{
            background-color: red;
        }
        
        .item2{
            order:-1;
        }
```
```
<div class="container">
        <div class="item1 items">one</div>
        <div class="item2 items">two</div>
        <div class="item3 items">three</div>
        <div class="item4 items">four</div>
        <div class="item5 items">five</div>
        <div class="item6 items">six</div>
        <div class="item7 items">seven</div>
        <div class="item8 items">eight</div>
        <div class="item9 items">nine</div>
    </div>
```


![Screenshot (1643).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1669368387805/97c28TyNu.png align="left")