Skip to main content

Forums

This topic contains 6 replies, has 2 voices, and was last updated by  boqsc 10 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #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>
    
    #271148

    boqsc
    Participant

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

    #271184

    Paulie_D
    Moderator

    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.

    #271188

    boqsc
    Participant

    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.

    #271189

    Paulie_D
    Moderator

    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.

    #271190

    boqsc
    Participant

    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.

    #271191

    boqsc
    Participant

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

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star