boqsc

# May 15, 2018 at 12:28 pm

<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

# May 15, 2018 at 12:31 pm

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

Paulie_D

# May 15, 2018 at 11:03 pm

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

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

boqsc

# May 16, 2018 at 7:52 am

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.

Paulie_D

# May 16, 2018 at 8:15 am

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.

boqsc

# May 16, 2018 at 9:04 am

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

# May 16, 2018 at 9:07 am

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