どうも！LSSです！！
今日はCSSのgridレイアウトを初めてやってみます。
まず、だいぶ手抜きした事例
見栄え
↑こういう、３×３のレイアウトに９つの要素をそのまま配置する例。
コード
<style><!--
.hako{
background-color:lightblue;
border:1px solid black;
text-align:center;
}
#gr0{
display:grid;
grid-template-columns:50px 50px 50px;
grid-template-rows:50px 50px 50px;
}
--></style>
<div id="gr0">
<div id="g1" class="hako">1</div>
<div id="g2" class="hako">2</div>
<div id="g3" class="hako">3</div>
<div id="g4" class="hako">4</div>
<div id="g5" class="hako">5</div>
<div id="g6" class="hako">6</div>
<div id="g7" class="hako">7</div>
<div id="g8" class="hako">8</div>
<div id="g9" class="hako">9</div>
</div>
コード解説
まずHTML部分
まず、下半分の
<div id="gr0">
<div id="g1" class="hako">1</div>
<div id="g2" class="hako">2</div>
<div id="g3" class="hako">3</div>
<div id="g4" class="hako">4</div>
<div id="g5" class="hako">5</div>
<div id="g6" class="hako">6</div>
<div id="g7" class="hako">7</div>
<div id="g8" class="hako">8</div>
<div id="g9" class="hako">9</div>
</div>
の部分。
gr0とidをつけた<div>タグ、の中に９つの<div>タグが入っています。
※gr0というのは任意の名前。好きに変えちゃってOKな部分です。
このgr0を今回は「グリッドコンテナ（gridレイアウトの入れ物）」として使用します。
その中の<div>タグにはg1~g9とidをつけました。（これも任意の名前）
また、それぞれclass="hako"というクラスをつけていますが、これは見ため分かりやすくするために設定したもので、gridレイアウトとは無関係な部分です。
次にCSS部分
<style><!--
.hako{
background-color:lightblue;
border:1px solid black;
text-align:center;
}
#gr0{
display:grid;
grid-template-columns:50px 50px 50px;
grid-template-rows:50px 50px 50px 50px;
}
--></style>
ですが、このうち上半分の
.hako{
background-color:lightblue;
border:1px solid black;
text-align:center;
}
は、 見ため分かりやすくするために書いているだけです。
（背景は薄い青、黒の枠線、文字は中央揃えという指定です）
で、肝心のgridレイアウトに関する設定。
#gr0{
display:grid;
grid-template-columns:50px 50px 50px;
grid-template-rows:50px 50px 50px;
}
の部分ですね。
グリッドコンテナとして使用しているgr0に対して指定する事になります。
display:grid;
↑グリッドコンテナとして表示しますよ。
grid-template-columns:50px 50px 50px;
↑横（columns）は50ピクセル・50ピクセル・50ピクセルに設定（結果、３列である事も暗に示しています）。
grid-template-rows:50px 50px 50px;
↑縦（columns）は50ピクセル・50ピクセル・50ピクセルに設定（結果、３行である事も暗に示しています）。
以上の指定により、「gr0というグリッドコンテナは3×3のgridレイアウトです」という設定が完了しており、それだけでもう、
3×3の中にg1~g9の子要素（グリッドアイテム）を自動的に配置してくれるんですね^^
配置を変にいじってみるテスト
見栄え
「９」だけ一番最初にきて、後は１~８まで１つづつズレて配置されています。
コード
<style><!--
.hako{
background-color:lightblue;
border:1px solid black;
text-align:center;
}
#gr0{
display:grid;
grid-template-columns:50px 50px 50px;
grid-template-rows:50px 50px 50px;
}
#g9{grid-row:1;grid-column:1;}
--></style>
<div id="gr0">
<div id="g1" class="hako">1</div>
<div id="g2" class="hako">2</div>
<div id="g3" class="hako">3</div>
<div id="g4" class="hako">4</div>
<div id="g5" class="hako">5</div>
<div id="g6" class="hako">6</div>
<div id="g7" class="hako">7</div>
<div id="g8" class="hako">8</div>
<div id="g9" class="hako">9</div>
</div>
コード解説
#g9{grid-row:1;grid-column:1;}
の１行だけを追加しました。
これはグリッドアイテム（g1~g9）のうち、
「g9だけを、縦(row)１行め横(column)１列めに持ってくる」
という指定になります。
なるほど、他のg1~g8が自動配置なので、勝手に後に続けてくれているんですね^^
ちょっと注意点
#g9{grid-row:1;grid-column:1;}
を、さらっと
「g9だけを、縦(row)１行め横(column)１列めに持ってくる」
と書きましたが、厳密にいうと次のような概念があります。
gridレイアウトにおいては↑のように「マスとマスの間に仕切り線の概念」があります。
赤い手書きで書いたのがcolumn、緑の手書きで書いたのがrow。
で、
grid-row:1;
という指定は、「縦は緑の１の線（から２の線まで）の範囲」の（）を省略した指定です。
省略せずに指定する場合は、
grid-row:1/2;
のように書きます。
省略した場合は自動的に「次の線までなんだな」と解釈されるわけですね。
columnについても同様です。
はてなブログっぽいレイアウト
見栄え
↑ヘッダー、フッターが上下にあって、サイドバーもある、よく見かけるタイプのレイアウトですね^^
これをgridレイアウトで実現してみます！
コード
<style><!--
.hako{
background-color:lightblue;
border:1px solid black;
text-align:center;
}
#gr0{
display:grid;
grid-template-columns:100px 1fr 100px;
grid-template-rows:50px 300px 50px;
}
#g1{grid-row:1;grid-column:1/4;}
#g2{grid-row:2;grid-column:1;}
#g3{grid-row:2;grid-column:2;}
#g4{grid-row:2;grid-column:3;}
#g5{grid-row:3;grid-column:1/4;}
--></style>
<div id="gr0">
<div id="g1" class="hako">1</div>
<div id="g2" class="hako">2</div>
<div id="g3" class="hako">3</div>
<div id="g4" class="hako">4</div>
<div id="g5" class="hako">5</div>
</div>
↑赤文字部分が修正箇所です。
また、g6~g9を削除しました。
コード解説
grid-template-columns:100px 1fr 100px;
grid-template-rows:50px 300px 50px;
グリッドの枠のサイズ指定そのものを変えてみました。
横の幅については、100px 1fr 100px;で「左右は100ピクセル固定」しておくと、残りの中央は1frで残りの幅を全て割り当ててくれるようですね。
また、2fr 1frのように混在させた場合はうまい事、比率で割り当ててくれます^^
#g1{grid-row:1;grid-column:1/4;}
g1についての位置指定です。
行(row)は1（から2まで）の範囲、列は1~4の線で囲んだ間、という指定。
#g2{grid-row:2;grid-column:1;}
#g3{grid-row:2;grid-column:2;}
#g4{grid-row:2;grid-column:3;}
g2~g4については、２行目の３つのマスをそれぞれ割り当てているだけですね。
#g5{grid-row:3;grid-column:1/4;}
g5はg1と同じように、横は全てのマスをまたいで占有しています。
IEとEdge対策
問題点
gridレイアウトは比較的新しく作られた要素でありながら、たいていのブラウザで対応していますが、「IEとEdge（どちらもMicrosoft製ブラウザ）だけ指定の仕方が違う」ようです。
昔の、IEかネスケかって時代（古！）だと、JavaScriptでブラウザを判定して~みたいな事をしていましたが、今は「CSSにソレ用のコードを追記する」だけで対応できるそうな。
いい時代になりましたねｗ
コード
<style><!--
.hako{
background-color:lightblue;
border:1px solid black;
text-align:center;
}
#gr0{
display: -ms-grid;
display:grid;
-ms-grid-columns:100px 1fr 100px;
grid-template-columns:100px 1fr 100px;
-ms-grid-rows:50px 300px 50px;
grid-template-rows:50px 300px 50px;
}
#g1{
-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:3;
grid-row:1;grid-column:1/4;
}
#g2{
-ms-grid-row:2;-ms-grid-column:1;
grid-row:2;grid-column:1;
}
#g3{
-ms-grid-row:2;-ms-grid-column:2;
grid-row:2;grid-column:2;
}
#g4{
-ms-grid-row:2;-ms-grid-column:3;
grid-row:2;grid-column:3;
}
#g5{
-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:3;
grid-row:3;grid-column:1/4;
}
--></style>
<div id="gr0">
<div id="g1" class="hako">1</div>
<div id="g2" class="hako">2</div>
<div id="g3" class="hako">3</div>
<div id="g4" class="hako">4</div>
<div id="g5" class="hako">5</div>
</div>
↑IE・Edge対策部分を青字にしています。
コード解説
ほぼ、同じ指定を-ms-をつけて繰り返している感じですが、
「複数マスをまたぐ指定」
の時だけ、大きく書き方が違っている点が要注意ぽいですね。
rowとcolumnは開始地点を指定し、
-ms-grid-column-span:3;
で何マス占有するかを指定している、という書き方です。
gridレイアウトの配置方法は他にも違うやり方があります
grid-row:1;grid-column:1/4;
といった指定方法で今回は書いてみましたが、もっと細かい書き方として
grid-row-start:1;grid-row-end:1;grid-column-start:1;grid-column-end:4;
と、いちいち「開始点・終了点をstart・endで指定する」という方法。
または逆に
grid-area:1/1/1/4;
みたいに、rowとcolumnを一気に指定してしまう方法もあります。
grid-areaの場合、1/1/1/4の/で区切った４つの数字は、
「grid-row-start:1;grid-column-start:1;grid-row-end:1;grid-column-end:4;」
を意味します。
複数マスをまたがない場合は
grid-area:1/1;
のように３つめ４つめを省略可です。
が、さらに、そういう何マスめかをいちいち指定するんじゃなくて
grid-template-areas
というのをグリッドコンテナに書く、という全く別の手法もあり、全部覚えようと思ったら大変そう^^;;;;;
とりあえず今回の内容程度でいいかな、って自分は思います^^
gridレイアウトの一般的な意味でのメリットは、「レスポンシブ対応」これに尽きます！
今回、いたずらに「9を最初に配置した」ように、HTMLの書いた順序に関係なく、CSSだけで配置を決める事さえできるので、
「スマホ用とPC用とでレイアウトを指定するCSSを切り替える」だけでレスポンシブが実現しますね^^
…LSSの場合のメリットは「超巨大迷宮を作るのにtableタグの制約から逃れる手段」として興味を持ったのですがｗｗｗ
てなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
