htmlのグリッドで文字列を90度回転させたい

実現したいこと

htmlで「お絵かきロジック」を表示したいと考えています

以下のような表示をしようと考えています

全体をgridスタイルを使って実現しようと考えています。
1行目のcssのスタイルの設定がどうすれば良いかわかりません
1行目のヒントがサンプルのように所定の位置に収まるようにかつ下寄せになって欲しいです。
別にgridスタイル以外でも実現できれば良いです。
ただし、個々のマスをクリックした時に、クリックイベントが発生するような仕組みは実現出来るような方法でお願いします。（マスをクリックすると■→□となるようなイベントを実装するので）

試したこと

css に
transform: rotate(90deg)
を設定したところ、文字列が90度回転することを確認しましたが、位置や寄せが思い通りになりません

実行結果

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Dynamic Random Grid</title>
7    <h1>お絵かきロジック</h1>
8    <div class="grid-container"></div>
9    <style>
10      .grid-container {
11        display: grid;
12        gap: 1px;
13        grid-template-columns: auto repeat(var(--numCols), var(--cellSize));
14        grid-template-rows: auto repeat(var(--numRows), var(--cellSize));
15        width: fit-content;
16        height: fit-content;
17      }
18
19      .v-hint {
20        color: blue;
21        transform: rotate(90deg);  /* テキストを左90度回転 */
22        transform-origin: top; /* 回転の基準点を指定 */
23        white-space: nowrap; /* テキストが折り返されないようにする */
24        border: 1px solid #000;
25        text-align: right; /* 文字列を下寄せする */
26        vertical-align: bottom; /* 文字列を左寄せする */
27        height: fit-content;
28      }
29
30      .h-hint {
31        height: var(--cellSize);
32        color: red;
33        align-items: center;
34        justify-content: center;
35        border: 1px solid #000;
36      }
37
38      .cell {
39        width: var(--cellSize);
40        height: var(--cellSize);
41        display: flex;
42        align-items: center;
43        justify-content: center;
44        border: 1px solid #000;
45      }
46    </style>
47  </head>
48  <body>
49    <script>
50      function generateRandomGrid() {
51        // 行数と列数を動的に変更
52        const numRows = 6;
53        const numCols = 5;
54        const cellSize = '20px';
55        document.documentElement.style.setProperty('--cellSize', cellSize);
56        document.documentElement.style.setProperty('--numCols', numCols - 1);
57        document.documentElement.style.setProperty('--numRows', numRows - 1);
58
59        const gridContainer = document.querySelector('.grid-container');
60        gridContainer.innerHTML = ''; // グリッドをクリア
61
62        for (let row = 0; row < numRows; row++) {
63          for (let col = 0; col < numCols; col++) {
64            const cell = document.createElement('div');
65            if (row === 0 && col === 0) {
66              cell.innerText = col.toString().repeat(col);
67            } else if (row === 0 && col !== 0) {
68              //縦ヒントクラスを適用
69              cell.classList.add('v-hint');
70              cell.innerText = col.toString().repeat(col);
71            } else if (row !== 0 && col === 0) {
72              //横ヒントクラスを適用
73              cell.classList.add('h-hint');
74              cell.innerText = row.toString().repeat(row);
75            } else {
76              cell.classList.add('cell');
77              cell.innerText = '■';
78            }
79            gridContainer.appendChild(cell);
80          }
81        }
82      }
83
84      // 初回のグリッド生成
85      generateRandomGrid();
86    </script>
87  </body>
88</html>

行動規範の内容に同意します

回答1件

ベストアンサー

transform はフローからはみ出してしまうので、writing-mode を使いましょう。

css
1.v-hint {
2  color: blue;
3  writing-mode: vertical-rl;
4  white-space: nowrap; /* テキストが折り返されないようにする */
5  border: 1px solid #000;
6  text-align: right; /* 文字列を下寄せする */
7  line-height: 1;
8}