Создайте изображение галереи Mosia c внутри набора Div

Question

Я пытаюсь создать для моего веб-приложения доску в стиле pinterest, которая будет состоять из html, css и javascript / jquery (на данный момент я просто кодирую их как stati c страницы) Нет таких фреймворков, как bootstrap. Он должен работать на разных размерах экрана, поэтому должен быть отзывчивым, для достижения этого я попытался использовать flexbox, однако это не сработало либо

У меня есть сделал первоначальную попытку, однако я относительно новичок в веб-разработке и не могу заставить изображения оставаться внутри "доски внутри" div. Поскольку изображения будут разных размеров, мне нужно, чтобы они соответствовали

/* CSS for Login-image-holder  */

.main-column-holder {
  display: grid;
  grid-template-columns: repeat( auto-fit, minmax(350px, 1fr));
  justify-items: center;
  align-items: center;
}

.column-holder {
  display: flex;
  flex-direction: column;
  width: calc(100% - 50px);
  align-items: center;
  justify-content: center;
}


/* CSS for collection-holder  */

.board-holder {
  display: flex;
  width: 100%;
  border: #b2b2b2 1px solid;
  height: 310px;
  flex-direction: column;
}

.board {
  height: 100%;
}

.board-inner {
  height: 100%;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

.board-image {
  width: 32%;
  height: auto;
}

.detailer {
  display: flex;
  flex-direction: column;
  background: white;
}

.board-inline {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.counter {
  align-self: flex-start;
}

.board-author {
  align-self: flex-end;
}


}

<div class="main">
  <div class="main-column-holder">
    <div class="column-holder">

      <div class="board-holder">
        <!--   Board -->
        <div class="board">
          <div class="board-inner">
            <img class="board-image" src="https://source.unsplash.com/HtHrjExpddA" alt="">
            <img class="board-image" src="https://source.unsplash.com/Y--zr3CPaPs" alt="">
            <img class="board-image" src="https://source.unsplash.com/W7QkaUbYEmg" alt="">
            <img class="board-image" src="https://source.unsplash.com/4dhlFpZ0dDw" alt="">
            <img class="board-image" src="https://source.unsplash.com/QMRN_GX7p4I" alt="">
          </div>
        </div>

        <!-- detail Holder-->
        <div class="detailer">
          <div class="board-header">
            <h3 class="header">Animals</h3>
          </div>
          <div class="board-inline">
            <div class="counter">
              <p class="count_text"><span class="counter">73</span> Photos</p>
            </div>
            <div class="board-author">
              <p class="author_text"><span class="author">Jon Bucket</span></p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

внутри внутреннего блока платы и при необходимости измените размер.

https://codepen.io/humzaysf/pen/WNvrjGJ