# Css Grids

CSS Grid Layout provides a two-dimensional layout system, controlling the layout in rows and columns.

Grid Terminologies

1.**Lines**

![GL](https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/Sf8WXYmbhZkbhhPeqTrY.svg)


2.**Tracks**
![GT](https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/7YkhnpgOQLrcaxjlKmlU.svg)

3.**Cell**
![GC](https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/lpiPCpW6fy4BjFOL6j77.svg)

4.**area**
![GA](https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/pGmMokRfoVbLNxf1VXrF.svg)

5.**Container**

```
.container {
  display: grid;
}
``` 
6.**Item**

```
<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>
``` 
7.**Gap**
![GG](https://web-dev.imgix.net/image/VbAJIREinuYvovrBzzvEyZOpw5w1/JNXSRH4j77loSB099E04.svg)