<style>
.images {
display: grid;
grid-template: 1fr 1fr 1fr 1fr / 1fr 1fr 1fr 1fr;
gap: 0px;
height:400px;
width:400px;
}
#image1 {
background-color: #386641;
grid-row: 1 / 2;
grid-column: 1 / 3;
}
#image2 {
background-color: #a7c957;
grid-row: 2 / 4;
grid-column: 2 / 4;
}
#image3 {
background-color: #6a994e;
grid-row: 1 / 2;
grid-column: 3 / 4;
}
#image4 {
background-color: #386641;
grid-row: 1 / 3;
grid-column: 4 / 5;
}
#image5 {
background-color: #386641;
grid-row: 3 / 5;
grid-column: 1 / 2;
}
#image6 {
background-color: #6a994e;
grid-row: 3 / 4;
grid-column: 4 / 5;
}
#image7 {
background-color: #386641;
grid-row: 4 / 5;
grid-column: 3 / 5;
}
#image8 {
background-color: #6a994e;
grid-row: 4 / 5;
grid-column: 2 / 3;
}
#item-8 {
background-color: #6a994e;
grid-row: 2 / 3;
grid-column: 1 / 2;
}
</style>
<div class="angry-grid">
<div id="item-0"> </div>
<div id="item-1"> </div>
<div id="item-2"> </div>
<div id="item-3"> </div>
<div id="item-4"> </div>
<div id="item-5"> </div>
<div id="item-6"> </div>
<div id="item-7"> </div>
<div id="item-8"> </div>
</div>