Votre navigateur ne supporte pas cette démonstration
<div class="galerie">
<div class="grid-1"><img src="image.jpg"></div>
<div class="grid-2"><img src="image.jpg"></div>
<div class="subgrid">
<div class="grid-3"><img src="image.jpg"></div>
</div>
<div class="grid-4"><img src="image.jpg"></div>
</div>
*,
*::before,
*::after{
box-sizing: border-box
}
img{
width: 100%;
height: 100%;
object-fit: cover
}
.galerie {
max-width: 37.5rem;
padding: 1rem;
margin: 5rem auto;
background-color: #fff;
box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.2);
--grid-gap: 1rem;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
gap: var(--grid-gap);
}
.grid-3 {
grid-row: 1;
grid-column:1/span 2;
}
.subgrid {
display: grid;
grid-column: span 2;
grid-template-columns: subgrid;
}
.subgrid::after {
content: " ";
outline: var(--grid-gap) solid white;
grid-row: 1;
grid-column: 1;
}
.grid-4 {
grid-column: span 2;
}