<div class="container">
  <div class="thumb">
    <img src="https://via.placeholder.com/200" alt="" class="thumb__image">
    <p class="thumb__text">Lorem ipsum dolor sit amet consectetur adipisicing.</p>
  </div>
  <div class="thumb">
    <img src="https://via.placeholder.com/200" alt="" class="thumb__image">
    <p class="thumb__text">Asperiores similique quam magnam deleniti, quasi eos!</p>
  </div>
  <div class="thumb">
    <img src="https://via.placeholder.com/200" alt="" class="thumb__image">
    <p class="thumb__text">Placeat aliquam error temporibus, quasi saepe inventore!</p>
  </div>
  <div class="thumb">
    <img src="https://via.placeholder.com/200" alt="" class="thumb__image">
    <p class="thumb__text">Expedita vitae nostrum perferendis quibusdam assumenda beatae.</p>
  </div>
  <div class="thumb">
    <img src="https://via.placeholder.com/200" alt="" class="thumb__image">
    <p class="thumb__text">Facilis alias quae aliquam veniam? Rem, autem!</p>
  </div>
</div>

body {
  margin: 0;
  font: 16px 'Segoe UI', Arial, Helvetica, sans-serif;
}

.container {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fill, 200px);
}

.thumb {
  position: relative;
}

.thumb__image {
  display: block;
}

.thumb__text {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 10px;
  text-align: center;
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
}