Почему я не могу удалить все мертвые пространства из CSS Grid Layout?

Question

    /* 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: auto;
        grid-template-rows: 1fr 1fr 1fr;
        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 rel="stylesheet" href="stylesheet.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>

Я проверил страницу с помощью инструментов для разработчиков браузеров. Итак, похоже, что пространство зависит от настроек головы. У меня не настроено никаких свойств, влияющих на дно, поэтому я сейчас растерялся.

Я уже пытался установить padding / margin в 0, но это ничего не изменило. Также попытался поиграть с некоторыми свойствами, установленными на auto, но безрезультатно.

Любые предложения будут с благодарностью приняты.

Это HTML:

    <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Emblem Collectible Books</title>
    <link rel="stylesheet" href="stylesheet.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>

и это CSS:

/* 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: auto;
    grid-template-rows: 1fr 1fr 1fr;
    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 {

}


/* Books */
.books {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "article1 picture1""picture2 article2""article3 picture3";
    grid-area: books;
}

.article1 {
    grid-area: article1;
}

.picture1 {
    grid-area: picture1;
}

.picture2 {
    grid-area: picture2;
}

.article2 {
    grid-area: article2;
}

.article3 {
    grid-area: article3;
}

.picture3 {
    grid-area: picture3;
}

/* Delivery  needs style*/
.delivery {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: "intro""table""article";
    grid-area: delivery;
}

.intro, .table, .article {
    padding: 0% 25% 0%;
}

.intro {
    grid-area: intro;
}

.table {
    grid-area: table;
}

.article {
    grid-area: article;
}

/* Contact Us needs style */

form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(7, auto);
    grid-template-areas: 
    "title" 
    "name"
    "email"
    "nature"
    "message"
    "submit";
    grid-gap: 0.8rem 0.5rem;
    background: #EEE;
    padding: 1rem;
    border: 2px solid #7E7E7E;
    margin-bottom: 2rem;
}

#title {
    grid-area: title;
}

#name {
    grid-area: name;
}

#email {
    grid-area: email;
}

#nature {
    grid-area: nature;
}

#message {
    grid-area: message;
}

#submit {
    grid-area: submit;
}

label {
    display: block; 
}

textarea {
    width: 100%;
    height: 8rem;
}

button {
    background: #444;
    color: #FFF;
    padding: 1rem;
}

input, select {
    width: 90%;
    padding: 0.5rem;
    margin: 0.5rem 0;
}

fieldset {
    border: 1px solid #A8A8A8;
}

#contactform {
    margin: 0% 25% 0%;
}

/* 19th century needs images and styling*/
#19centurybooks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 1px 1px;
    grid-template-areas: "article1 picture1""picture2 article2""article3 picture3""picture4 article4""article5 picture5""picture6 article6";
}

.article1 {
    grid-area: article1;
}

.article2 {
    grid-area: article2;
}

.article3 {
    grid-area: article3;
}

.article4 {
    grid-area: article4;
}

.article5 {
    grid-area: article5;
}

.article6 {
    grid-area: article6;
}

.picture1 {
    grid-area: picture1;
}

.picture2 {
    grid-area: picture2;
}

.picture3 {
    grid-area: picture3;
}

.picture4 {
    grid-area: picture4;
}

.picture5 {
    grid-area: picture5;
}

.picture6 {
    grid-area: picture6;
}


/* MEDIA QUERIES FOR SMALLER SCREEN SIZES */

@media

Также не стесняйтесь критиковать мой код. Я все еще учусь, и я могу сделать с любой обратной связью.

Answer 1

Я проверил ваш фрагмент. Вы создаете проблему, когда используете grid-template-rows: 1fr 1fr 1fr;. Я настоятельно рекомендую прочитать Полное руководство по сетке и CSS Схема сетки .

Ваш родительский код grid CSS.

.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; Авто Это ключевое слово, идентичное максимальному содержанию, если оно максимальное. Как минимум, он представляет наибольший минимальный размер (как указано min-width/min-height) элементов сетки, занимающих дорожку сетки. Примечание: auto размеры дорожек (и только auto размеры дорожек) можно растянуть с помощью свойств align-content и justify-content.

Если вы хотите использовать полную ширину для дочерних элементов сетки, используйте grid-template-columns: 1fr;. Вы можете использовать auto, но решение 1fr хорошо.

grid-template-rows: 1fr 1fr 1fr; Вы создаете одинаковую высоту для всех дочерних элементов. Если ваш main контент height равен 1000px, тогда другие два контента, такие как header и footer, будут одинаковыми height. Это ваша главная проблема. Вы должны избегать ненужного пробела, тогда grid-template-rows будет auto 1fr auto в вашем случае.

grid-template-areas: "header""main""footer"; с позицией footer абсолютно, это неверно. Вам не нужно устанавливать footer положение absolute.

Теперь ваш 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%; */
}

Используйте @ media для адаптивного дизайна. Используйте autoprefixer для поддержки большинства браузеров в макете сетки.

См. Фрагмент в режиме полного просмотра страницы.

/* 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 rel="stylesheet" href="stylesheet.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>