This CSS grid generator might be useful:
https://cssgrid-generator.netlify.com/
It looks like the output was sass. I converted it to CSS and made a small HTML page to test the output.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Grid</title>
<style>
.parent {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
}
.div1 { background-color: green; grid-area: 1 / 1 / 4 / 3; }
.div2 { background-color: blue; grid-area: 1 / 3 / 2 / 4; }
.div3 { background-color: yellow; grid-area: 1 / 4 / 3 / 4; }
.div4 { background-color: gray; grid-area: 2 / 3 / 3 / 4; }
.div5 { background-color: lightblue; grid-area: 3 / 3 / 4 / 5; }
.div6 { background-color: teal; grid-area: 4 / 1 / 6 / 4; }
.div7 { background-color: purple; grid-area: 5 / 4 / 6 / 5; }
.div8 { background-color: orange; grid-area: 4 / 4 / 5 / 5; }
</style>
</head>
<body>
<div class="parent">
<div class="div2">2</div>
<div class="div1">1</div>
<div class="div3">3</div>
<div class="div4">4</div>
<div class="div5">5</div>
<div class="div6">6</div>
<div class="div7">7</div>
<div class="div8">8</div>
</div>
</body>
</html>