title: Nested Grid Container in a Grid Container
body: <p>My nested grid is only taking up a little more than one column of its parent grid container, and I want it to take up more space. How can I make the grid tracks of my nested grid as big as the grid tracks of its parent grid container?  The CSS im having trouble with is in the media query. Can someone please help me?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    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;
  }
  
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" dir="ltr"&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"&gt;
      &lt;title&gt;Best City Guide: Ice Cream&lt;/title&gt;
      &lt;link href="../css/normalize.css" rel="stylesheet" /&gt;
      &lt;link href="../css/icecream.css" rel="stylesheet" /&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="main-wrapper"&gt;
        &lt;header class="main-header"&gt;
            &lt;h1 class="name"&gt;&lt;a href="index.html"&gt;Best City Guide&lt;/a&gt;&lt;/h1&gt;
              &lt;ul class="main-nav"&gt;
                &lt;li&gt;&lt;a class="realmains" href="#top"&gt;ice cream&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="realmains" href="#"&gt;donuts&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="realmains" href="#"&gt;tea&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="realmains" href="#"&gt;coffee&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
        &lt;/header&gt;&lt;!--/.main-header--&gt;
        &lt;section class="banner  clearfix"&gt;
          &lt;img class="logo" src="../img/city-logo.svg" alt="City"&gt;
          &lt;h1 class="headline"&gt;Ice Cream&lt;/h1&gt;
          &lt;p class="tagline"&gt;Get you some&amp;excl;&lt;/p&gt;
        &lt;/section&gt;&lt;!--/.banner--&gt;
        &lt;main&gt;
          &lt;section class="nestedgrid1"&gt;
            &lt;article class="nestedgrid-item1"&gt;
              &lt;h2&gt;&lt;a href="#"&gt;1. Grom&lt;/a&gt;&lt;/h2&gt;
              &lt;address class="address"&gt;
                3886 Cross Creek Rd &lt;br/&gt;
                Malibu, CA &lt;br/&gt;
                (310) 456-9797
              &lt;/address&gt;
              &lt;p&gt;Steps from the Pacific&amp;comma; Italian import Grom captures everything there is to love about gelato&amp;colon; the creamy texture&amp;comma; rich flavors&amp;comma; and vibrant colors&amp;period; The cantaloupe&amp;comma; cassis&amp;comma; and peach are the purest expression of fruit in frozen form&amp;period;&lt;/p&gt;
              &lt;img class="icecream-image" src="../img/grom.jpg" alt="Grom Ice Cream"/&gt;
            &lt;/article&gt;
            &lt;article class="nestedgrid-item2"&gt;
              &lt;h2&gt;&lt;a href="#"&gt;2&amp;period; Magpies Softserve&lt;/a&gt;&lt;/h2&gt;
              &lt;address class="address"&gt;
                18971 Ventura Blvd &lt;br/&gt;
                Los Angeles&amp;comma; CA &lt;br/&gt;
                &amp;lpar;310&amp;rpar;456&amp;dash;9797
              &lt;/address&gt;
              &lt;p&gt;Soft serve hit Magpies has already expanded into this second location in the Valley&amp;comma; following the success of their original in Silver Lake&amp;period; Chefs Warren and Rose Schwartz craft housemade soft serve with a bunch of quality toppings to go right alongside&amp;period;&lt;/p&gt;
              &lt;img class="icecream-image" src="../img/magpies-softserve.jpeg" alt="Magpies Softserve Ice Cream"/&gt;
            &lt;/article&gt;
            &lt;article class="nestedgrid-item3"&gt;
              &lt;h2&gt;&lt;a href="#"&gt;3&amp;period; Sweet Rose Creamery&lt;/a&gt;&lt;/h2&gt;
              &lt;address class="address"&gt;
                970 Monument St &lt;br/&gt;
                Pacific Palisades&amp;comma; CA &lt;br/&gt;
                &amp;lpar;310&amp;rpar;260&amp;dash;2663
              &lt;/address&gt;
              &lt;p&gt;With multiple locations across Los Angeles&amp;comma; there seems to be no stopping Sweet Rose&amp;period; Not that anyone is complaining&amp;semi; the ice cream from Zoe Nathan and Josh Loeb&amp;apos;s Rustic Canyon family of restaurants is the brainchild of chef Shiho Yoshikawa and is full of delightful surprises&amp;comma; like their housemade candied nuts and mini meringues&amp;period;&lt;/p&gt;
              &lt;img class="icecream-image" src="../img/sweetrose.jpg" alt="Sweet Rose Creamery Ice Cream" /&gt;
            &lt;/article&gt;
            &lt;article class="nestedgrid-item4"&gt;
              &lt;h2&gt;&lt;a href="#"&gt;4&amp;period; Jeni's Splendid Ice Creams&lt;/a&gt;&lt;/h2&gt;
              &lt;address class="address"&gt;
                540 Rose Ave &lt;br/&gt;
                Venice&amp;comma; CA &lt;br/&gt;
                &amp;lpar;310&amp;rpar;314&amp;dash;2024
              &lt;/address&gt;
              &lt;p&gt;Jeni&amp;apos;s Splendid Ice Creams has expanded from their singular Los Feliz location into a mini&amp;dash;empire that stretches across Los Angeles&amp;period; That&amp;apos;s good news for ice cream lovers&amp;comma; as the Midwestern&amp;dash;based company continues to shine with a fantastic array of summer flavors&amp;period;&lt;/p&gt;
              &lt;img class="icecream-image" src="../img/jenisicecream.jpg" alt="Jeni's Ice Cream's Enterance" /&gt;
            &lt;/article&gt;
            &lt;article class="nestedgrid-item5"&gt;
              &lt;h2&gt;&lt;a href="#"&gt;5&amp;period; CVT Softserve Truck&lt;/a&gt;&lt;/h2&gt;
              &lt;p&gt;Now running a small fleet of converted Mr&amp;period; Softee trucks&amp;comma; CVT Soft Serve mostly plays to Valley crowds desperate for good soft serve &amp;dash; offered with sprinkles or sea salt only&amp;period;&lt;/p&gt;
              &lt;img class="icecream-image" src="../img/CVT-SOFTSERVE.jpeg" alt="CVT SOFT SERVE ICE CREAM"/&gt;
            &lt;/article&gt;
            &lt;article class="nestedgrid-item6"&gt;
              &lt;h2&gt;&lt;a href="#"&gt;6&amp;period;McConnells's Fine Ice Creams Studio City&lt;/a&gt;&lt;/h2&gt;
              &lt;address class="address"&gt;
                12075 Ventura Pl &lt;br/&gt;
                Studio City&amp;comma; CA &lt;br/&gt;
                &amp;lpar;818&amp;rpar;308&amp;dash;7789
              &lt;/address&gt;
              &lt;p&gt;A Santa Barbara outfit with a growing presence in Los Angeles&amp;comma; McConnell&amp;apos;s prides itself on freshly&amp;dash;churned ice cream using dairy from cows along the Central Coast&amp;period; Their classic look in Studio City plays up the company&amp;apos;s decades&amp;dash;old position in the booming California ice cream market&amp;period;&lt;/p&gt;
              &lt;img class="icecream-image" src="../img/mcconnells-icecream.jpg" alt="Mcconnells Icecream"/&gt;
            &lt;/article&gt;
          &lt;/section&gt;
        &lt;/main&gt;
        &lt;footer&gt;
          &lt;div class="footer-content"&gt;
            &lt;div class="footerc1 son"&gt;
              &lt;h3 class="remove-company-padding"&gt;Company&lt;/h3&gt;
              &lt;ul class="nav"&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;Careers&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;Investor Relations&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="footerc2 son"&gt;
              &lt;h3&gt;Services&lt;/h3&gt;
              &lt;ul class="nav"&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;My Account&lt;/a&gt;&lt;/li&gt;
                &lt;li class="tyo"&gt;&lt;a class="main-item" href="#"&gt;Track Your Order&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;Credit Card&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;Gift Card&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="footerc3 son"&gt;
              &lt;h3&gt;Shop&lt;/h3&gt;
              &lt;ul class="nav"&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;Find a Store&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;Store Services&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;Weekly Ad&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div class="footerc4 son"&gt;
              &lt;h3&gt;Resources&lt;/h3&gt;
              &lt;ul class="nav"&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;Return Policy&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;Shipping Rates&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a class="main-item" href="#"&gt;Product Availability &amp;amp; Price&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;p class="copyright"&gt;&amp;copy;2015 Residents of The Best City Ever.&lt;/p&gt;
        &lt;/footer&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>