なぜ grid-template-areas でルールに従っていない部分があると BOX の領域外に出るのですか?

grid-template-areas 自体が「無効」になってしまうからです。
2022年2月3日
ユーザー

https://dotinstall.com/questions/wdo4l3p
の質問が上手く理解できません。

他の質問の中で、

grid-area で指定したアルファベットが grid-template-areas の中に 存在していないために
グリッド領域の外に配置される。

ということは理解できました。

今回の例では
r の領域が L 字になっているためうまく配置できないということは理解できましたが、
なぜグリッド領域が破損し、全ての BOX が領域外に配置されるのでしょうか?

勉強不足で申し訳ありませんが、ご教授ください。

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?