Grid Layoutの中に更にGrid Layout

 

前回、前々回 CSS Grid Layoutを簡単に作れるツール「Layoutit!」を使って上記のようなサイトを作りました。

CSS Grid Layout を簡単に作れるツール

前回

CSS Grid Layout を簡単に作れるツール 2

前々回

今回はこの中に更にGrid Layoutを作る方法です。
最初からレイアウトが決まっていて1回で済む時もあれば途中で”このエリアを更に細かくしたい(この中に作りたい)”と思う時もあるのではないでしょうか。

 

 Layoutit! で、

 

前回までに作っていたimage2の中に作ります。image2にマウスを持って行くと青の中に四角のマーク(Add subgrid)が出ますのでクリックします。

 

画面左、水色の「.container」の下にピンク「.image2」が出来ました。

 

画面右に表示されるCSSコードを見ると「.image2」の中にデフォルトのコード(1fr 1fr 1fr など)が表示されました。

 

columnやrowのサイズを好みに変更して3×3のマス目の真ん中だけ「image2-1」と言うクラス名を付けました。

 

ここからは今生成された必要なコードだけコピーして自分が作っているサイトのテキストエディタにペーストします。まずはHTMLです。Layoutit! (上)を見ると<div class="image2-1"></div>が今出来た必要なコードですので(これは部分的なコピーが出来ませんでしたので)同じようにテキストエディタVSCodeに書きます。

この時、構造に注意してください。<div class="image2">〜</div>の中に入っています。

 

 

<div class="image2">〜</div>の中に書かないと、

 

後でこんな事になってしまいます。

 

マス目のイラストと同じ構造に、と言う事です◎

 

 

続いてCSSです。1と2が今回生成されたコードですのでこれをコピー(HTMLと違ってCSSは部分的にもコピー出来ました)して、

 

VSCodeのCSSファイルの同じ位置にペーストします。2は加えて背景色(background-color)を黄色に設定しました。HTML、CSS両方済んだので保存して、

 

表示してみます。Layoutit!でデザインした通りになりました。

 

Chromeの検証モードでマス目を表示してみます。これは前回、前々回で作ったGrid Layoutで、

 

これはimage2の中に今回作った Grid Layoutです。

 

両方表示するとこんな感じです。