CSS Grid Мозаика / Плитки

 
<div class="container">
    <div class="grid_mosaic">
        <div class="c1"><img src="img/500x700_001.jpg" alt="pic"></div>
        <div class="c2 wide"><img src="img/800x600_001.jpg" alt="pic"></div>
        <div class="c3"><img src="img/500x700_001.jpg" alt="pic"></div>
        <div class="c4 tall"><img src="img/500x700_001.jpg" alt="pic"></div>
        <div class="c5 wide"><img src="img/800x600_001.jpg" alt="pic"></div>
        <div class="c6 wide tall"><img src="img/500x700_002.jpg" alt="pic"></div>
        <div class="c7 wide"><img src="img/800x600_001.jpg" alt="pic"></div>
        <div class="c8"><img src="img/500x700_001.jpg" alt="pic"></div>
    </div>
</div>

 
html {
    font-size: 18px;
}
body {
    margin: 0;
    padding: 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    border: 1px solid green;
}

.grid_mosaic {
    /*grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
    /*grid-auto-rows: 200px;*/
    grid-auto-flow: dense;
    display: grid;
    grid-gap: 15px;
    grid-template-columns: repeat(5, 1fr);
    align-items: center;
    justify-items: center;
}

.grid_mosaic > div {
    background-color: #EE6E39;
    width: 100%;
    height: 200px;
    position: relative;
}

.grid_mosaic > div::after {
    position: absolute;
    top: 10px;
    left: 10px;
    content: attr(class);
    background-color: yellow;
}

.grid_mosaic img {
    /*display: none;*/
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grid_mosaic .wide {
    grid-column: span 2;
}

.grid_mosaic .tall {
    grid-row: span 2;
    height: 400px;
}