Is this considered a correct usage of css grid?

[boqsc]

<title>Home Page</title>

html, body {height: 100%;}

html {
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr;

}

body {
    border: solid 5px black;
    width: 50%;

    display: grid;
    grid-template-rows: 50px auto 50px;
    grid-template-columns: 1fr;
    place-self: center;
    justify-self: center;

}


header { background-color: #0000b7;}
main { background-color: blue;}
footer { background-color:lightblue;}





<header></header>

    sfjsdlkfjlsdfjsdjlf</br>
    sfjsdlkfjlsdfjsdjlf</br>
    sfjsdlkfjlsdfjsdjlf</br>
    sfjsdlkfjlsdfjsdjlf</br>
    sfjsdlkfjlsdfjsdjlf</br>
    sfjsdlkfjlsdfjsdjlf</br>
    sfjsdlkfjlsdfjsdjlf</br>
    sfjsdlkfjlsdfjsdjlf</br>
    sfjsdlkfjlsdfjsdjlf</br>
    sfjsdlkfjlsdfjsdjlf</br>


<footer></footer>

[boqsc]

Why I’m asking for a feedback is: it seems that body is out of html bounds, or it is just me?

[Paulie_D]

There’s no reason to apply grid to the html element.

Why would you need to do that?…Especially since you’re only designating one column and one row…which is what the html element is by default.

Also, I wouldn’t recommend limiting the width of the body…current thinking is to use a container div (or, in fact, you can leverage CSS-Grid to do this).

https://codepen.io/Paulie-D/pen/VxGgXW

It’s not clear to me what it is you are trying to achieve.

[boqsc]

What I miss in your pointed out example with a single grid, is that there is no border around header, main and footer. I wonder if there is any way to apply a border around these three elements without additional container inside grid.
And without applying border-bottom, border-left, border-right, border-top if possible.

https://codepen.io/anon/pen/MGPbjL

[Paulie_D]

No, there isn’t.

CSS-Grid columns & rows aren’t elements and so can’t be styled.

You just need to apply the borders (or remove them) as required.

https://codepen.io/Paulie-D/pen/XqxpbK

[boqsc]

So, now as I have my reason to make element a grid, should I still avoid making a grid container, as it seems to be uncommon to assign any style attributes to the element.

By the way: your examples are very helpful.

[boqsc]

Edit: the element i’m talking about is: html,
it seems that before posting, every element in the comment got removed from the comment.

[Author]

Posts