What Is CSS Grid ?

CSS grid is a layout system used for building two-dimensional layouts by using rows and columns. While flexbox is one dimensional, grid is two dimensional. In order to use Grid layout first the parent element needs to have the property display : grid

Grid-Template-Columns :

The grid-template-columns CSS property is used to define the number of columns a grid container should have by specifying the size of each column.

In the below example we have a container and 3 boxes in it. Here we have used display : grid and also grid-template-columns: 200px 200px 200px ; . So here three boxes of 200px each is distributed in 3 columns.

• Now lets see how to use fraction values :

grid-template-columns: 1fr 1fr 1fr;

Here 3 columns are created with 1fraction for each column. So the whole container is divided into 3 parts each which is 1/3, 1/3, 1/3.

Grid-Template-Rows :

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

In the below example we have 3 boxes and one in each row and each box occupies the whole container width as we have not specified number of columns.

grid-template-rows : 1fr 1fr 1fr;

Now lets create a template using both grid-template-column and grid-template-rows and also lets lets look into some of the column and row properties used on the boxes.

In the above example we have used few properties like grid-column-start, grid-column-end, grid-row-start and grid-row-end. Lets go ahead and see how these work.

In the above we used following :

1. grid-template-columns : 1fr 1fr 1fr : So we have 3 columns of 1fr each.

2. grid-column-start : This is used to specify from which column the item should start.

3. grid-column-end : This is used to specify at which column the item should end.

4. grid-row-start : This is used to specify from which row the item should start.

5. grid-row-end: This is used to specify at which column the item should end.

So looking at the above we see that for :

item1 : The box start from column 1 and ends at 3 and starts at row 1 and ends at row 3

item2 : The box start from column 3 and ends at 4 and starts at row 1 and ends at row 5

item7 : The box start from column 1 and ends at 4

If you want to learn more I suggest you to checkout the grid garden game or Click here.

That's the end of this blog and I hope you liked it. See you in the next one. ✌✌