title: Images in CSS Grid
body: <p>I can't figure out how to go about resizing images within CSS Grid.</p>
  
  <p>I don't mind if the image is clipped at all but I would like my aside item to resize the image so that it shrinks/grows to fill the item as best as possible as the webpage is resized.</p>
  
  <p>The grid layout is adjusting with <code>@media (min-width: 600px)  { /* tablet */</code> and <code>@media (min-width: 1600px)  { /* desktop */</code>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="container"&gt;
      &lt;header&gt;
        &lt;a href="./index.html"&gt;Home&lt;/a&gt;
        &lt;a href="./getting-started.html"&gt;Getting Started&lt;/a&gt;
        &lt;a href="./tracks.html"&gt;Tracks&lt;/a&gt;
        &lt;a href="./contact-us.html"&gt;Contact Us&lt;/a&gt;
      &lt;/header&gt;
      &lt;main&gt;Content&lt;/main&gt;
      &lt;advert&gt;Advert&lt;/advert&gt;
      &lt;aside&gt;
        &lt;img src="https://jagrotax.co.uk/wp-content/uploads/2013/01/mojo-tyres-rotax-max.jpg" alt="Mojo Kart Tyre list"&gt;
      &lt;/aside&gt;
      &lt;footer&gt;Maximilian Crosby ©&lt;/footer&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.container  {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 8% 10% 70% 10% 2%;
    grid-gap: 10px;
    grid-template-areas: /* mobile */
      "header"
      "advert"
      "main"
      "aside"
      "footer";
    font-family: 'Comfortaa', cursive;
    min-height: 1000px;
    background: #BCF9FF;
    text-align: center;
  }
  
  header  {
    background: #A6CFFF;
    grid-area: header;
    display: flex;
    flex-wrap: wrap;
    font-size: 26px;
    justify-content: space-evenly;
    align-items: center;
    padding: 0px 40px 0px;
  }
  
  main  {
    background: #A6CFFF;
    grid-area: main;
  }
  
  advert  {
    background: #A6CFFF;
    grid-area: advert;
  }
  
  aside  {
    background: #A6CFFF;
    grid-area: aside;
  }
  
  footer  {
    grid-area: footer;
  }
  </code></pre>