:root {
  --truc-truc: brown;
}

body{
background-color:var(--truc-truc);
margin:1vw;
}
.conteneur{
background-color:yellow;
height:calc(100vw - 200px);
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: repeat(5, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.elementun{
background-color:gold;
grid-area: 1 / 1 / 2 / 2;
column-count:2;
}
.elementdeux{
background-color:green;
grid-area: 2 / 2 / 3 / 4; 
z-index:1;
}
.elementdeux:hover{
background-color:green;
grid-area: 2 / 2 / 3 / 4; 
z-index:2;
}
.elementtrois{
background-color:purple;
grid-area: 2 / 2 / 4 / 3;
z-index:1;
transition-duration:1s;
}
.elementtrois:hover{
background-color:red;
grid-area: 2 / 2 / 4 / 3;
z-index:2;
transition-duration:0.2s;
}