title: How to actually arrange images in CSS GRID?
body: <p>I have an svg image (with the class <code>content__img</code>) has a default width of <code> 760.7</code> and height of <code>687.08</code>,
  in the grid container there are 2 columns and 2 rows of `` `1fr```, this image is found
  in the first cell, and since the image size is bigger than the first row,
  the image enlarges the height of the row:</p>
  <p><a href="https://i.stack.imgur.com/PxRrm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PxRrm.png" alt="enter image description here" /></a></p>
  <p>taking this into account</p>
  <p><strong>1.-</strong> If I specify that the image has a height
  from <code>100%</code> the image does not fit the height of the first row
  Why is this happening? Shouldn't it be the size of the row at that moment?
  Because with block type elements (and the other elements in general)
  if they take the size of the current row, as far as I know, by default they take the width and height of the cell
  (it also doesn't work assigning <code>display: block</code> to the image)</p>
  <p>HTML:</p>
  <pre><code>&lt;body&gt;
      &lt;div class=&quot;content&quot;&gt;
          &lt;img class=&quot;content__img&quot; src=&quot;../../assets/images/test.svg&quot; alt=&quot;Test&quot;&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.content {
      width: 80%;
      height: 80%;
  
      background-color: beige;
  
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  }
  
  .content__img {
      height: 100%;
  }
  </code></pre>
  <p><strong>2.-</strong> If I wrap the image in a container <code>div</code>
  (with class <code>content__img-box</code>), this also doesn't work, despite
  that the <code>div</code> takes the width and height of 100% of the cell, therefore, if I set the height of the image to 100%, why does the image
  doesn't take the <code>100%</code> from the <code>div</code> (<code>content__img-box</code>)?</p>
  <p>HTML:</p>
  <pre><code>&lt;body&gt;
      &lt;div class=&quot;content&quot;&gt;
          &lt;div class=&quot;content__img-box&quot;&gt;
              &lt;img class=&quot;content__img&quot; src=&quot;../../assets/images/test.svg&quot; alt=&quot;Test&quot;&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>.content {
      width: 80%;
      height: 80%;
  
      background-color: beige;
  
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  }
  
  .content__img {
      height: 100%;
  }
  </code></pre>
  <p>This is the result I want (obviously you can give a fixed or non-dynamic size to the row and that works, but the purpose is that the image is attacked if the grid container grows):</p>
  <p><a href="https://i.stack.imgur.com/zTebK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zTebK.png" alt="enter image description here" /></a></p>