Noté en Wikipedia https://en.wikipedia.org/wiki/Hercules#Modern_era que hay una galería de listas desordenadas que siempre cambian de tamaño para ajustarse al ancho máximo según la cantidad de elementos que hay en una fila. Puede ver esto si cambia el tamaño de la ventana de su navegador. Después de que una imagen salta a una nueva fila, vuelve a calcular el ancho de las imágenes restantes para luego volver a llenar todo el ancho de la fila.

Supongo que esto se hace a través de javascript o jquery (en lugar de CSS), sin embargo, no sé cómo alguien obtendría la cantidad de elementos que se encuentran actualmente en una sola fila para volver a calcular el ancho de cada elemento en este caso.

¿Hay una solución simple para esto?

A continuación se muestra la implementación de la lista de esto sin el cambio de tamaño:

 ul{ border: 1px solid #000; background-color: #eee; display: block; text-align: center; list-style-type: none; padding: 0; } li{ padding-left: 0; display: inline-block; margin: 5px; vertical-align: left; } .block{ width: 40px; height: 60px; background-color: #000; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li> <div class="block"></div> </li> <li> <div class="block"></div> </li> <li> <div class="block"></div> </li> <li> <div class="block"></div> </li> <li> <div class="block"></div> </li> <li> <div class="block"></div> </li> </ul>