title: having equal item heights in a column
body: <p>I want to have such a <a href="https://i.stack.imgur.com/kZta2.png" rel="nofollow noreferrer">gallery</a>, with the thumbnails having the equal height along the main column, despite the different height of the images.
  i tried having a <code>&lt;div&gt;</code> around every picture and setting the height on them. but I didn't get the desired result.
  Any idea?</p>
  <pre><code>/* PLEASE see the snippet in Full size */
  </code></pre>
  <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>.gallery .gal-ver .gal-ver-border {
      border: 1px solid #707070;
      border-radius: 10px;
      margin-top: 5px;
      margin-bottom: 5px;
      display: flex;
  }
  .gallery .gal-ver img {
      width: 100%;
      height: auto;
      border-radius: 10px;
      display: block;
      padding: 5px;
  }
  .gallery .imgWrap {
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid #707070;
      border-radius: 15px;
  }
  .gallery .mainimg {
      width: 100%;
      height: auto;
      border-radius: 10px;
      margin: 15px 10px;
  }</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 http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous"&gt;
      &lt;title&gt;[product-name]&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;div class="gallery d-flex"&gt;
     &lt;div class="gal-ver"&gt;
      &lt;div class="gal-ver-border"&gt;&lt;img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg"&gt;&lt;/div&gt;
      &lt;div class="gal-ver-border"&gt;&lt;img src="https://www.ubuy.com.tr/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFXRHR5dlFOcEwuX0FDX1NMMTUwMF8uanBn.jpg"&gt;&lt;/div&gt;
      &lt;div class="gal-ver-border"&gt;&lt;img src="https://m.media-amazon.com/images/I/91iLajROOwL._AC_SX466_.jpg"&gt;&lt;/div&gt;
      &lt;div class="gal-ver-border"&gt;&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSRyT92TMIDrrkzvlOOpKbTiKcC_iCuhWTvKg&amp;usqp=CAU"&gt;&lt;/div&gt;
      &lt;div class="gal-ver-border"&gt;&lt;img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRQZH5HdCYBQm1-WQic_m7LtfC_G1owr2oakQ&amp;usqp=CAU"&gt;&lt;/div&gt;
     &lt;/div&gt;                      
     &lt;div class="col-md-12 col-lg-9 imgWrap"&gt;
       &lt;img src="https://www.ubuy.vn/productimg/?image=aHR0cHM6Ly9tLm1lZGlhLWFtYXpvbi5jb20vaW1hZ2VzL0kvNzFCc0xFam55WkwuX0FDX1NMMTUwMF8uanBn.jpg" class="mainimg"&gt;
     &lt;/div&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>