# CSS Grid

# what is grid layout -

The **CSS Grid Layout Module** allows you to position elements in a Grid form in an HTML document. It makes to easily position the elements without using the legacy positioning techniques like CSS Positions and Floats. Grid is colletion of rows, columns, and gaps between them. The main difference between CSS Flexbox and CSS Grid layout is that Grid is a *two-dimensional* layout system for the web which means we can align elements both in horizontal and vertical direction, unlike **CSS Flexbox** module layout which is *one-dimensional.*

## properties for parent element -

**grid-template-columns :** The grid-template-columns CSS property is part of the CSS Grid Layout specification, defining the columns of a grid container by specifying the size of the grid tracks.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671955013245/1c51fb78-95b6-4b59-af3d-6418b6cd48d3.png align="center")

If we see the above example we have a container element named as container and 3 boxes in it. we have specified `display: grid;` property on the container, but nothing was happened (try to play with the above code on your local system) this is because unlike flexbox it would not be enough to only specify display property, that's why we have also specified `grid-template-columns: 200px 200px 200px;` which means the boxes will take up the space horizontally of 200px each and remaining place will be leaved as it is. If we have more boxes than the remaining place, then the boxes will wraps into the next line.

We can also use `grid-template-columns: auto;` to automatically strech to the avaiable space on line. Play with these values to get an idea on them. Along with pxel values we can also use `percentages (%) and fractions (fr)` we know about percentage values (%) they are normal % values used everywhere.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671955339136/6433183a-699d-462f-87ab-c29e8c3a3587.png align="center")

We can use the **repeat** function. The `repeat(3, 1fr)` function takes two arguments, 3 - means: how many number times we want to repeat fractions and the second argument sets the how much space to be taken for a fraction, the more number you give, the more space it will take up to fit.

You can play a little bit with code to get a good understanding of these properties.

**grid-template-rows :** The grid-template-rows property specifies the number of the rows in a grid layout.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671955533351/563e9c38-07ef-4077-b5f4-d811486c1577.png align="center")

Like we had for `grid-template-colums` , we can also use **px, % and fr** values for `grid-template-rows` these will works fine.

We can also use `grid-template-rows` in combination with `grid-template-columns` to make actual grid like layout.

Let's see an example for it,

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671955752314/dde0be9c-f32d-474f-ac74-b89cde8e2726.png align="center")

Syntax -

.item { grid-area: myPlace; }

.grid-container { display: grid; grid-template-areas: " myPlace myPlace . "; }

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671956442368/17620d13-2b19-4c36-ae17-c9cfb24ad2a2.png align="center")

## **Properties for Child Eelements :**

By default, a container has one grid item for each column, in each row, but you can style the grid items so that they will span multiple columns and/or rows.

**grid-column :** The grid-column property defines on which column to place an item. We should manually define where to start and where to end an item.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671956753623/00f337a9-1b40-4356-b812-e12d8f1dddea.png align="center")

**grid-column :** The grid-row property defines on which row to place an item. We should manually define where to start and where to end an item.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1671957112449/bff8483a-17ae-420e-9e70-57abb4005a8f.png align="center")