Q98408 の回答（Grid Layout）

HTMLとCSSは、こんな感じ。
記述量は多いけど、保守性は格段にこちらの方が上。
クラス名は、左上の位置を末尾につけている。

<style>
.grid-wrapper {
    display: grid;
    grid-template-rows: 4em 4em 4em 4em 4em 4em 4em;
    grid-template-columns:  14.3% 14.3% 14.3% 14.3% 14.3% 14.3% 14.3%;
    width: 70%;
    border: 1px solid black;
}
.grid-wrapper .grid-item {
    border: 2px solid black;
}
.grid-wrapper .item-11 {
    grid-row: 1;
    grid-column: 1 / 3;
}
.grid-wrapper .item-13 {
    grid-row: 1;
    grid-column: 3;
}
.grid-wrapper .item-14 {
    grid-row: 1;
    grid-column: 4;
}
.grid-wrapper .item-15 {
    grid-row: 1;
    grid-column: 5 / 7;
}
.grid-wrapper .item-17 {
    grid-row: 1 / 3;
    grid-column: 7;
}
.grid-wrapper .item-21 {
    grid-row: 2 / 4;
    grid-column: 1;
}
.grid-wrapper .item-22 {
    grid-row: 2 / 4;
    grid-column: 2;
}
.grid-wrapper .item-23 {
    grid-row: 2;
    grid-column: 3;
}
.grid-wrapper .item-24 {
    grid-row: 2;
    grid-column: 4;
}
.grid-wrapper .item-25 {
    grid-row: 2;
    grid-column: 5;
}
.grid-wrapper .item-26 {
    grid-row: 2 / 4;
    grid-column: 6;
}
.grid-wrapper .item-33 {
    grid-row: 3;
    grid-column: 3;
}
.grid-wrapper .item-34 {
    grid-row: 3;
    grid-column: 4;
}
.grid-wrapper .item-35 {
    grid-row: 3;
    grid-column: 5;
}
.grid-wrapper .item-37 {
    grid-row: 3 / 6;
    grid-column: 7;
}
.grid-wrapper .item-41 {
    grid-row: 4 / 7;
    grid-column: 1 / 3;
}
.grid-wrapper .item-43 {
    grid-row: 4;
    grid-column: 3;
}
.grid-wrapper .item-44 {
    grid-row: 4 / 6;
    grid-column: 4;
}
.grid-wrapper .item-45 {
    grid-row: 4 / 6;
    grid-column: 5;
}
.grid-wrapper .item-46 {
    grid-row: 4 / 6;
    grid-column: 6;
}
.grid-wrapper .item-53 {
    grid-row: 5 / 7;
    grid-column: 3;
}
.grid-wrapper .item-64 {
    grid-row: 6;
    grid-column: 4 / 6;
}
.grid-wrapper .item-66 {
    grid-row: 6 / 8;
    grid-column: 6 / 8;
}
.grid-wrapper .item-71 {
    grid-row: 7;
    grid-column: 1 / 3;
}
.grid-wrapper .item-73 {
    grid-row: 7;
    grid-column: 3 / 6;
}
</style>
<div class="grid-wrapper">
    <div class="grid-item item-11"></div>
    <div class="grid-item item-13"></div>
    <div class="grid-item item-14"></div>
    <div class="grid-item item-15"></div>
    <div class="grid-item item-17"></div>
    <div class="grid-item item-21"></div>
    <div class="grid-item item-22"></div>
    <div class="grid-item item-23"></div>
    <div class="grid-item item-24"></div>
    <div class="grid-item item-25"></div>
    <div class="grid-item item-26"></div>
    <div class="grid-item item-33"></div>
    <div class="grid-item item-34"></div>
    <div class="grid-item item-35"></div>
    <div class="grid-item item-37"></div>
    <div class="grid-item item-41"></div>
    <div class="grid-item item-43"></div>
    <div class="grid-item item-44"></div>
    <div class="grid-item item-45"></div>
    <div class="grid-item item-46"></div>
    <div class="grid-item item-53"></div>
    <div class="grid-item item-64"></div>
    <div class="grid-item item-66"></div>
    <div class="grid-item item-71"></div>
    <div class="grid-item item-73"></div>
</div>