<style>
    .image-container {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
        gap: 1em;
    }

    .image-container img {
        width: 100%;
        height: 10em;
        object-fit: cover;
    }
</style>

<script>
    window.onload = function() {
        let container = document.querySelector('.image-container');
        let images = Array.from(container.children);
        images.sort(() => Math.random() - 0.5);
        images.forEach(image => container.appendChild(image));
    };
</script>

<div class="image-container">
    <img src="image1.avif" alt="Image 1">
    <img src="image2.avif" alt="Image 2">
    <img src="image3.avif" alt="Image 3">
    <img src="image4.avif" alt="Image 4">
    <img src="image5.avif" alt="Image 5">
</div>