8 images in asymetric view

Hi,

Thank you for the inquiry.

You may need to manually create the html in a Text or Code Block, then add a few css modifications.

Example:

<div class="image-grid">
    <img src="image1.jpg" class="img img1" />
    <img src="image2.jpg" class="img img2" />
    <img src="image3.jpg" class="img img3" />
    <img src="image4.jpg" class="img img4" />
    <img src="image5.jpg" class="img img5" />
    <img src="image6.jpg" class="img img6" />
    <img src="image7.jpg" class="img img7" />
    <img src="image8.jpg" class="img img8" /></div>

Styles:

.image-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, auto);
    gap: 10px;
    width: 100%;
    max-width: 400px;
    margin: auto;
}

.img {
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Assign different sizes and irregular placements */
.img1 { grid-column: span 1; grid-row: span 1; }
.img2 { grid-column: span 2; grid-row: span 1; }
.img3 { grid-column: span 1; grid-row: span 2; }
.img4 { grid-column: span 2; grid-row: span 2; }
.img5 { grid-column: span 1; grid-row: span 1; }
.img6 { grid-column: span 2; grid-row: span 1; }
.img7 { grid-column: span 1; grid-row: span 2; }
.img8 { grid-column: span 1; grid-row: span 1; }

@media (max-width: 600px) {
    .image-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .img2, .img4, .img6 { grid-column: span 1; }
}

Please check the links below for more info.

// https://css-tricks.com/snippets/css/complete-guide-grid/
// https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Best regards,
Ismael