# CSS Grid
Grid are two dimensional, one is `inline(row) axis` and second is `block(column) axis`. When grid comes in picture our lay outing problem is solve because we use for lay out `float` and `flexbox` is one dimensional so we not able to lay outing in vertical , we can set item only vertical or horizontal using flexbox.
* A grid have column and rows and between have gap those we know them gutter word.
![grid.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669266774418/0SfwYWE5W.jpg?auto=compress,format&format=webp align="left")
## `display:grid;`:
Grid is block level grid when we use display grid, we eligible use for get more functionality .We give container to display and those container known name as grid-container and grid container inside have their children is also known as grid-item.
## `display:inline-grid;`:
This display grid is inline level grid.
## CSS Grid properties:
Grid have two type properties one for **grid-container property** and second for **grid-item property**.
### Properties for the Parent(Grid Container):
`display`, `grid-template-columns`, `grid-template-rows`, `grid-template-areas`, `grid-template`, `grid-column-gap`, `grid-row-gap`, `grid-gap`, `justify-items`, `align-items`, `place-items`, `justify-content`, `align-content`, `place-content`, `grid-auto-columns`, `grid-auto-rows`, `grid-auto-flow`, `grid`.
* `display`: Display have two value one is `grid` and second is `inline-grid`. **grid**: It's create block level grid. **inline-grid**: It's create inline-level grid.
```xml
.container{
display: grid | inline-grid;
}
```
* #### `grid-template-columns`:
This property divided to grid in column as you as want column. You use many type value unit like as `percentage`, `fr`, `pixel` etc.
**CSS Code**:
```xml
```
**HTML Code**:
```xml
1
2
3
4
1
2
3
4
1
2
3
4
1
```
**Output**:
![temp-col.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669273566039/eGftHBoTW.jpg?auto=compress,format&format=webp align="left")
* **Using Different Unit**:
* **CSS Code**:
```xml
```
* **Output**:
![2.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669273961379/Q4AIgKT13.jpg?auto=compress,format&format=webp align="left")
* #### `grid-template-rows`:
This property create the rows for grid however you want and which type you want size.
* **CSS Code**:
```xml
```
* **Output**:
![3.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669274337445/AC_1ET7Dv.jpg?auto=compress,format&format=webp align="left")
* #### `grid-template-areas`:
Grid template areas defining the name of grid items which specified the `grid-area` property. Grid template areas have three value which is given below.
**Values:**
* `` – the name of a grid area specified with grid-area
* `.` – a period signifies an empty grid cell
* `none` – no grid areas are defined
* **Syntax**:
```xml
.container {
grid-template-areas:
" | . | none | ..."
"...";
}
```
* **Example**:
```xml
```
* **Output**:
![4.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669275606921/CqzqL1KbX.jpg?auto=compress,format&format=webp align="left")
* #### `grid-template`:
This is the shorthand property of `grid-template-rows`, `grid-template-column` and `grid-template-areas`.
**Values**:
* `none` - sets all three properties to their initial values
* ` / ` – sets `grid-template-columns` and `grid-template-rows` to the specified values, respectively, and sets `grid-template-areas` to none
```xml
.container {
grid-template: none | / ;
}
```
* Example:
```xml
```
* Output:
![11.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669279221528/My8MCgXpO.jpg?auto=compress,format&format=webp align="left")
#### `grid-gap(grid-row-gap, grid-column-gap)`:
`grid-gap` is the shorthand property of the `grid-row-gap`, `grid-column-gap`.
**Syntax**:
```xml
.container {
/* standard */
gap: ;
/* old */
grid-gap: ;
}
```
![12.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669279657231/93omsb-eN.jpg?auto=compress,format&format=webp align="left")
* #### `place-items(align-items, justify-items)`:
`place-items` is the short hand property of the `align-items`, `justify-items`.
* `align-items`: Align-items is the align on block(column) axis to the opposite of the justify items axis.
**Values**:
* 1. `start`: this is the start from her cell of the top.
* 1. `end`: this is the start from her cell of the bottom.
* 1. `center`: this is the start from her cell in the center.
* 1. `stretch`: this is the stretch in whole cell.
* 1. `baseline`: this is the align from baseline.
```xml
.container {
align-items: start | end | center | stretch | baseline ;
};
```
**Example**:
```xml
```
![15.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669280865868/YM3uBgiWt.jpg?auto=compress,format&format=webp align="left")
```xml
.container {
align-items: end;
}
```
![14.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669281136769/JgJyX-E2u.jpg?auto=compress,format&format=webp align="left")
```xml
.container {
align-items: stretch;
}
```
![stretch.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669281409130/2zPLhfC9q.jpg?auto=compress,format&format=webp align="left")
```xml
.container {
align-items: center;
}
```
![center.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669281427040/cH67tNPcf.jpg?auto=compress,format&format=webp align="left")
```xml
.container {
align-items: baseline;
}
```
![baseline.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669281438152/cNHNz3lVE.jpg?auto=compress,format&format=webp align="left")
### Shorthand Property `place-items`:
place items have put two value first `align-items` second `justify-items`
```xml
.container {
place-items: ;
}
```
### Place-content(`justify-content`, `align-content`):
this is the shorthand property of the both content justify-content align on the row axis and align-content align on the column axis.
```xml
.container {
place-content: ;
}
```
`justify-content` Example: this is the sit on the row axis and these values are `start`, `end`, `center`, `stretch`, `space-between`, `space-evenly`, `space-around`.
```xml
.container {
justify-content: start | end | center | stretch |space-between | space-around | space-
evenly ;
}
```
**Example**:
```xml
justify-content: start ;
```
![gstart.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286327169/oLpmjMG5L.jpg?auto=compress,format&format=webp align="left")
```xml
justify-content: end ;
```
![gend.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286418420/vFC46K8lS.jpg?auto=compress,format&format=webp align="left")
```xml
justify-content: stretch ;
```
![gstretch.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286653661/NYyoN4-ys.jpg?auto=compress,format&format=webp align="left")
```xml
justify-content: center ;
```
![gcenter.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286450215/y9JW2caqr.jpg?auto=compress,format&format=webp align="left")
```xml
justify-content: space-around ;
```
![sevenly.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286468640/qyRqqIDrh.jpg?auto=compress,format&format=webp align="left")
```xml
justify-content: space-between ;
```
![between.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286483134/bdMoj_yG3.jpg?auto=compress,format&format=webp align="left")
```xml
justify-content: space-evenly ;
```
![evenly2.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669286496565/m9yElGzD4.jpg?auto=compress,format&format=webp align="left")
### `align-content` Example**:**
this is the sit on the column axis and these values are `start`, `end`, `center`, `stretch`, `space-between`, `space-evenly`, `space-around`.
```xml
.container {
align-content: start | end | center | stretch |space-between | space-around | space-
evenly ;
}
```
**Example:**
```xml
align-content: start ;
```
![acstart.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669287462044/wucWu97FL.jpg?auto=compress,format&format=webp align="left")
```xml
align-content: end ;
```
![acend.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669287476437/0eWdRqWLV.jpg?auto=compress,format&format=webp align="left")
```xml
align-content: stretch ;
```
```xml
align-content: center ;
```
![accenter.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669287491940/ACSzSaYtv.jpg?auto=compress,format&format=webp align="left")
```xml
align-content: space-evenly ;
```
![acevenly.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669287508016/a2gZyddPG.jpg?auto=compress,format&format=webp align="left")
```xml
align-content: space-around ;
```
![acaround.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669287519130/1e0kaY-sM.jpg?auto=compress,format&format=webp align="left")
```xml
align-content: space-between ;
```
![acbetween.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669287531306/ns-wNLQRA.jpg?auto=compress,format&format=webp align="left")
### Properties for the Children(Grid Items):
This below property is apply on grid items. `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`, `grid-column`, `grid-row`, `grid-area`, `justify-self`, `align-self`, `place-self`.
#### `grid-column-start`, `grid-column-end`, `grid-row-start`, `grid-row-end`:
**grid-column-start/grid-row-start** is where the item will start and **grid-column-end/grid-row-end** where is the item end.
**Syntax**:
```xml
```
![item1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669288743894/wPH_7HOiO.jpg?auto=compress,format&format=webp align="left")
### `grid-column` and `grid-row`:
`grid-column` and `grid-row` is **shorthand** property of the `grid-column-start`, `grid-column-end`, `grid-row-start` and `grid-row-end`.
```xml
```
![ittttt.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669289146482/xLIaqCyK_.jpg?auto=compress,format&format=webp align="left")
#### `grid-area`:
This is the shorter shorthand property of the **grid-row-start + grid-column-start + grid-row-end + grid-column-end**.
**Syntax:**
```xml
.item1{
grid-area: / / / ;
}
```
**Example:**
```xml
```
![gridarea.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669290219537/PZzp71KlY.jpg?auto=compress,format&format=webp align="left")
* #### `place-self`(`justify-self`, `align-self`)**:**
place-self is the shorthand property of the `justify-self` and `align-self`.
**Syntax:**
```xml
.item1 {
place-self: / ;
}
```
**Example:**
```xml
.item1 {
border: 5px solid rgb(4, 131, 33);
place-self: start stretch;
}
```
![gshsghdgus.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669291253926/GuYaORHl0.jpg?auto=compress,format&format=webp align="left")
#### `justify-self`:
This property apply on grid items and this set the value on row axis.
* **Syntax:**
```xml
.item {
justify-self: start | end | center | stretch;
}
```
* **Example:**
```xml
.item1 {
border: 5px solid rgb(4, 131, 33);
justify-self: center;
}
```
![Screenshot 2022-11-24 173508.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669291529114/TTLy6un-U.jpg?auto=compress,format&format=webp align="left")
```xml
.item1 {
border: 5px solid rgb(4, 131, 33);
justify-self: start;
}
```
![Screenshot 2022-11-24 173855.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669291753724/Ep0s_75_d.jpg?auto=compress,format&format=webp align="left")
```xml
.item1 {
border: 5px solid rgb(4, 131, 33);
justify-self: end;
}
```
![Screenshot 2022-11-24 173952.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669291806249/5bVNXQlKC.jpg?auto=compress,format&format=webp align="left")
```xml
.item1 {
border: 5px solid rgb(4, 131, 33);
justify-self: stretch;
}
```
![Screenshot 2022-11-24 174102.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1669291880165/f99h47yPq.jpg?auto=compress,format&format=webp align="left")
**If you want read more about CSS Grid Go these links :-** [**css tricks**](https://css-tricks.com/snippets/css/complete-guide-grid/#prop-grid-template-areas) **and** [**mdn docs.**](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids)
---