DEV Community

Cover image for Basic CSS Grid

Basic CSS Grid

Halimah on October 08, 2020

CSS grid is a css module used to make stuffs like these: It is used for css layouts and positioning. To a beginner, css grids comprises of uncl...
Collapse
 
fahad07_khan profile image
Fahad Khan • Edited

Overall your article is good enough. I have learnt much more about CSS grids but now thing stucked me as your written lines are....

"The vertical arrangements of James, Peter, Paul and Jane is a COLUMN.
i.e we have 4 columns.
The horizontal arrangement of James, Charles, and Elvis;"

As I know about vertical vs horizontal views are like below picture,
vertical vs horizontal

Collapse
 
devhalimah profile image
Halimah

Thanks for the observation Fahad.
Please go through that section again,
I just edited the post for better understanding.

By the way, I'm glad you learnt more on css grid 😊.

Collapse
 
fahad07_khan profile image
Fahad Khan

Thankful to u

Collapse
 
colocba profile image
Amir • Edited

Nice article Halimah!
Just wanted to add a pretty cool property. As you did on the example, your 2 first rows are going to be with a height of 60px. But what is going to be the height for the upcoming rows?

For that comes into the game grid-auto-rows. With this property you can set the height of the upcoming rows in general. This will allow you to control your layout with more data that could be entered.

So, if we want all rows to be 60px height we can just remove the grid-template-rows and add grid-auto-rows: 60px;

Or if we want the 2 first with 60px and the rest to be 40px for example, we can add grid-auto-rows: 40px;

Congrats on the post :)

Collapse
 
devhalimah profile image
Halimah • Edited

Wow
Nice one Amir 👍

Thanks for this!
I learnt from it too 😊

Collapse
 
jwp profile image
John Peters

Thanks Halimah!

Collapse
 
devhalimah profile image
Halimah

You're welcome John Peters.

Collapse
 
afhamou profile image
Auwalu Hamza

Thanks Halimah. The post is really educative

Collapse
 
devhalimah profile image
Halimah

You're welcome Hamza.

I'm glad it helped 😊

Collapse
 
ibby_blaq profile image
Ibby

Thank you Halimah!
I learnt something today.

Collapse
 
devhalimah profile image
Halimah

You're welcome Ibby!
I'm glad you did.

Collapse
 
brainiacm profile image
Fox_Coder508

Thanks for sharing Halimah