Difference between body tag and main tag

I’ve been attempting to do a grid on CSS that contains my header, form, and footer. However, when I try to use the main tag or body tag it does not position itself correctly. I tried using both of them:
body { background-color: gray;}
main { display: grid:
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;"

This creates the grid how I want it, but it does not contain the background as gray. However, without the body tag, it will not let me create the grid. Please explain what is going on.

Hi! can you maybe add a link to your codepen so it’s easier for others to debug the problem you’re facing.

From this, i assume you have a body element and within it, you have three children, the header, the form and the footer and you want to know what kinda container you should use so you can have a background-color of gray.

The answer to that is that any kind of container should do. However i would suggest you to not use your body element or your main element as the container as it goes against semantic html in this case. Your main element should only contain the main content of the page and the header and the footer element are not a part of it.

i would suggest your page to be structured this way

Screenshot from 2021-06-24 23-49-55

And your should code work just fine however if you are still facing problems i would suggest you to host your page on codepen if you haven’t already and add a link to it here so it’s easier for others to get an idea of what you’re trying to accomplish.

Hope this helped! :slight_smile:

1 Like

Thank you! I tried your suggestion and it worked! I was using the main ag as a container which is why in this case it was not useful.

No worries! let me know if you face any more problems! :wink:

1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.