Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<style>
body { margin: 0px; }
.container {
display: grid;
grid-template: repeat(4, 100px) / repeat(4, 100px);
gap: 20px;
padding: 10px;
position: relative;
}
.item {
background: rgba(192 192 192 / 0.75);
}
.col-rule {
position: absolute;
width: 0px;
border-left: 6px solid rgba(128 0 0 / 0.5);
}
.row-rule {
position: absolute;
height: 0px;
border-top: 6px solid rgba(0 0 128 / 0.5);
}
</style>
<div class="container">
<div class="item" style="grid-area: 1/1/4/2">L</div>
<div class="item" style="grid-area: 1/4/4/5">R</div>
<div class="item" style="grid-area: 1/2/2/3">A</div>
<div class="item" style="grid-area: 1/3/2/4">B</div>
<div class="item" style="grid-area: 3/2/4/3">C</div>
<div class="item" style="grid-area: 3/3/4/4">D</div>
<div class="item" style="grid-area: 4/2/5/3">E</div>
<div class="col-rule" style="left: 117px; top: 5px; height: 110px;"></div>
<div class="col-rule" style="left: 117px; top: 245px; height: 118px;"></div>
<div class="col-rule" style="left: 237px; top: 5px; height: 110px;"></div>
<div class="col-rule" style="left: 237px; top: 245px; height: 118px;"></div>
<div class="col-rule" style="left: 357px; top: 5px; height: 110px;"></div>
<div class="col-rule" style="left: 357px; top: 245px; height: 110px;"></div>
<div class="row-rule" style="left: 117px; top: 357px; width: 126px;"></div>
</div>