「CSSグリッドIEプレフィックスエディター」の

起動時のCSSグリッドです。こんな形のものがレイアウトコンテナとして作成できるという例示です。
上には聖杯レイアウトを、その下にはカレンダーレイアウトをCSSグリッドだけで作成しています。 CSSグリッドを使うとCSSだけでこのようなレイアウトコンテナを作成することが簡単にできます。 理屈は兎も角として、ちょっと弄ってみましょう。

例えば、最上段のセルの高さを変えてみます。 「 "header header header "100px 」となっているところの100pxを400px（任意の値に）にして、「整形/ IEプレフィック追加」ボタンをクリックします。いかがですか。最上段のセルが4倍の高さになっていることがわかります。 次に、現在、最上段のエリアはひとつですがが、２段目の右のnav を上に伸ばしてみます。１段目の右端のheader をnav に変更してみてください。いかがですか。長方形に変わりましたか。

このように同一文字列はひとつの四角形となりますので、ここに書かれている文字列の組み合わせを任意に変えてみてください。このとき必ず矩形（四角形）になるように指定しなくてはなりません。 次に、右画面下の「プロジェクト選択」と書かれたボックスの数字が現在「１」になっていますが、それを２に変更してください。出てくる画面は二つ目のひな型です。ここでwebページとエディター間の仕切り線をずらしてwebページの幅を小さくしたり大きくしたりしてみてください。レイアウトが変わりレスポンシブルデザインとなっていることが分かります。このようにCSSグリッドの機能でこのようなレスポンシブルのwebページを簡単に作ることができます。

なお、CSSグリッドは各要素を入れるスペースと捉えると、背景色や仕切り線は見えない方が良いのでしょうが、今後の画面においても、CSSがどのように画面上配置されるかを見やすくするために共通項目として

.grid_header,.grid_header2～（セル数に応じて増減）{
border: solid 1px #000000;
}

を記述して枠組みを表示させています。これは

border: solid 1px #000000;

を削除するだけでなくすことができます。また、 複雑なレイアウトコンテナを見やすくするために実際のレイアウトコンテナよりも大きさを小さくしています。