Thread by @Prathkum

Well all that we have covered so far we can do that using flexbox also.

Let's understand the 2 dimensions of grid layout

{ 14 / 21 }

We can change the position of a particular items in accordance of row and column

For example, I want my first item taking up entire row, that is from first column to last column

grid-column: 1 / 4;

{ 15 / 21 }

Alright moving forward, The next property we have is grid-template-areas which specifies the areas within the grid layout.

Each row is defined by apostrophes (' ')

Sounds confusing? Let see this in action

{ 16 / 21 }

Let's breakdown this code

grid-template-areas: 'areaName areaName areaName areaName areaName';

- Each row is defined by apostrophes (' ')
- Hence only one row in this case as there is only one pair of apostrophes
- Five "areaName" hence five columns

CONT...

{ 17 / 21 }

Now let's apply this area (areaName) to the first grid item

.one {
grid-area: areaName;
}

As you can see item1 take one entire row and 5 columns. As simple as that😄

{ 18 / 21 }

Play around with code here for better understanding

w3schools.com/cssref/playit.…

Write code by your own

codepen.io/prathamkumar/p…

{ 19 / 21 }

Try to play around with code here. This migt be little confusing in the beginning but once you get used to, it all becomes pretty easy

{ 20 / 21 }

codepen.io/prathamkumar/p…

I think that was pretty much it, If you like this thread share it with your connections ❤️

Peace out😉

{ 21 / 21 }

* ⁱᵐᵖʳᵒᵛᵉᵈ ᵛᵉʳˢⁱᵒⁿ ᵒᶠ ᵖʳᵉᵛⁱᵒᵘˢ ᵗʰʳᵉᵃᵈ