title: CSS Grid. My current layout working as expected on chrome but not on firefox
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>:root {
      --text-color:#fff;
  }
  
  * {
      padding: 0;
      margin: 0;
      border: 0;
      box-sizing: border-box;
  }
  
  body {
      margin: 10px;
      background: #ddd;
      font-family: 'Noto Serif', serif;
  }
  
  .container {
      margin: 0 auto;
      width: 100%;
      height: 100%;
      background: goldenrod;
      display: grid;
      grid-template-columns: 3fr 1fr;
      grid-gap: 10px;
  }
  
  .rightcontainer {
      background: blue;
      padding: 25px;
  }
  
  .rightcontainer .links {
      margin-bottom: 10px;
      font-size: 1.2em;
  }
  
  .links a {
      text-decoration: none;
      color: var(--text-color);
  }
  
  .leftcontainer {
      background: green;
      display: grid;
      grid-template-rows: 1fr 1fr;
      grid-gap: 10px;
  }
  
  .leftcontainer__feature-articles {
      background: yellow;
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
  }
  
  .leftcontainer__feature-article1 {
      background: #000;
      color: #fff;
  }   
  
  .leftcontainer__feature-article2 {
      background: #555;
      color: #fff;
  } 
  
  .leftcontainer__recent-articles {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 10px;
  }
  
  .leftcontainer__recent-articles &gt; div{
      padding: 5px;
      background: #ccc;
      display: grid;
      grid-template-columns: 150px 1fr;
  }
  
  .leftcontainer__recent-articles &gt; div img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  
  .recent-contentholder {
      padding: 10px;
      
  }
  .recent-time-added {
      display: inline-block;
      font-style: italic;
      margin-bottom: 5px;
  }
  
  .leftcontainer__feature-articles &gt; div {
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr;
  }
  
  .leftcontainer__feature-article1 img, 
  .leftcontainer__feature-article2 img {
      width: 100%;
      object-fit: cover;
      height: 100%;
      grid-column: 1 / -1;
      grid-row: 1 / -1;
  }
  
  .leftcontainer__feature-article1 div,
  .leftcontainer__feature-article2 div {
      width: 100%;
      height: 100%;
      grid-column: 1 / -1;
      grid-row: 1 / -1;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
      &lt;title&gt;NewBlog&lt;/title&gt;
      &lt;link href="https://fonts.googleapis.com/css?family=Noto+Serif:400,700|Roboto:100,300,400,500,700,900" rel="stylesheet"&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;div class="leftcontainer"&gt;
              &lt;div class="leftcontainer__feature-articles"&gt;
                  &lt;div class="leftcontainer__feature-article1"&gt;
                      &lt;img src="//source.unsplash.com/random/500x500?v=1" alt=""&gt;
                      &lt;div class="feature-contentholder"&gt;
                          &lt;h2 class="feature-title"&gt;Title1&lt;/h2&gt;
                          &lt;small class="feature-time-added"&gt;
                              Tuesday 30 23:58
                          &lt;/small&gt;
                          &lt;p class="feature-desc"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
                              non!
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="leftcontainer__feature-article2"&gt;
                      &lt;img src="//source.unsplash.com/random/500x500?v=1" alt=""&gt;
                      &lt;div class="feature-contentholder"&gt;
                          &lt;h2 class="feature-title"&gt;Title1&lt;/h2&gt;
                          &lt;small class="feature-time-added"&gt;
                              Tuesday 30 23:58
                          &lt;/small&gt;
                          &lt;p class="feature-desc"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
                              non!
                          &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="leftcontainer__recent-articles"&gt;
                  &lt;div class="leftcontainer__recent-article1"&gt;
                      &lt;img src="//source.unsplash.com/random/300x300?v=1" alt=""&gt;
                      &lt;div class="recent-contentholder"&gt;
                          &lt;h2 class="recent-title"&gt;Title1&lt;/h2&gt;
                          &lt;small class="recent-time-added"&gt;
                              Tuesday 30 23:58
                          &lt;/small&gt;
                          &lt;p class="recent-desc"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
                              non!
                          &lt;/p&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="leftcontainer__recent-article2"&gt;
                      &lt;img src="//source.unsplash.com/random/300x300?v=2" alt=""&gt;
                      &lt;div class="recent-contentholder"&gt;
                          &lt;h2 class="recent-title"&gt;Title2&lt;/h2&gt;
                          &lt;small class="recent-time-added"&gt;
                              Tuesday 30 23:58
                          &lt;/small&gt;
                          &lt;p class="recent-desc"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
                              non!
                          &lt;/p&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="leftcontainer__recent-article3"&gt;
                      &lt;img src="//source.unsplash.com/random/300x300?v=3" alt=""&gt;
                      &lt;div class="recent-contentholder"&gt;
                          &lt;h2 class="recent-title"&gt;Title3&lt;/h2&gt;
                          &lt;small class="recent-time-added"&gt;
                              Tuesday 30 23:58
                          &lt;/small&gt;
                          &lt;p class="recent-desc"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
                              non!
                          &lt;/p&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="leftcontainer__recent-article4"&gt;
                      &lt;img src="//source.unsplash.com/random/300x300?v=4" alt=""&gt;
                      &lt;div class="recent-contentholder"&gt;
                          &lt;h2 class="recent-title"&gt;Title4&lt;/h2&gt;
                          &lt;small class="recent-time-added"&gt;
                              Tuesday 30 23:58
                          &lt;/small&gt;
                          &lt;p class="recent-desc"&gt;Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequuntur modi cumque et labore sunt
                              non!
                          &lt;/p&gt;
  
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="rightcontainer"&gt;
              &lt;div class="links"&gt;
                  &lt;a href="#"&gt;first post&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="links"&gt;
                  &lt;a href="#"&gt;second post&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="links"&gt;
                  &lt;a href="#"&gt;third post&lt;/a&gt;
              &lt;/div&gt;
              &lt;div class="links"&gt;
                  &lt;a href="#"&gt;fourth post&lt;/a&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><code>img</code> tags inside <code>leftcontainer__feature-article1</code> and <code>leftcontainer__feature-article2</code> on chrome sit inside parent taking full width and height as expected, but on firefox im facing issue.</p>
  
  <p>I tried adding <code>max-width</code> and <code>max-height</code> to parent and img then it'll work on firefox and itll fail to work on chrome.</p>
  
  <p>I'm trying to do this since forever I'm unable to figure out what's wrong. I want to know where I'm wrong. </p>