title: Responsive grid gallery with different sizes
body: <p>I have a bunch of cards and I need to make a gallery like in the picture below. Problem is that the sizes of these cards depend on its containing data. They can be small or huge.  The whole day I'm trying to make it responsive, could you please help me!!!</p>
  
  <p><a href="https://i.stack.imgur.com/KK6dL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KK6dL.png" alt="enter image description here"></a></p>
  
  <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>.awards-cards {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(3, 370px);
    grid-auto-rows: minmax(min-content, max-content)
  }
  
  .award-card__wrapper {
    max-width: 370px;
    padding: 11px;
    background: #FFFFFF;
    border-radius: 7px;
    height: auto;
    object-fit: cover;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div className="awards-cards"&gt;
    &lt;div class="award-card__wrapper"&gt; data inside &lt;/div&gt;
    &lt;div class="award-card__wrapper"&gt; data inside &lt;/div&gt;
    &lt;div class="award-card__wrapper"&gt; data inside &lt;/div&gt;
    &lt;div class="award-card__wrapper"&gt; data inside &lt;/div&gt;
    &lt;div class="award-card__wrapper"&gt; data inside &lt;/div&gt;
    &lt;div class="award-card__wrapper"&gt; data inside &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>