グリッド テンプレート領域を使用してグリッドを表示できないのはなぜですか?

Question

グリッド テンプレート エリアを使用して要素の配置を実現しようとしていますが、機能しません。グリッドシステムを使用してブロックを垂直方向と水平方向に配置しようとしています。左側に画像を使用し、反対側にテキストを使用します。このコードが機能しないのはなぜですか?

リーリー リーリー

https://codesandbox.io/s/blissful-bush-tngxm8?file=/src/styles.css

Answer 1

grid-template-areas を使用する場合は、グリッド内の要素に grid-area 値を割り当てる必要があります。
つまり、次の css コードを追加すると、望ましい結果が得られます:

リーリー