title: How to position grid of images on both side of a div?
body: <p>This is what I'm trying to acomplish: <a href="https://i.stack.imgur.com/uXZ58.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uXZ58.png" alt="enter image description here" /></a> Small parts are images and bigger one is for text, spacing should be same everywhere</p>
  <p>What would be the best way to accomplish this? I am trying it out with grid (I am not sure how else would I be able to do this) but without right success. How to force images so that they line up nicely and with the correct spacing?</p>
  <p>Here is the Codepen
  <a href="https://codepen.io/ivan-topi/pen/BaLvQbL" rel="nofollow noreferrer">https://codepen.io/ivan-topi/pen/BaLvQbL</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>.container {
    max-width: 1200px;
    margin: auto;
  }
  
  .wrapper {
    display: grid;
    grid-gap: 15px;
    grid-template: "img img img img img text text text img2 img2" "img img img img img text text text img2 img2" "img img img img img text text text img2 img2";
  }
  
  .first {
    grid-area: img;
  }
  .first img {
    width: 20%;
  }
  
  .second {
    grid-area: text;
    background: #333;
    color: #fff;
    min-width: 320px;
  }
  
  .third {
    grid-area: img2;
  }
  .third img {
    width: 50%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
  
    &lt;div class="wrapper"&gt;
  
      &lt;div class="first"&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
  
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
  
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
  
      &lt;/div&gt;
      &lt;div class="second"&gt;sadfasdfasdf&lt;/div&gt;
      &lt;div class="third"&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
             
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
        &lt;img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt=""&gt;
      &lt;/div&gt;
  
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>