Responsive design : <body> tag and best practices | Scrimba | Page 1

exotic ruin Sep 30, 2025, 11:33 AM

#

Hello everyone,
I'm doing the solo project : learning journal ending the responsive design module and a question comes to my mind while doing it about best practices.

Here's the link of my solo project : https://glittering-pony-2f95cd.netlify.app/

I was wondering if applying CSS grid to the <body> tag alongside grid-template-areas property was something common and/or considered best practices when it comes to responsive design ?

Maybe I was supposed to use CSS grid only for the 'blogs' part and just use flex for the layout ?

If some of you have any thoughts on this please let me know 🙂 thank you !

honest axle Sep 30, 2025, 12:02 PM

#

Hey @exotic ruin
Well done on this project! Nailed it!

To answer your question: using grid like you did on the body, although it works perfectly well, is not common, and I would say, created unnecessary code. Using your devtools, try to remove the display: grid line from the body. What happens?

Well, not much! Your main section loses a bit of white space on the sides. Nothing some padding can't fix on your blogs.

Why is that? By default, block elements will naturally go below one another, creating a column layout. So, unless you need to modify the layout at various breakpoints, that way of using grid is just extra work.

Congrats on using grid for the extra practice though. Great work overall.

exotic ruin Sep 30, 2025, 1:14 PM

#

honest axle Hey <@344206007544709121> Well done on this project! Nailed it! To answer your...

Hey Geoffrey!
Thank you very much for the clear explanations! It’s good to know where it is preferred to use it and where not to, and your explanations made it clear to me. At least I did practice well on the grid 🙂
Thank you again !

#Responsive design : <body> tag and best practices