为什么文章网格没有一直延伸到屏幕边缘，而是缩短，从而在屏幕边缘和文章网格之间留下了丑陋的空间？
我假设我一开始就错误地设置了网格。但是，我的其他网页页面没有这个问题。
body {
background-image: url(../media/Grocerytheme2.jpg);
background-position: center;
/* Center the image */
background-repeat: no-repeat;
/* Do not repeat the image */
background-size: cover;
display: grid;
grid-template-areas:
"header header header"
"nav article article"
"nav footer footer";
grid-template-rows: 80px 1fr 100px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 10px;
grid-column-gap: 10px;
height: 100vh;
margin: 0;
}
header {
padding: 1.2em;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
/*background: #99ffbb;*/
}
header p,
article p,
footer p,
nav p {
font-weight: bold;
color: #000000;
}
footer,
nav {
padding: 1.2em;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
}
article {
padding: 1.2em;
background: rgba(255, 255, 255, 0.6);
border: 1px solid black;
position: relative;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
}
#mainNav {
grid-area: nav;
}
@media all and (max-width: 575px) {
body {
grid-template-areas:
"header"
"article"
"nav"
"footer";
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
h1 {
text-align: center;
}
h2 {
text-align: left;
}
.navbar {
margin: 0;
padding: 0px;
overflow: hidden;
}
nav li {
list-style-type: none;
margin: 2em 0;
}
nav li a {
color: black;
text-align: left;
padding: 2px 4px;
font-size: 1em;
text-decoration: none;
}
li a.active {
background-color: #4CAF50;
color: white;
padding: 5px;
}
nav li a:hover:not(.active) {
background-color: #555;
color: white;
}
.subnav-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 100px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 1);
z-index: 1;
}
.subnav-content a {
font-size: 0.8em;
color: black;
padding: 12px 12px;
text-decoration: none;
display: block;
}
.subnavbtn a.active {
color: white;
}
.subnav-content a:hover {
background-color: #555;
}
.subnav:hover .subnav-content {
display: block;
}
.subnav:hover .subnavbtn {
-color: #555;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> CS425 </title>
</head>
<body>
<header id="pageHeader">
<h1> <b> Grocos </b> </h1>
</header>
<nav id="mainNav">
<div class="navbar">
<li><a href="HomePage.html"> Home </a></li>
<li><a href="Sign_up_pg.html"> login </a></li>
<div class="subnav">
<div class="subnavbtn">Shop <i class="pulldown"></i></div>
<div class="subnav-content">
<li><a href="poultry.html"> Poultry</a></li>
<li><a href="fruits.html"> Fruits </a></li>
<li><a href="vegetables.html"> Vegetables </a></li>
<li><a href="consumables.html"> Snacks </a></li>
</div>
</div>
</div>
</nav>
<article>
<section class="container content-section">
<h2 class="section-header">Poultry</h2>
<div class="shop-items">
<div class="shop-item">
<span class="shop-item-title">Dozen Eggs</span>
<img class="shop-item-image" src="media/Eggs.jpg">
<div class="shop-item-details">
<span class="shop-item-price">$2.00</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<span class="shop-item-title">Whole chicken</span>
<img class="shop-item-image" src="media/WholeChicken.jpg">
<div class="shop-item-details">
<span class="shop-item-price">$10.00</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<span class="shop-item-title">Lamb chop</span>
<img class="shop-item-image" src="media/Lamb.jpg">
<div class="shop-item-details">
<span class="shop-item-price">$1.50</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
<div class="shop-item">
<span class="shop-item-title">mutton (leg cut)</span>
<img class="shop-item-image" src="media/Goat.jpg">
<div class="shop-item-details">
<span class="shop-item-price">$5.00</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
div class="shop-item">
<span class="shop-item-title">Milk </span>
<img class="shop-item-image" src="media/Milk.jpg">
<div class="shop-item-details">
<span class="shop-item-price">$2.00</span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
</section>
<section class="container content-section">
<h2 class="section-header">CART</h2>
<div class="cart-row">
<span class="cart-item cart-header cart-column">ITEM</span>
<span class="cart-price cart-header cart-column">PRICE</span>
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
</div>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$0</span>
</div>
<button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
</section>
</article>
<footer id="pageFooter">
<p><em> Contact info: </em> <strong>+1999999999</strong> </p>
<p> email us at: <a href="mailto:something.edu"> something.edu </a></p>
</footer>
</body>
</html>将网格区域：文章添加到您的文章 CSS 定义中
article {
padding: 1.2em;
background: rgba(255, 255, 255, 0.6);
border: 1px solid black;
position: relative;
grid-area: article;
}