console
<div id="ruler"></div>
<div id="grid-container">
<div class="cell-1"></div>
<div class="cell-2"></div>
</div>
*{margin:0; padding:0;}
body{ margin:40px;}
#ruler{
position: absolute;
top: 0;
left: 0;
width:580px;
height:580px;
background-image: url(https://codingstartup.com/assets/grid/grid-ruler.png);
background-size: 580px 580px;
}
#grid-container{
display:grid;
width: 500px;
height: 500px;
background: #eee;
}
#grid-container{
grid-template-rows: 100px 100px 100px 100px 100px;
grid-template-columns: 100px 100px 100px 100px 100px;
}
.cell-1{ background: yellow;}
.cell-2{ background: blue;}
.cell-1{
grid-row: 1/2;
grid-column: 1/4;
grid-area: 2/2/4/4;
grid-row: 1 / span 2;
grid-column: 2 / span 3;
}
.cell-2{
grid-row: 4/6;
grid-column: 1/3;
}