CSS グリッドレイアウトは、行と列で要素を配置することのできるCSSを使った2次元レイアウトです。 1つのページを領域毎に分割したり、サイズや位置、レイヤーの関係性を定義することができ、CSSグリッドを使うことによって、多くのレイアウトを表現することができます。テーブル組みと同じように、列と行を揃えて要素を記述することができますが、グリッドレイアウトは内容の構造を持っていないため、テーブル組みでは不可能であった幅広い種類のレイアウトが可能となります。

今までwebページを作るのに、個々の要素の配置はfloat等を使い調整しても、なかなか思うところに配置ができずに苦労することが多かったと思います。しかしこのCSS グリッドを使うことで、配置は自由自在になるのです。

CSSグリッドの基本
webページをレイアウトするときには、「どの位置に何を配置させて」ということを考えると思います。この要素は右上に、これを真ん中にといったようにです。それでは右はどこを指すのか、真ん中の位置はどこなのかが決まっていなくてはなりません。そこで出てくるのが次の図のような碁盤の目、つまりグリッドです。四角形の集合体です。 このグリッドをCSSで作成し、各セルを指定して使うのがCSSグリッドですが記述はとても簡単です。

ここでは本ソフト「CSSグリッドIEプレフィックスエディター」を使う上で必要となる部分だけの確認になります。詳細を知りたい方は、今は、色んなサイトで説明されていますのでそちらを参考にしてください。

CSSグリッドは先ず、親要素に「display: grid」を指定します。この親要素のことを「グリッドコンテナ」と言い、グリッドコンテナの中にある子要素のことを「グリッドエリア」と言います。本ソフトではcontainer 自動で割り付けられています。

次に、列の個数と行の個数、各セルの大きさを決めます。　 例えば、３列、３行のグリッドで各セルの大きさが100pxであれば次のように記述します。 横の定義はgrid-template-columnsに値を書きます。
grid-template-columns: 100px 100px 100px;
横の定義はgrid-template-rowsに値を書きます。
grid-template-rows: 100px 100px 100px;

これで３列、３行のグリッドが出来上がりました。後はCSSのセレクターでグリッド内のセルを指定します。その指定は、各セルの仕切り線の番号を使う、セルの個数が何個目か数える、セルに名前を付けてその名前で指定する、という３つの方法があります。CSSグリッドを説明する殆どのサイトでは、前２者の説明が冒頭にありますが、一番、直感的に配置ができるのは、名前での指定です。例えば、areaAといった名前を付けてその場所を作成して、CSSセレクタの内容でareaAを指定するといった方法です。grid-templateで付けた名前で指定することができるのです。

セルの命名は次のように書きます。
grid-template:
　　　　"areaA areaB areaC"
　　　　"areaD areaE areaF"
　　　　"areaG areaH areaI";

セルの指定は
grid-area: areaA;
のように書きます。

このように書いたときは、grid-template-columnsとgrid-template-rowsでのグリッドの定義が必要となりますが、これはgrid-templateを使うことによって縦横も一度に指定することができます。
grid-template:
　　　　"areaA areaA areaA " 100px
　　　　"areaD areaE areaF" 100px
　　　　"areaG areaH areaI" 100px
　　　　 / 200px 200px 200px;
このように記述します。

同じ文字列は同じエリアとなります。
"areaA areaA areaA " 100px
"areaD areaE areaF" 100px
" areaD areaE areaF " 100px
/ 200px 200px 200px;
例えば上では、最上段がareaAが３つ並んでいますので、縦線のない横一列、２段目以降は列には同じ名前が書いています。これで縦長のセルとなります。下図のようになります。このようにセルの結合を変えたいときは文字列を同一にして行きます。注意しなくてはならないのは、L字型や飛び飛びには指定は出来ないということです。結合されるセ ルは必ず四角形となっていなくてはなりません。

その他に
grid-column: 2 / 4;
これは横２つ目のセルから３つ目のセルを指定しています。
grid-row: 2 / 4;
これは縦２つ目のセルから３つ目のセルを指定しています。
このようにセルを特定してCSSに記述して用います。他の要素をセレクタ内に併せて記述することで多彩なレイアウトを可能とします。
ひとつひとつのマス目をセルと呼びます。そのセルに名前を付けて行き、配置する場所を特定します

当サイトではこのCSS グリッドを紹介しています。このページはCSS Gridの定義や「CSSグリッドIEプレフィックスエディター」 ソフトを使うとどのように学習できるか、ソフトを使うことの利点などを解説しています。 文章ばかりですのでイメージがわかないかも知れません。一読後に実際に作成してみてください。

CSSグリッドを分かりにくくしている点はショートハンドが多いということです。ひとつの目的に複数の記述方法があるということです。例えばセルの指定でgrid-row-startやgrid-rowがあったり、grid-template-rows・grid-template-columns・grid-template-areasはgrid-templateで表記できたりです。より簡便に記述ができるのは良いことなのかも知れませんが、解説サイト毎に好みがあり、同じことをするのに使われるプロパティが異なっています。そこで、本サイトでは最も簡便に記述できることを念頭とした記述方法とすることとしました。