grid-template-areas（grid-template）について
grid-template-areasは文字列でレイアウトを表すことができ強力で使い勝手がとても良いものです。これを使うことで、セルの設定がビジュアルに可能となり、grid-template-areasで指定した名前を要素に記述するだけで良くなり、各要素でいちいちgrid-row: 2 / 3;　grid-column: 2 / 4; などと範囲を指定する必要がなくなります。このようにとても便利な記述方法ですが、残念ながらIEでは使うことができません。しかし、このプロパティはエリアを指定するためのものですので、本ソフトでは-ms-grid-rowや-ms-grid-columnなどに変換して記述できるようにしています。当初、ベンダープレフィックスに存在しないため念頭になかったのですが、CSSグリッドを使うにつれて、この便利さを実感しましたので、実装することとしました。慣れさえすれば、エリアの名前と各トラックの大きさが視覚的に分かり、非常に見やすいプロパティの指定方法となります。本ソフトの特徴のひとつです。記述は エリア指定のみの場合は

#container {
grid-template-areas:
　　　"title title title "
　　　"nav main ad "<
br> 　　　"nav main side "
　　　"footer footer footer";
}
エリアと幅・高さを指定する場合
#container {
　　　grid-template:
　　　"areaA areaB areaC" 100px
　　　 "areaD areaE areaF" 100px
　　　 / 200px 200px 200px;
}
のように記述します。grid-templateはgrid-template-areasのショートハンドですが、本来の仕様にないものを適用させている関係でいくつかの注意があります。 本ソフトでは、grid-template-areasは単にエリアに名前を付ける場合に、grid-templateは名前とセルの大きさを指定する場合にと、それぞれ異なる役割としていることに注意をしてください。逆は書けません。また、grid-template:、grid-template-areas:ともに一行では書かずに、必ず改行してください。

この記述を考えた人は天才です。CSSの何が一番素晴らしいかと言えば、このgrid-templateによりアスキーアートで各エリア、列幅、行幅を定義できることです。 最初はこれを見ても分からないかも知れませんが、これは今までのCSSやプログラムのように記述を見るのではなく記述されているレイアウト、文字の並びを見るのです。レイアウトはこの文字の見え方のとおりとなります。

grid-template-columnsやgrid-template-rowsを記述する必要はなく、まさに感覚的、視覚的にセルを指定できるのです。なんと素晴らしいことでしょうか。私は、CSSグリッドを極めたいと思っている人は別として、簡単にCSSグリッドを導入したいと考える人にとっては、display: grid 、grid-templateとgrid-area　 の３つだけを覚えれば良いと思っています。