【シンプルな記述でOK！】Grid Layoutを練習してみた

はじめに

Grid Layout（グリッドレイアウト）は、格子状のマス目をベースにhtmlとcssで組むレイアウトです。
cssのみで自由度の高いより複雑なレイアウトが実現できます！

Flexとの違いって？

基本形の通りGridは要素を横並びにレイアウトできるので、パッと見はGridより先に登場したFlexBoxと似ていますが、両者には決定的な違いがあります。

Flexが1次元レイアウトなのに対し、Gridは2次元レイアウトな点です。
言葉だけだと分かりづらいので図解します。

Flexのおさらい

Flexといえば、display:flex;だけで横並びレイアウトを実現できちゃう優れもの。
しかし、要素は横方向（flex-direction:column;を指定すると縦方向）にしか並べられず、並ぶ順番も一方向で固定です。

Gridはここが違う

一方Gridは、縦横自由にレイアウトを組むことができます。
例えば先ほどと同じhtml構造のままで、このようなレイアウトをcssだけで組むことができます。
ここがGrid最大の強みです！

使い方

1.まずは基本！

それでは、複数のアイテムを簡単なGridレイアウトで組んでみましょう。
そこまで難しくないので、「flexしかやったことないよー」という人でも大丈夫です！

STEP1　簡単なhtmlを用意する

divタグなどで、数個の子要素を親要素で囲む至ってシンプルなhtmlで大丈夫です。
（テキストが虫の名前になっているのは筆者の趣味なので気になさらず、、笑）

index01.html

            <div class="grid-bg">
                <div class="grid-box grid01">
                    <div class="grid-content grid01-header">
                        <h3>ナナホシテントウ</h3>
                        <p>幅：100%<br>高さ：80px</p>
                    </div>
                    <div class="grid-content grid01-main">
                        <h3>コガネグモ</h3>
                        <p>幅：auto<br>高さ：auto</p>
                    </div>
                    <div class="grid-content grid01-sidebar">
                        <h3>センチコガネ</h3>
                        <p>幅：200px<br>高さ：auto</p>
                    </div>
                    <div class="grid-content grid01-footer">
                        <h3>ルリボシカミキリ</h3>
                        <p>幅：100%<br>高さ：80px</p>
                    </div>
                </div>
            </div>

STEP2　親要素に「display:grid;」を指定

今回の例で言うと「grid-box」のクラスがついたdivタグに指定します。

style.css

/*アイテムの背景色などのcssは省略*/
.grid-bg .grid-box{display:grid;}

STEP3　幅と高さを指定する

縦方向と横方向のサイズを指定して、グリッドを実装します。
grid-template-rows：横方向のサイズを指定
grid-template-columns：縦方向のサイズを指定

style.css

/*アイテムの背景色などのcssは省略*/
.grid-bg .grid-box{display:grid;}

.grid-bg .grid01{
    padding:5px;
    box-sizing: border-box;
    grid-template-rows:80px auto 100px; /*横方向のサイズ*/
    grid-template-columns:auto 200px; /*縦方向のサイズ*/
}

STEP4　アイテムごとに配置や範囲を指定

STEP4での指定方法は2パターンあるので、どちらも覚えておくと便利そうですね。
パターン1
grid-row、grid-columnで指定

style.css

.grid-bg .grid01{
    padding:5px;
    box-sizing: border-box;
    grid-template-rows:80px auto 100px; /*横方向のサイズ*/
    grid-template-columns:auto 200px; /*縦方向のサイズ*/
}
.grid-bg .grid01 .grid01-header{
    grid-row:1/2;/*○番目の横線〜横線までを指定*/
    grid-column:1/3;/*○番目の縦線〜縦線までを指定*/
}
.grid-bg .grid01 .grid01-main{
    grid-row:2/3;
    grid-column:1/2;
}
.grid-bg .grid01 .grid01-sidebar{
    grid-row:2/3;
    grid-column:2/3;
}
.grid-bg .grid01 .grid01-footer{
    grid-row:3/4;
    grid-column:1/3;
}

