我的嵌套网格只占用其父网格容器的一列多一点，我希望它占用更多空间。如何使嵌套网格的网格轨迹与其父网格容器的网格轨迹一样大？我遇到麻烦的CSS是在媒体查询中。有人可以帮帮我吗？
* {
box-sizing: border-box;
cursor: crosshair;
line-height: 1.5;
}
html {
font-size: 16px;
}
a:link {
text-decoration: none;
}
ul {
list-style-type: none;
padding: 0;
}
a {
text-transform: uppercase;
}
.icecream-image {
display: none;
}
.logo {
height: 12.5rem;
width: 12.5rem;
}
.main-wrapper {
display: grid;
grid-template-columns: 1fr;
grid-auto-row: minmax(150px, auto);
grid-template-areas:
"header"
"banner"
"main-content"
"footer" ;
}
.headline,
.tagline,
address,
h2,
p {
text-align: center;
}
.main-container {
margin: 0 auto;
width: 80%;
}
.main-header {
grid-area: header;
display: flex;
flex-direction: column;
align-items: center;
padding: 0.25rem;
}
.name {
margin-bottom: 0.25rem;
margin-top: 0.50rem;
}
.banner {
grid-area: banner;
background-color: #3acec2;
color: #fff;
}
.logo {
display: block;
margin: 0 auto;
padding-top: 0.25rem;
}
.nestedgrid1 {
grid-area: main-content;
}
footer {
grid-area: footer;
text-align: center;
}
h3 {
margin-bottom: 0.25rem;
}
.copyright {
margin-bottom: 0.25rem;
}
/* .name {
text-align: center;
} */
.main-nav {
text-align: center;
}
@media (min-width: 768px) {
.main-wrapper {
grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: 6.25rem repeat(3, minmax(9.375rem, auto)) ;
grid-template-areas:
"header header header header"
"banner banner banner banner"
"main-content main-content main-content main-content"
"footer footer footer footer" ;
}
.main-header {
display: flex;
}
.main-nav {
display: flex;
justify-content: space-between;
width: 50%;
}
.nestedgrid1 {
display: grid;
/* grid-template-columns: 1fr 2fr 1fr;
grid-template-rows: repeat(2, minmax(15.625rem, auto)); */
grid-template-areas:
"item1 item2 item3"
"item4 item5 item6" ;
}
.nestedgrid-item1 {
grid-area: item1;
}
.nestedgrid-item2 {
grid-area: item2;
}
.nestedgrid-item3 {
grid-area: item3;
}
.nestedgrid-item4 {
grid-area: item4;
}
.nestedgrid-item5 {
grid-area: item5;
}
.nestedgrid-item6 {
grid-area: item6;
}
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8">
<title>Best City Guide: Ice Cream</title>
<link href="../css/normalize.css" rel="stylesheet" />
<link href="../css/icecream.css" rel="stylesheet" />
</head>
<body>
<div class="main-wrapper">
<header class="main-header">
<h1 class="name"><a href="index.html">Best City Guide</a></h1>
<ul class="main-nav">
<li><a class="realmains" href="#top">ice cream</a></li>
<li><a class="realmains" href="#">donuts</a></li>
<li><a class="realmains" href="#">tea</a></li>
<li><a class="realmains" href="#">coffee</a></li>
</ul>
</header><!--/.main-header-->
<section class="banner clearfix">
<img class="logo" src="../img/city-logo.svg" alt="City">
<h1 class="headline">Ice Cream</h1>
<p class="tagline">Get you some!</p>
</section><!--/.banner-->
<main>
<section class="nestedgrid1">
<article class="nestedgrid-item1">
<h2><a href="#">1. Grom</a></h2>
<address class="address">
3886 Cross Creek Rd <br/>
Malibu, CA <br/>
(310) 456-9797
</address>
<p>Steps from the Pacific, Italian import Grom captures everything there is to love about gelato: the creamy texture, rich flavors, and vibrant colors. The cantaloupe, cassis, and peach are the purest expression of fruit in frozen form.</p>
<img class="icecream-image" src="../img/grom.jpg" alt="Grom Ice Cream"/>
</article>
<article class="nestedgrid-item2">
<h2><a href="#">2. Magpies Softserve</a></h2>
<address class="address">
18971 Ventura Blvd <br/>
Los Angeles, CA <br/>
(310)456‐9797
</address>
<p>Soft serve hit Magpies has already expanded into this second location in the Valley, following the success of their original in Silver Lake. Chefs Warren and Rose Schwartz craft housemade soft serve with a bunch of quality toppings to go right alongside.</p>
<img class="icecream-image" src="../img/magpies-softserve.jpeg" alt="Magpies Softserve Ice Cream"/>
</article>
<article class="nestedgrid-item3">
<h2><a href="#">3. Sweet Rose Creamery</a></h2>
<address class="address">
970 Monument St <br/>
Pacific Palisades, CA <br/>
(310)260‐2663
</address>
<p>With multiple locations across Los Angeles, there seems to be no stopping Sweet Rose. Not that anyone is complaining; the ice cream from Zoe Nathan and Josh Loeb's Rustic Canyon family of restaurants is the brainchild of chef Shiho Yoshikawa and is full of delightful surprises, like their housemade candied nuts and mini meringues.</p>
<img class="icecream-image" src="../img/sweetrose.jpg" alt="Sweet Rose Creamery Ice Cream" />
</article>
<article class="nestedgrid-item4">
<h2><a href="#">4. Jeni's Splendid Ice Creams</a></h2>
<address class="address">
540 Rose Ave <br/>
Venice, CA <br/>
(310)314‐2024
</address>
<p>Jeni's Splendid Ice Creams has expanded from their singular Los Feliz location into a mini‐empire that stretches across Los Angeles. That's good news for ice cream lovers, as the Midwestern‐based company continues to shine with a fantastic array of summer flavors.</p>
<img class="icecream-image" src="../img/jenisicecream.jpg" alt="Jeni's Ice Cream's Enterance" />
</article>
<article class="nestedgrid-item5">
<h2><a href="#">5. CVT Softserve Truck</a></h2>
<p>Now running a small fleet of converted Mr. Softee trucks, CVT Soft Serve mostly plays to Valley crowds desperate for good soft serve ‐ offered with sprinkles or sea salt only.</p>
<img class="icecream-image" src="../img/CVT-SOFTSERVE.jpeg" alt="CVT SOFT SERVE ICE CREAM"/>
</article>
<article class="nestedgrid-item6">
<h2><a href="#">6.McConnells's Fine Ice Creams Studio City</a></h2>
<address class="address">
12075 Ventura Pl <br/>
Studio City, CA <br/>
(818)308‐7789
</address>
<p>A Santa Barbara outfit with a growing presence in Los Angeles, McConnell's prides itself on freshly‐churned ice cream using dairy from cows along the Central Coast. Their classic look in Studio City plays up the company's decades‐old position in the booming California ice cream market.</p>
<img class="icecream-image" src="../img/mcconnells-icecream.jpg" alt="Mcconnells Icecream"/>
</article>
</section>
</main>
<footer>
<div class="footer-content">
<div class="footerc1 son">
<h3 class="remove-company-padding">Company</h3>
<ul class="nav">
<li><a class="main-item" href="#">About Us</a></li>
<li><a class="main-item" href="#">Careers</a></li>
<li><a class="main-item" href="#">Investor Relations</a></li>
</ul>
</div>
<div class="footerc2 son">
<h3>Services</h3>
<ul class="nav">
<li><a class="main-item" href="#">My Account</a></li>
<li class="tyo"><a class="main-item" href="#">Track Your Order</a></li>
<li><a class="main-item" href="#">Credit Card</a></li>
<li><a class="main-item" href="#">Gift Card</a></li>
</ul>
</div>
<div class="footerc3 son">
<h3>Shop</h3>
<ul class="nav">
<li><a class="main-item" href="#">Find a Store</a></li>
<li><a class="main-item" href="#">Store Services</a></li>
<li><a class="main-item" href="#">Weekly Ad</a></li>
</ul>
</div>
<div class="footerc4 son">
<h3>Resources</h3>
<ul class="nav">
<li><a class="main-item" href="#">Return Policy</a></li>
<li><a class="main-item" href="#">Shipping Rates</a></li>
<li><a class="main-item" href="#">Product Availability & Price</a></li>
</ul>
</div>
</div>
<p class="copyright">©2015 Residents of The Best City Ever.</p>
</footer>
</div>
</body>
</html>改变这个：
@media (min-width: 768px) {
.main-wrapper {
grid-template-columns: 1fr 2fr 1fr;
}
在你的CSS文件中：
@media (min-width: 768px) {
.main-wrapper {
grid-template-columns: auto auto auto auto;
}