SCSS

by joepenzo

HTML

<section>
    <div class="gallery">
        <div class="div1"><img src="http://devimg.com/300x300/comics"/></div>
        <div class="div2"><img src="http://devimg.com/300x300/comics?1"/></div>
        <div class="div3"><img src="http://devimg.com/300x300/comics?2"/></div>
        <div class="div4"><img src="http://devimg.com/300x300/comics?3"/></div>
        <!-- <div class="div5 border"> </div> -->
        <!-- <div class="div6 border"> </div> -->
        <!-- <div class="div7 border"> </div> -->
        <!-- <div class="div8 border"> </div> -->
        <div class="div9 border"> </div>
        <div class="div10 border"> </div>
        <div class="div11 border"> </div>
        <div class="div12 border"> </div>
        <div class="div13 border"> </div>
        <div class="div14 border"> </div>
        <div class="div15 border"> </div>
        <!-- <div class="div16 border"> </div> -->
    </div>
</section>

SCSS

body {
    padding: 0;
    margin: 0;
}

* {
    box-sizing: border-box;
}

section {
    background: blue;
    height: 600px;
    width: 100vw;
    position: relative;
}


.gallery {   
    border: 1px solid red;
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-column-gap: 14px;
    grid-row-gap: 14px;
    
    width: 50%;
    aspect-ratio: 1/1;
    
    
    transform: rotate(-45deg);
    
    .div1 { grid-area: 2 / 2 / 3 / 3; }
    .div2 { grid-area: 2 / 3 / 3 / 4; }
    .div3 { grid-area: 3 / 3 / 4 / 4; }
    .div4 { grid-area: 3 / 2 / 4 / 3; }
    .div5 { grid-area: 1 / 1 / 2 / 2; }
    .div6 { grid-area: 1 / 2 / 2 / 3; }
    .div7 { grid-area: 1 / 3 / 2 / 4; }
    .div8 { grid-area: 1 / 4 / 2 / 5; }
    .div9 { grid-area: 2 / 4 / 3 / 5; }
    .div10 { grid-area: 3 / 4 / 4 / 5; }
    .div11 { grid-area: 4 / 4 / 5 / 5; }
    .div12 { grid-area: 4 / 3 / 5 / 4; }
    .div13 { grid-area: 4 / 2 / 5 / 3; }
    .div14 { grid-area: 4 / 1 / 5 / 2; }
    .div15 { grid-area: 3 / 1 / 4 / 2; }
    .div16 { grid-area: 2 / 1 / 3 / 2; }
    
    > div {
        border: 1px solid red;
        aspect-ratio: 1/1;
        overflow: hidden;
    }
    
    img {
        display: block;
        margin: 0;
        padding: 0;
        object-fit: cover;      
        width: 150%;
        transform: rotate(45deg) translateX(-25%);     
    }
    
    .border {
       border: 3px solid #fff;
    }
}