パターン2
grid-template-areasで指定
→grid-areaで子要素を配置

style.css

.grid-bg .grid01{
    padding:5px;
    box-sizing: border-box;
    grid-template-rows:80px auto 100px; /*横方向のサイズ*/
    grid-template-columns:auto 200px; /*縦方向のサイズ*/

    /*gridを設定している親要素に追加*/
    grid-template-areas:
    "header01 header01"
    "main01 sidebar01"
    "footer01 footer01"
    ;
}
    .grid-bg .grid01 .grid01-header{grid-area:header01;}
    .grid-bg .grid01 .grid01-main{grid-area:main01;}
    .grid-bg .grid01 .grid01-sidebar{grid-area:sidebar01;}
    .grid-bg .grid01 .grid01-footer{grid-area:footer01;}

+α　アイテム同士を少し空ける

「gap」プロパティでアイテムの間にマージンを設けて見た目を調整することも可能です！

style.css

.grid-bg .grid01{
    padding:5px;
    box-sizing: border-box;
    grid-template-rows:80px auto 100px; /*横方向のサイズ*/
    grid-template-columns:auto 200px; /*縦方向のサイズ*/

    /*アイテム同士のマージン　必須ではありません！*/
    gap:10px; 
}

完成形1

2.cssだけでレイアウト変更

STEP3、4の配置や数値を組み替えれば、cssだけでレイアウトをいじることもできます。完成形1、2は両方ともhtmlは全く同じです！

style2.css

.grid-bg .grid01-2{
    padding:5px;
    box-sizing: border-box;
    gap:10px;
    grid-template-rows:300px auto;
    grid-template-columns:160px 100px auto;
    grid-template-areas:
    "main01-2 footer01-2 footer01-2"
    "sidebar01-2 sidebar01-2 header01-2"
    ;
}
.grid-bg .grid01-2 .grid01-2-header{grid-area:header01-2;}
.grid-bg .grid01-2 .grid01-2-main{grid-area:main01-2;}
.grid-bg .grid01-2 .grid01-2-sidebar{grid-area:sidebar01-2;}
.grid-bg .grid01-2 .grid01-2-footer{grid-area:footer01-2;}

完成形2

応用編

3.ちょっと遊んでみた

某落ち物パズルゲームのアイテムみたいな形も、グリッドなら簡単に実現できます。

index3.html

                <div class="grid-box grid02">
                    <!--コンテナを描く順番はバラバラでも大丈夫！（例えば、footerを最初に書いてもOK）-->
                    <div class="grid-content grid02-header">
                        <h3>オレンジ</h3>
                        <p>幅：100%<br>高さ：80px</p>
                    </div>
                    <div class="grid-content grid02-main">
                        <h3>バナナ</h3>
                        <p>幅：100% - 200px<br>高さ：auto</p>
                    </div>
                    <div class="grid-content grid02-sidebar">
                        <h3>イチゴ</h3>
                        <p>幅：200px<br>高さ：auto</p>
                    </div>
                    <div class="grid-content grid02-footer">
                        <h3>ブルーベリー</h3>
                        <p>幅：150px<br>高さ：auto</p>
                    </div>
                    <div class="grid-content grid02-sub01">
                        <h3>ライム</h3>
                        <p>幅：auto<br>高さ：auto</p>
                    </div>
                    <div class="grid-content grid02-sub02">
                        <h3>ブドウ</h3>
                        <p>幅：100%<br>高さ：100px</p>
                    </div>
                    <div class="grid-content grid02-sub03">
                        <h3>プルーン</h3>
                        <p>幅：120px<br>高さ：auto</p>
                    </div>
                </div>

style3.css

