Why Can't I Remove All The Deadspace From Css Grid Layout?

I've inspected the page with my browsers developer tools. Okay so it looks like the space is coming from the head settings. I've not got any properties set to impact the bottom so

Solution 1:

I checked your snippet. You create issue when you use grid-template-rows: 1fr 1fr 1fr;. I strongly suggest read the A Complete Guide to Grid and CSS Grid Layout.

Your parent gridCSS code.

.grid-container {
    min-height: 100vh;
    /* will cover the 100% of viewport */overflow: hidden;
    display: block;
    position: relative;
    padding-bottom: 100px;
    /* height of your footer */
}

.grid-container {
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "header""main""footer";
}

grid-template-columns: auto;Auto Is a keyword that is identical to maximal content if it's a maximum. As a minimum it represents the largest minimum size (as specified by min-width/min-height) of the grid items occupying the grid track. Note: auto track sizes (and only auto track sizes) can be stretched by the align-content and justify-content properties.

If you want full width for your grid child elements then use grid-template-columns: 1fr;. You can use auto but 1fr solution is good.

grid-template-rows: 1fr 1fr 1fr; You create same height for all child element. If your main content height is 1000px then others two content like header and footer will be same height. This is your main issue. You have to avoid unnecessary space then grid-template-rows will be auto 1fr auto in your case.

grid-template-areas: "header""main""footer"; with footer position is absolute it's incorrect. You no need to set footer position absolute.

Now your grid-container CSS

.grid-container {
    min-height: 100vh;
    /* will cover the 100% of viewport */overflow: hidden;
    display: block;
    position: relative;
    /*padding-bottom: 100px; *//* No need this padding because grid will sent the footer in bottom of the page *//* height of your footer */
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr; /* You can use auto but I prefer 1fr */grid-template-rows: auto 1fr auto; /* Avoid unnecessary space from header and footer */grid-template-areas: "header""main""footer";
}

/* No need to set footer in absolute position */footer {
    /* position: absolute; *//* bottom: 0; *//* width: 100%; */
}

Use @media for responsive design. Use autoprefixer for support most browser in grid layout.

See snippet in full page view.

/* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */html,
    body,
    div,
    span,
    applet,
    object,
    iframe,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    blockquote,
    pre,
    a,
    abbr,
    acronym,
    address,
    big,
    cite,
    code,
    del,
    dfn,
    em,
    img,
    ins,
    kbd,
    q,
    s,
    samp,
    small,
    strike,
    strong,
    sub,
    sup,
    tt,
    var,
    b,
    u,
    i,
    center,
    dl,
    dt,
    dd,
    ol,
    ul,
    li,
    fieldset,
    form,
    label,
    legend,
    table,
    caption,
    tbody,
    tfoot,
    thead,
    tr,
    th,
    td,
    article,
    aside,
    canvas,
    details,
    embed,
    figure,
    figcaption,
    footer,
    header,
    hgroup,
    menu,
    nav,
    output,
    ruby,
    section,
    summary,
    time,
    mark,
    audio,
    video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
    }

    /* HTML5 display-role reset for older browsers */article,
    aside,
    details,
    figcaption,
    figure,
    footer,
    header,
    hgroup,
    menu,
    nav,
    section {
        display: block;
    }

    body {
        line-height: 1;
    }

    ol,
    ul {
        list-style: none;
    }

    blockquote,
    q {
        quotes: none;
    }

    blockquote:before,
    blockquote:after,
    q:before,
    q:after {
        content: '';
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }

    /* END OF CSS RESET
    *******************************************************************//* font */@font-face {
        font-family: "parisr";
        src: url(fonts/parisr.woff) format("woff"), url(fonts/parisr.eot) format("eot"), url(fonts/parisr.svg) format("svg"), url(fonts/parisr.ttf) format("ttf");
        font-style: normal;
        font-weight: 100;
    }

    body {
        font-family: "parisr", Arial, sans-serif;
    }

    html {
        background-color: #236841;
    }

    body {
        background-color: white;
    }
    /* keep the footer at bottom */
    * {
        box-sizing: border-box;
    }

    *:before,
    *:after {
        box-sizing: border-box;
    }

    html,
    body {
        height: 100%;
        position: relative;
    }

    .grid-container {
        min-height: 100vh;
        /* will cover the 100% of viewport */overflow: hidden;
        display: block;
        position: relative;
        /*padding-bottom: 100px;*//* height of your footer */
    }

    /*footer {
        position: absolute;
        bottom: 0;
        width: 100%;
    }*//* margin for computer screens */body {
        margin-left: 150px;
        margin-right: 150px;
    }


    /* CSS Grid Layout */.grid-container {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
        grid-template-areas: "header""main""footer";
    }

    .header {
        display: grid;
        grid-template-columns: 30%70%;
        grid-template-rows: auto auto;
        grid-template-areas: "logo top-links""logo mainnav";
        grid-area: header;
    }


    .logo {
        grid-area: logo;
        margin: 25px auto auto;
    }


    .top-links {
        grid-area: top-links;
    }

    ulli {
        list-style-type: none;
        display: inline;
    }

    ullia {
        text-decoration: none;
    }

    ul#top-links {
        text-align: right;
        padding-top: 1%;
    }

    ul#top-linksli {
        padding: 14px16px;
        color: black;
    }

    .mainnav {
        grid-area: mainnav;
    }

    /* Navigation bar across all pages*/.mainnav {
        background-color: #333;
        overflow: hidden;
    }

    .mainnava {
        float: left;
        color: #f2f2f2;
        text-align: center;
        padding: 14px16px;
        text-decoration: none;
        font-size: 17px;
    }

    .mainnava:hover {
        background-color: #ddd;
        color: black;
    }

    .mainnava.active {
        background-color: #4CAF50;
        color: white;
    }


    /*dropdown for the books */.dropdown {
        float: left;
        overflow: hidden;
    }

    .dropdown.dropbtn {
        font-size: 16px;
        border: none;
        outline: none;
        color: white;
        padding: 14px16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

    .navbara:hover,
    .dropdown:hover.dropbtn {
        background-color: #236841;
    }

    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px8px16px0pxrgba(0, 0, 0, 0.2);
        z-index: 1;
    }

    .dropdown-contenta {
        float: none;
        color: black;
        padding: 12px16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-contenta:hover {
        background-color: #ddd;
    }

    .dropdown:hover.dropdown-content {
        display: block;
    }

    /* END OF HEADER CSS */.main {
        grid-area: main;
    }

    .footer {
        grid-area: footer;
    }

    /* home page */.index {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr;
        grid-template-areas: "topindex""bottomindex";
        grid-area: main;
    }

    .topindex {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "video""bookmonth";
    }

    .bottomindex {

        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 1px1px;
        grid-template-areas: "buybooks sellbooks valuebooks";
    }

    .video {
        grid-area: video;
        padding: 0px25px0px;
    }

    .bookmonth {
        grid-area: bookmonth;

        padding: 0px25px0px;
    }

    .buybooks {
        grid-area: buybooks;

        padding: 0px25px0px;
    }

    .sellbooks {
        grid-area: sellbooks;

        padding: 0px25px0px;
    }

    .valuebooks {
        grid-area: valuebooks;
        padding: 0px25px0px;
    }

    .columnh4 {

    }

<!DOCTYPE html><html><head><metacharset="UTF-8"><title>Emblem Collectible Books</title><linkhref=".css"media="all"></head><body><divclass="grid-container"><header><divclass="header"><divclass="logo"><imgsrc="media/emblem_logo_128.png"id="logo"><pid="logotext">Emblem Rare, Collectible Books</p></div><divclass="top-links"><ulid="top-links"><li><ahref="contactus.html">Contact Us</a></li><li><ahref="#">Accessibility</a></li><li><ahref="#">Login</a></li></ul></div><divclass="mainnav"><ulid="mainnav"role="nav"><li><ahref="index.html">Home</a></li><liclass="dropdown"><buttonclass="dropbtn">Books<iclass="fa fa-caret-down"></i></button><divclass="dropdown-content"><ahref="#">20th Century Books</a><ahref="19century.html">19th Century Books</a><ahref="#">18th Century Books</a><ahref="#">Rare Books</a></div></li><li><ahref="delivery.html">Delivery</a></li><li><ahref="#">About Us</a></li><li><ahref="">Books as an Investment</a></li></ul></div></div></header><mainclass="content"><h1>Welcome to Emblem Collectible Books</h1><divclass="topindex"><section><divclass="video"><videoid="homevideo"width="100%"height="100%"controls><sourcesrc="/media/emblem_video_480x360.webm"type="video/webm" /><sourcesrc="/media/emblem_video_480x360.mp4"type="video/mp4" /><sourcesrc="/media/emblem_video_480x360.ogg"type="video/ogg" /><p>Sorry, your browser does not support this video.</p></video></div></section><section><divclass="bookmonth"><h4>Book of the month</h4><imgsrc="media/heart_of_the_matter.jpg"alt="Heart of the Matter"id="bookmonthimg"><p>The Heart of the Matter Graham Greene 1900 copy. One of only 50 published in this edition. Excellent condition in its original blue cloth with publisher’s device stamped on cover. This book represents an excellent investment, and is expected to appreciate in value by 6% over the next three years. </p></div></section></div><divclass="bottomindex"><divclass="buybooks"><articleclass="column"><h4>Buying Rare Books</h4><p>Emblem are always looking to buy rare books. We offer very competitive prices for appropriate books. All you need to do is contact us with details of the book or collection you are looking to sell. We will need to know the following information,</p></article></div><divclass="sellbooks"><articleclass="column"><h4>Selling Books</h4><p>Emblem sells rare and collectable fiction and poetry. We are particularly interested in 18th and 19th century books, and have a world-renowned stock of latter 19th century women’s writing. Of particular interest are first editions, private press editions, and author signed copies. We also provide a restoration service, and consultancy on investment in rare books. We issue printed and illustrated catalogues of rare books twice a year. We also exhibit at book fairs in the UK, New Zealand, Canada and the USA. </p></article></div><divclass="valuebooks"><articleclass="column"><h4>Valuing Books</h4><p>If you possess books you wish to sell then a formal valuation the most appropriate course of action. Emblem undertakes written valuations for insurance purposes or personal interest. We can appraise a single books or collections. </p><p>If you wish to have a book valued, a free initial verbal assessment of whether the book is likely to have sufficient value to merit a full valuation is recommended. If you decide to go ahead with the valuation, Emblem will provide you with an estimate of the cost before the valuation is carried out in full. Fees for valuation work are charged at a half day rate of £300.</p></article></div></div></main><footer><ulid="footer"><li><aclass="url"href="#">Privacy</a></li><li><aclass="url"href="#">Terms and Conditions</a></li><li><aclass="url"href="#">Returns</a></li></ul></footer></div></body></html>