【競馬】5代血統表をtableでなくCSS gridで作成する

<table>
<tr><td rowspan="16">父</td><td rowspan="8">父父</td><td rowspan="4">父父父</td><td rowspan="2">父父父父</td><td>父父父父父</td></tr>
<tr><td>父父父父母</td></tr>
<tr><td rowspan="2">父父父母</td><td>父父父母父</td></tr>
<tr><td>父父父母母</td></tr>
<tr><td rowspan="4">父父母</td><td rowspan="2">父父母父</td><td>父父母父父</td></tr>
<tr><td>父父母父母</td></tr>
<tr><td rowspan="2">父父母母</td><td>父父母母父</td></tr>
<tr><td>父父母母母</td></tr>
<tr><td rowspan="8">父母</td><td rowspan="4">父母父</td><td rowspan="2">父母父父</td><td>父母父父父</td></tr>
<tr><td>父母父父母</td></tr>
<tr><td rowspan="2">父母父母</td><td>父母父母父</td></tr>
<tr><td>父母父母母</td></tr>
<tr><td rowspan="4">父母母</td><td rowspan="2">父母母父</td><td>父母母父父</td></tr>
<tr><td>父母母父母</td></tr>
<tr><td rowspan="2">父母母母</td><td>父母母母父</td></tr>
<tr><td>父母母母母</td></tr>
<tr><td rowspan="16">母</td><td rowspan="8">母父</td><td rowspan="4">母父父</td><td rowspan="2">母父父父</td><td>母父父父父</td></tr>
<tr><td>母父父父母</td></tr>
<tr><td rowspan="2">母父父母</td><td>母父父母父</td></tr>
<tr><td>母父父母母</td></tr>
<tr><td rowspan="4">母父母</td><td rowspan="2">母父母父</td><td>母父母父父</td></tr>
<tr><td>母父母父母</td></tr>
<tr><td rowspan="2">母父母母</td><td>母父母母父</td></tr>
<tr><td>母父母母母</td></tr>
<tr><td rowspan="8">母母</td><td rowspan="4">母母父</td><td rowspan="2">母母父父</td><td>母母父父父</td></tr>
<tr><td>母母父父母</td></tr>
<tr><td rowspan="2">母母父母</td><td>母母父母父</td></tr>
<tr><td>母母父母母</td></tr>
<tr><td rowspan="4">母母母</td><td rowspan="2">母母母父</td><td>母母母父父</td></tr>
<tr><td>母母母父母</td></tr>
<tr><td rowspan="2">母母母母</td><td>母母母母父</td></tr>
<tr><td>母母母母母</td></tr>
</table>

<ul class="godai_blood_table">
<li>父</li>
<li>母</li>
<li>父父</li>
<li>父母</li>
<li>母父</li>
<li>母母</li>
<li>父父父</li>
<li>父父母</li>
<li>父母父</li>
<li>父母母</li>
<li>母父父</li>
<li>母父母</li>
<li>母母父</li>
<li>母母母</li>
<li>父父父父</li>
<li>父父父母</li>
<li>父父母父</li>
<li>父父母母</li>
<li>父母父父</li>
<li>父母父母</li>
<li>父母母父</li>
<li>父母母母</li>
<li>母父父父</li>
<li>母父父母</li>
<li>母父母父</li>
<li>母父母母</li>
<li>母母父父</li>
<li>母母父母</li>
<li>母母母父</li>
<li>母母母母</li>
<li>父父父父父</li>
<li>父父父父母</li>
<li>父父父母父</li>
<li>父父父母母</li>
<li>父父母父父</li>
<li>父父母父母</li>
<li>父父母母父</li>
<li>父父母母母</li>
<li>父母父父父</li>
<li>父母父父母</li>
<li>父母父母父</li>
<li>父母父母母</li>
<li>父母母父父</li>
<li>父母母父母</li>
<li>父母母母父</li>
<li>父母母母母</li>
<li>母父父父父</li>
<li>母父父父母</li>
<li>母父父母父</li>
<li>母父父母母</li>
<li>母父母父父</li>
<li>母父母父母</li>
<li>母父母母父</li>
<li>母父母母母</li>
<li>母母父父父</li>
<li>母母父父母</li>
<li>母母父母父</li>
<li>母母父母母</li>
<li>母母母父父</li>
<li>母母母父母</li>
<li>母母母母父</li>
<li>母母母母母</li>
</ul>

.godai_blood_table{
display:grid; //CSS gridを適用
list-style-type:none; //ulタグのデフォルトである項目の横の"・"をクリア
grid-auto-flow:column; //グリッドを縦方向に埋めていく指定
grid-template-rows:repeat(32,auto); //最大32行のグリッド
}
 
.godai_blood_table li{
border: 1px solid #333; //各セルを囲むボーダー指定　※ここはお好みで
margin: 0.2em; //各セル間のマージン指定　※ここはお好みで
}
 
.godai_blood_table li:nth-child(-n+2){
grid-row: span 16; //子要素2番目までは16行分の大きさ
}
 
.godai_blood_table li:nth-child(n+3):nth-child(-n+6){
grid-row: span 8; //子要素3〜6番目までは8行分の大きさ
}
 
.godai_blood_table li:nth-child(n+7):nth-child(-n+14){
grid-row: span 4; //子要素7〜14番目までは4行分の大きさ
}
 
.godai_blood_table li:nth-child(n+15):nth-child(-n+30){
grid-row: span 2; //子要素15〜30番目までは2行分の大きさ
}
 
.godai_blood_table li:nth-child(odd){
background-color: #e6e6fa; //奇数番目の子要素（＝牡馬）の色を水色に
}
 
.godai_blood_table li:nth-child(even){
background-color: #ffe4e1; //偶数番目の子要素（＝牝馬）の色をピンク色に
}