CSS Grid

While I was learning CSS, I found this topic really interesting. The moment the tutor added a new display property. I felt, why do we need another display property when we are already able to design everything without this new property. Moreover, there was so much to study in this new module.

But when I started using Grid, I felt this makes our work unexpectedly easier.

So what is this display: grid; ?

This property divides a container into rows and column, Once the rows and columns are created we can add different elements to the cells formed, And determine the height and width of the cells. This makes the design more structured and maintained. Apart from this, it becomes much easier for the person who is styling the components as this property removes a lot of tedious hit and trial margin and position adjustments.

Suppose a container has 4 elements, say, element1, element2, element3, element4.

To structure them in a grid, we add a property “display: grid” to the main container. By default, the grid will hold 1 column and 4 rows for 4 elements.

What if we want our own customized rows and columns? For that, we can use two more properties to the container

grid-template-columns: 200px 20% 1fr 2fr

grid-template-rows: 50px 75px

The above properties will add 4 columns and 2 rows, which will altogether make 8 cells.

I have added different units beside the numbers in grid-template-columns property.

The 200px makes the width of the first column 200px, 20% means 20%of total width of the container, fr units depends on the space left, there are 1fr and 2fr so the remaining space after 200px and 20% will be divided by 3, 1/3 of remaining space will be allocated to 3rd row and remaining 2/3 will be allocated to 4th row.

We can also put “auto” in the value of grid-template-columns, it will simply allocate all the remaining space available.

If we put “auto” in the value of grid-template-rows, it will simply allocate the space required by the element. If we add height to the container, then auto will mean the remaining space available for the row.

As mentioned in the beginning we have 4 elements, so these 4 elements will be placed over the 1st 4 cells of 1st row serially.

What if we want the 3rd cell of the 1st row to be empty and 3rd element to be placed over 1st and 2nd column of 2nd row ?

We can customize the cell numbers for each element by adding 4 more properties to the required element.

grid-column-start: 1

grid-column-end: 3

grid-row-start: 2

grid-row-end: 3

The values beside the properties are line numbers.

grid-template-columns: repeat(4, 25%)

This will add 4 columns with width of 25%

grid-template-rows: minmax(10px, 200px)

This will mean the rows will be minimum