.grid-bg .grid02{
    padding:5px;
    box-sizing: border-box;
    gap:10px;
    grid-template-rows:90px auto auto 110px;/*横方向のサイズ*/
    grid-template-columns:160px auto 130px 210px;/*縦方向のサイズ*/
    /*グリッドのエリアを視覚的に指定*/
    grid-template-areas:
    "header02 header02 header02 header02"
    "main02 main02 main02 sidebar02"
    "footer02 sub-con01 sub-con03 sidebar02"
    "footer02 sub-con02 sub-con02 sidebar02"
    ;
}
.grid-bg .grid02 .grid02-header,.grid-bg .grid02 .grid02-main,
.grid-bg .grid02 .grid02-sidebar,.grid-bg .grid02 .grid02-footer,
.grid-bg .grid02 .grid02-sub01,.grid-bg .grid02 .grid02-sub02,
.grid-bg .grid02 .grid02-sub03{
    border-radius:8px;
}
.grid-bg .grid02 .grid02-header{grid-area:header02;}
.grid-bg .grid02 .grid02-main{grid-area:main02;}
.grid-bg .grid02 .grid02-sidebar{grid-area:sidebar02;}
.grid-bg .grid02 .grid02-footer{grid-area:footer02;}
.grid-bg .grid02 .grid02-sub01{grid-area:sub-con01;}
.grid-bg .grid02 .grid02-sub02{grid-area:sub-con02;}
.grid-bg .grid02 .grid02-sub03{grid-area:sub-con03;}

.grid-bg .grid02 .grid02-header{
    background: radial-gradient(rgba(234,85,50,0.05) 0% , rgba(234,85,50,0.15) 40% , rgba(234,85,50,0.45) 90% , rgba(234,85,50,1) 110%);
    border:solid 1px rgba(234,85,50,0.5);
    color:#fff;
}
.grid-bg .grid02 .grid02-main{
    background: #FFF33F;
    background: radial-gradient(rgba(255,243,63,0.05) 0% , rgba(255,243,63,0.15) 50% , rgba(255,243,63,0.45) 98% , rgba(255,243,63,1) 110%);
    border:solid 1px rgba(255,243,63,0.5);
    color:#fff;
}
.grid-bg .grid02 .grid02-sidebar{
    background: #E4007F;
    border:solid 1px rgba(228,0,127,0.5);
    background: radial-gradient(rgba(228,0,127,0.05) 0% , rgba(228,0,127,0.10) 40% , rgba(228,0,127,0.45) 90% , rgba(228,0,127,1) 110%);
    color:#fff;
}
.grid-bg .grid02 .grid02-footer{
    border:solid 1px rgba(0,151,219,0.7);
    background: radial-gradient(rgba(0,151,219,0.05) 0% , rgba(0,151,219,0.15) 40% , rgba(0,151,219,0.55) 90% , rgba(0,151,219,1) 110%);
    color:#fff;
}
.grid-bg .grid02 .grid02-sub01{
    border:solid 1px rgba(0,158,150,0.7);
    background: radial-gradient(rgba(0,158,150,0.05) 0% , rgba(0,158,150,0.10) 40% , rgba(0,158,150,0.55) 90% , rgba(0,158,150,1) 110%);
    color:#fff;
}
.grid-bg .grid02 .grid02-sub02{
    border:solid 2px rgba(144,62,132,0.8);
    background: radial-gradient(rgba(144,62,132,0.05) 0% , rgba(144,62,132,0.15) 40% , rgba(144,62,132,0.6) 90% , rgba(144,62,132,1) 110%);
    color:#fff;
}
.grid-bg .grid02 .grid02-sub03{
    border:solid 2px rgba(77,67,152,0.8);
    background: radial-gradient(rgba(77,67,152,0.05) 0% , rgba(77,67,152,0.15) 40% , rgba(77,67,152,0.6) 90% , rgba(77,67,152,1) 110%);
    color:#fff;
}

4.こんなレイアウトも！

アイテムの背景を画像にし、clip-pathで斜めにトリミングををすると
この漫画のコマ割りの様なこともできます！
（ソースは長いのでここでは割愛します）

最後に

少し独特な書き方で慣れが必要ですが、Gridもマスターできればマークアップでの表現の幅もさらに広がること間違いなしです！

▼この記事で使用したページ
https://3104pipi.com/animation/grid01.html