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
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.
