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 grid CSS 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;
    }

    ul li {
        list-style-type: none;
        display: inline;
    }

    ul li a {
        text-decoration: none;
    }

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

    ul#top-links li {
        padding: 14px 16px;
        color: black;
    }

    .mainnav {
        grid-area: mainnav;
    }

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

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

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

    .mainnav a.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: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

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

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

    .dropdown-content a {
        float: none;
        color: black;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .dropdown-content a: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: 1px 1px;
        grid-template-areas: "buybooks sellbooks valuebooks";
    }

    .video {
        grid-area: video;
        padding: 0px 25px 0px;
    }

    .bookmonth {
        grid-area: bookmonth;

        padding: 0px 25px 0px;
    }

    .buybooks {
        grid-area: buybooks;

        padding: 0px 25px 0px;
    }

    .sellbooks {
        grid-area: sellbooks;

        padding: 0px 25px 0px;
    }

    .valuebooks {
        grid-area: valuebooks;
        padding: 0px 25px 0px;
    }

    .column h4 {

    }

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Emblem Collectible Books</title>
    <link  href=".css" media="all">
</head>

<body>
    <div class="grid-container">
        <header>
            <div class="header">
                <div class="logo">
                    <img src="media/emblem_logo_128.png" id="logo">
                    <p id="logotext">Emblem Rare, Collectible Books</p>
                </div>
                <div class="top-links">
                    <ul id="top-links">
                        <li><a href="contactus.html">Contact Us</a></li>
                        <li><a href="#">Accessibility</a></li>
                        <li><a href="#">Login</a></li>
                    </ul>
                </div>
                <div class="mainnav">
                    <ul id="mainnav" role="nav">
                        <li><a href="index.html">Home</a></li>
                        <li class="dropdown">
                            <button class="dropbtn">Books<i class="fa fa-caret-down"></i></button>
                            <div class="dropdown-content">
                                <a href="#">20th Century Books</a>
                                <a href="19century.html">19th Century Books</a>
                                <a href="#">18th Century Books</a>
                                <a href="#">Rare Books</a>
                            </div>
                        </li>
                        <li><a href="delivery.html">Delivery</a></li>
                        <li><a href="#">About Us</a></li>
                        <li><a href="">Books as an Investment</a></li>
                    </ul>
                </div>
            </div>
        </header>
        <main class="content">
            <h1>Welcome to Emblem Collectible Books</h1>
            <div class="topindex">
                <section>
                    <div class="video">
                        <video id="homevideo" width="100%" height="100%" controls>
                            <source src="/media/emblem_video_480x360.webm" type="video/webm" />
                            <source src="/media/emblem_video_480x360.mp4" type="video/mp4" />
                            <source src="/media/emblem_video_480x360.ogg" type="video/ogg" />
                            <p>Sorry, your browser does not support this video.</p>
                        </video>
                    </div>
                </section>

                <section>
                    <div class="bookmonth">
                        <h4>Book of the month</h4>
                        <img src="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>

            <div class="bottomindex">

                <div class="buybooks">
                    <article class="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>
                <div class="sellbooks">
                    <article class="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>
                <div class="valuebooks">
                    <article class="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>
            <ul id="footer">
                <li><a class="url" href="#">Privacy</a></li>
                <li><a class="url" href="#">Terms and Conditions</a></li>
                <li><a class="url" href="#">Returns</a></li>
            </ul>
        </footer>
    </div>
</body>

</html>