CSS Grid
Published: 2023-04-13 10:56:31

## CSS Grid Layout

Grid or CSS Grid is a layout system which uses rows and columns to to design the web page layout, it is also called two-dimensional layout because of the usage of rows and columns together. With grid layout system it is very easy to design the web page layouts, because before grid, the float and positioning system was used to  design web pages and that weren't doing a very good job because for example the aligning items together in center wasn't an easy job.

## CSS Grid basics

## The HTML layout used in this article.

```
<body>
    <div class="parent">
	<div class="child">1</div>
	<div class="child">2</div>
	<div class="child">3</div>
	<div class="child">4</div>
	<div class="child">5</div>
	<div class="child">6</div>
	<div class="child">7</div>
	<div class="child">8</div>
   </div>
</body>
```

- **Grid Container**

The parent div/element on which the `display: grid` property is applied is called grid container.

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

- **Grid Item**

All the direct child divs/elements of the parent grid container are called grid items. In this case all the divs with class child are grid items.

```
<div class="parent">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
    <div class="child">4</div>
    <div class="child">5</div>
    <div class="child">6</div>
    <div class="child">7</div>
    <div class="child">8</div>
 </div>

```

- **Grid Gap**

The space applied between grid items is called grid gap.

```
 gap: 20px;
```

![Grid gap illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mmzcut1mb75uebrintkd.png)

- **Grid Rows**

The grid items aligned in the horizontal way are called grid rows.

![Grid rows illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/57snuv9j0ekhuy6qerur.png)

- **Grid Columns**

The grid items aligned in the vertical way are called grid columns.

![Grid columns illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2ctin9zx85nryasgvns.png)

- **Grid Area**

The total space composed of rows and columns is called grid area.

![Grid area illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/adn3xa8irpbjir1wylae.png)

- **Grid Lines**

The dividing lines between rows and columns is called grid lines,
the lines dividing the columns are called 1. **The column lines** and the lines dividing the rows are called 2. **The row lines.**

![Grid lines illustration](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h1c0pnlo8syqrbfhvkz9.png)

## CSS Grid properties
Now let's take a look at some widely used Grid properties.

- **column gap** - Specifies the gap between columns of grid.
- **row gap** - Specifies the gap between rows of the grid layout.
- **grid-row-start** - Specifies the row line of a grid item's starting position.
- **grid-row-end** - Specifies the on which row line the grid item will end and it also used to tell how much rows an item can span. 
- **grid-column-start** - Specifies the position of a grid item on the column line.
- **grid-column-end** - Specifies the on which column line position the grid item will end and it also used to tell how much columns an item will span. 
- **grid-area** - This property is a shorthand for `grid-row-start`, `grid-row-end`, `grid-column-start` and `grid-column-end`.
- **grid-template-columns** - This property tells that how many columns can be in the grid layout and also specifies the size of columns.
- **grid-template-rows** - This property tells that how many rows can be in the grid layout and also specifies the size of rows.

## Conclusion
In this article we learnt about the basics of the Grid system and some or the most used grid properties. But there is a lot to learn about grid than this. Hope you liked this article helpfull.