title: How do I fill an image within a grid area in CSS grid. Below is the code
body: <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>.container1 {
    width: 100%;
    overflow:hidden;
    margin: 0.2em auto;
    display:grid;
    grid-template-columns:25% 25% 25% 25% ;
    grid-template-rows:25% 25% 25%; 
    grid-template-areas:"image1 image2 image3 image3"
                         "image4 iamge4 image5 image6"
                         "image7 image8 image8  image6"
  }
     
  .image1 {
     grid-area: image1;
     /*
     grid-column-start:1;
     grid-column-end: 2;
    */
     border:0.75em black solid;
     filter:grayscale(100%);
     overflow:hidden;
     object-fit: contain;
   }  </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container1"&gt;
  
  &lt;div class="image4"&gt;
    &lt;img src="image/image4.jpg" alt="journey map" /&gt;
  &lt;/div&gt;
  &lt;div class="image5"&gt;
    &lt;img src="image/image5.jpg" alt="wireframing-low fidility" /&gt;
  &lt;/div&gt; </code></pre>
  </div>
  </div>
     </p>
  
  <p>I am trying to fit the image into the grid area, I tried object-fit: contain, cover ..almost everything but it isn't happening. </p>
  
  <p>update:removed the grid-column-start and grid-colum-end </p>