前項で見たCSSグリッドを実際に作ってみましょう。はじめに見たように、僅か５クリックで基本レイアウトは作成できますが、ここではもう少し本格的に作成してみることとします。

まず、空のプロジェクトを指定し、グリッドコンテナを作成します。空のプロジェクトの指定方法はホームで確認してください。 マス目の縦、横の個数を決めます。CSSグリッドはマス目を作成してそれぞれのセルを結合してレイアウトを決めるものですので、マス目をどのように作成するかが重要なポイントとなります。自分が作りたいwebページのレイアウトを良く考えて、マス目の個数、その結合状況を決めます。

レイアウトの作成は右ボタンクリックの「レイアウト作成」から行います。 縦横のマス目の個数を個別に入力してから「任意グリッド作成」ボタン又は「聖杯グリッド作成」をクリックしてください。クリック後は、セルに対応したgrid-area: area;が作成されるとともに、HTML文も作成され、指定した縦横の列、行ができて、右側に作成したCSSグリッドが表示されます。

このとき、各セルは縦横で指定した数だけできていて、それぞれitem1～のように書かれていますので、これらの部分を自分の作成するレイアウトに合わせて変更してください。同じエリアにしたい部分を同じ名前にして「整形/IEプレフィックス追加」をクリックするだけです。 なお、作成されるCSSグリッドのセレクターはコンテナとなる部分はcontainer と、各アイテムとなる部分は「grid_エリア名」となります。