SCSS

by Victor

HTML

<div class="vidgrid">
  <ul>
    <li>
      <img src="https://placehold.it/1920x1080" alt="">
      <label>Text Here</label>
    </li>
      <li>
      <img src="https://placehold.it/1920x1080" alt="">
      <label>Text Here</label>
    </li>
      <li>
      <img src="https://placehold.it/1920x1080" alt="">
      <label>Text Here</label>
    </li>
      <li>
      <img src="https://placehold.it/1920x1080" alt="">
      <label>Text Here</label>
    </li>
      <li>
      <img src="https://placehold.it/1920x1080" alt="">
      <label>Text Here</label>
    </li>
  </ul>
</div>

SCSS

.vidgrid {
  background: red;
  ul {
  display: flex;
  flex-wrap: wrap;
  li {
      flex: 0 0 21%;
      box-shadow: 0 0 0 1px blue;
      display: inline-block;
      /* max-width: 21%; */
      width: 21%;
      border-radius: 6px;
      overflow: hidden;
      margin-right: 4%;
      margin-bottom: 4%;
     
      img {
      width: 100%;
      }
      label {
        display: block;
        opacity: 0.8;
        text-align: center;
        margin-top: 0.5rem;
      }
    }
  }
}