Desplazamiento horizontal usando css en la interfaz de usuario de mamp

Desplazamiento horizontal usando css en la interfaz de usuario de mampostería personalizada

Estoy en una búsqueda para crear una interfaz de usuario de mampostería. Probé muchas muestras y muchas respuestas en StackOverflow, pero nada parece ayudarme.

Mi situación es esta. Tengo un contenedor ul que tiene una altura de height: calc(100vh - 110px); que no puede cambiar. Se insertarán algunas imágenes dinámicas en el li de este ul Quiero que estos li se organicen como la imagen dentro de ellos.

El primer método que probé terminó dándome esto:

img {
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  max-width: 100%;
}

.template-row {
  display: flex;
  flex-flow: row wrap;
  margin-left: -8px;
  /* Adjustment for the gutter */
  width: 100%;
  height: calc(100vh - 110px);
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 0;
}

.template-row li {
  flex: auto;
  height: auto;
  min-width: 150px;
  margin: 0 8px 8px 0;
  /* Some gutter */
  width: 30%;
  list-style: none;
}
<ul class="template-row">
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
</ul>

Como ves arriba, el li tiene la misma altura.

El segundo método que probé:

img {
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  max-width: 100%;
}

.template-row {
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
  height: calc(100vh - 110px);
  overflow-x: hidden;
  overflow-y: scroll;
}

.template-row li {
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}
<ul class="template-row">
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
  </li>
  <li class="card-wrap p-10">
    <div class="temp-wrap">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>
  </li>
</ul>

Como puede ver arriba, el li está alineado correctamente pero el desplazamiento no está en la página.

¿Hay alguna solución exclusiva para CSS y HTML que pueda usar para mi situación? Cualquier ayuda sería apreciada.

Mostrar la mejor respuesta

¿Es posible que utilice un envoltorio adicional? Entonces sería posible establecer la altura en el padre y agregar overflow-y: auto; a esto y agregue la lista real dentro de este envoltorio.

img {
  width: auto;
  height: auto;
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
  border: 0;
}

.template-row {
  height: calc(100vh - 110px);
  overflow-x: hidden;
  overflow-y: scroll;
}

.template-row__body {
  list-style: none;
  -moz-column-count: 4;
  -webkit-column-count: 4;
  column-count: 4;
  -moz-column-gap: 1em;
  -webkit-column-gap: 1em;
  column-gap: 1em;
}

.template-row li {
  display: inline-block;
  margin: 0 0 1em;
  width: 100%;
}
<div class="template-row">
  <ul class="template-row__body">
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      </div>
    </li>
    <li class="card-wrap p-10">
      <div class="temp-wrap">
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
      </div>
    </li>
  </ul>
</div>

ACTUALIZACIÓN: https://jsfiddle.net/0sapr5m0/15/

Pero en este violín en pantalla completa, cuando verifica, puede ver que la imagen con menos ancho no está envuelta correctamente en el div, su padre es más ancho que el img

Oh, ya veo lo que quieres decir. Puede arreglar eso configurando img al 100%. Entonces esos se estirarán proporcionalmente a sus padres. Vea mi fragmento de código editado arriba.

Verifique este violín: jsfiddle.net/jithinrajpr7/0sapr5m0, aunque lo arreglé en column-count: 3 todavía se está dando a ser 2 column ¿puedes arreglar esto?

Vea mi enlace jsfiddle en mi respuesta anterior. Eliminación de pantalla: bloque en línea; en el elemento de la lista lo resuelve. Esto estaba causando un espacio en blanco que estaba causando el salto de línea.

Eso ya lo intenté pero está causando que el div se corte - jsfiddle.net/jithinrajpr7/0sapr5m0, mira este enlace

¿Tienes la posibilidad de usar flexbox en su lugar? En su primer ejemplo, no incluyó el relleno y la sombra del cuadro. En Chrome, esto es un "error" al usar css-columns.

Si hay una solución en flexbox, estaría encantado de usarla. Gracias por tu esfuerzo.

Iré con esto. Ajustaré esto con mi interfaz de usuario, Ty por tus esfuerzos. :)

Aquí está el diseño usando flexbox. Esto debería ser.

img {
  width: auto;
  height: auto;
  max-width: 100%;
  width: 100%;
  vertical-align: middle;
  border: 0;
}

.template-row {
  display: flex;
  flex-flow: row wrap;
  height: calc(100vh - 110px);
  overflow-y: auto;
  padding: .5rem; /* Fix box shadow at top, edit to your own values */
}

.template-row__body {
  list-style: none;
  display: inherit;
  flex-flow: inherit;
  flex: 1 1 100%;
  margin: -.5em; /* Corrects column margin */
}

.template-column {
  margin: .5em; /* Column gap */
  flex-basis: calc(33.33% - 1em);
  flex-grow: 1;
  flex-shrink: 1;
}

img {
  display: block;
  margin-bottom: 1em; /* Column gap * 2 */
  box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.25);
  border-radius: 3px;
  background-color: #fff;
  padding:5px;
  box-sizing: border-box; /* Fix padding */
}
<div class="template-row">
  <div class="template-row__body">
    <div class="template-column">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYSCNFNmxqekF0KMq--WwuuJu9CPZgEhjjlXxW4fKIWnQcBtk_Mg" alt="">
    </div>      

    <div class="template-column">
       <img src="https://i.pinimg.com/474x/21/f3/7e/21f37e120170b6363d24e2ef2d6da223.jpg" alt="">
    </div>  
    
    <div class="template-column">
       <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQKPMXsTBI8EHKvcJ_DZRPWENgMXgU4O2mOJRv6qYNn3FIXFc1Kzg" alt="">
    </div>
    
  </div>
</div>