title: Mosaic photo gallery with CSS Grid - photos getting cropped?
body: <p>I am trying to build this mosaic photo gallery using only CSS Grid (no plug-ins or Javascript). After all the CSS code, the result looks like in this pen <a href="https://codepen.io/Cilvako/pen/YzKLLZw" rel="nofollow noreferrer">https://codepen.io/Cilvako/pen/YzKLLZw</a></p>
  
  <p>The problem is that with the photos having different dimensions, some of them get cropped pretty badly. Is there a solution to this or I should simply try to build my Grid more closely to the photos dimensions, so they don't get cropped? (I understand all the cropping comes from setting my column and rows).</p>
  
  <p>I tried changing the object-fit: with other values, but the result is even weirder.</p>
  
  <pre class="lang-css prettyprint-override"><code>   .gallery__img {
         width: 100%;
         height: 100%;
         object-fit: cover;
  }
  </code></pre>
  
  <p>Is there any way to have a mosaic gallery with photos of different dimensions that don't get cropped at all, no matter how you build your grid elements? Thank you!</p>