How to position grid of images on both side of a div?

Question

This is what I'm trying to acomplish: Small parts are images and bigger one is for text, spacing should be same everywhere

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?

Here is the Codepen https://codepen.io/ivan-topi/pen/BaLvQbL

.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%;
}

<div class="container">

  <div class="wrapper">

    <div class="first">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">

      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">

      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">

    </div>
    <div class="second">sadfasdfasdf</div>
    <div class="third">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
           
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
    </div>

  </div>

</div>

related: https://stackoverflow.com/q/43124275/8620333 – Temani Afif Jan 16 '21 at 15:34 — Temani Afif, Jan 16 '21 at 15:34

score 1 · Accepted Answer · answered Jan 16 '21 at 15:50

I wouldn't use grid-template-areas for such a giant layout. It's a bit complicated to read for everybody. I would simply create the same box over and over but assign 3 rows and 3 columns to that specific (text) element. This way, you can also remove a couple of extra divs.

.wrapper {
  display: grid;
  grid-gap: 15px;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.text {
  grid-row: 1 / span 3;
  grid-column: 6 / span 3;
}

.img-fluid {
      width: 100%;
}

<div class="wrapper">

      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">

      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">

      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">

  
      <div class="text">sadfasdfasdf</div>
  
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
           
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">
      <img class="img-fluid" src="https://via.placeholder.com/150x150.png" alt="">

</div>

How to position grid of images on both side of a div?

1 Answers1