CSS Grid : How to see the grid in Codepen.io


I am learning the CSS grid system. But how can I see the grid?



You don’t have enough items in HTML for the grids to display.

What about now?Is it enough now ?

No it’s not, I can’t find item-d anywhere. Also, section="item-a", this makes no sense, you got to set class= in this case.

Should be better now…I am experimenting with the CSS grid system. I think I understand better how it works now.
Now trying to position items within columns and rows.
I find the CSS gris system much better than Flexbox , which I know already.

But how to combione Flexbox with CSS Grid, given that CSS grid can do all that Flexbox can do but with an additional dimension?

Hi again…I’ve advanced quite a lot now on this project but I am stuck with these 3 issues

1/ For the floating sidebar: I don’t want to the sidebar to start sliding at the top of the webpage, because it shadows the Navigation menu…Shoudl I use some padding-bottom somewhere?
Samething for the bottom of the page; the sidebar has to stop just before intersecting the footer

2/ For the navigation bar (the menu item), how can I make the navigation bar horozontal to the full length of the webpage/windows? And also how can I set its height?

3/ For the elements of my sidebar because I used some style on the lists , it applies to all list tags

However I wand the list for my sidebar with vertical and not horizontal elements.

How can I be more precise in my CSS or how can I do this ?