De startpagina heet My music.htm (en is gemaakt in Notepad++):

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin: 0;
      padding: 0;
    }

    .image-grid img {
   width: 100%;
      height: 100%;
      display: block;
    }

    body {
      margin: 0;
    }
  </style>
</head>
<body>

<div class="image-grid">
<a href="file:///C:/Music/Xtra/1-60.htm"><img src="file:///C:/Music/Xtra/Drawer.jpg" ></a>
<a href="file:///C:/Music/Xtra/61-120.htm"><img src="file:///C:/Music/Xtra/Drawer.jpg" ></a>
<a href="file:///C:/Music/Xtra/121-180.htm"><img src="file:///C:/Music/Xtra/Drawer.jpg" ></a>
</div>

</body>
</html>


De eerste cassettelade, document 1-60.htm: 

<!DOCTYPE html>
<html>
<head>
  <style>
    .image-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 0;
      margin: 0;
      padding: 0;
    }

    .image-grid img {
   width: 100%;
      height: 100%;
      display: block;
    }

    body {
      margin: 0;
    }
  </style>
</head>
<body>
<div class="image-grid">
<div class="image-grid">
  <a href="file:///C:/Music/1-50/1"><img src="file:///C:/Music/1-50/1/folder.jpg"</a>
  <a href="file:///C:/Music/1-50/21"><img src="file:///C:/Music/1-50/21/folder.jpg"</a>
  <a href="file:///C:/Music/1-50/41"><img src="file:///C:/Music/1-50/41/folder.jpg"</a>

<a href="file:///C:/Music/1-50/2"><img src="file:///C:/Music/1-50/2/folder.jpg"></a>
<a href="file:///C:/Music/1-50/22"><img src="file:///C:/Music/1-50/22/folder.jpg"></a>
<a href="file:///C:/Music/1-50/42"><img src="file:///C:/Music/1-50/42/folder.jpg"></a>

</div>

</body>
</html>

In de latere "lades", die alleen digitaal bestaan, toon ik vijf (CD-)plaatjes naast elkaar in plaats van drie. De regel
grid-template-columns: repeat(3, 1fr);
is in die HTML-bestanden vervangen door
grid-template-columns: repeat(5, 1fr);