- This topic is empty.
-
AuthorPosts
-
May 15, 2018 at 12:28 pm #271147
boqsc
Participant<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>
May 15, 2018 at 12:31 pm #271148boqsc
ParticipantWhy I’m asking for a feedback is: it seems that body is out of html bounds, or it is just me?
May 15, 2018 at 11:03 pm #271184Paulie_D
MemberThere’s no reason to apply
grid
to thehtml
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.
May 16, 2018 at 7:52 am #271188boqsc
ParticipantWhat 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.May 16, 2018 at 8:15 am #271189Paulie_D
MemberNo, 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.
May 16, 2018 at 9:04 am #271190boqsc
ParticipantSo, 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.
May 16, 2018 at 9:07 am #271191boqsc
ParticipantEdit: the element i’m talking about is: html,
it seems that before posting, every element in the comment got removed from the comment. -
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.