<!doctype html>
<title>Example</title>
<style>
#grid {
display: grid;
grid-template-rows: 50vh repeat(4, 1fr);
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
height: 100vh;
margin: 0;
}
#grid > div {
color: white;
font-size: 4vw;
padding: 10px;
background: gold;
#grid > div:nth-child(1) {
grid-column: span 4;
#grid > div:nth-child(2) {
grid-row: span 4;
#grid > div:nth-child(4) {
grid-row: span 2;
#grid > div:nth-child(5) {
grid-row: span 3;
#grid > div:nth-child(6) {
</style>
<body id="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
</body>