グリットレイアウトとは

グリッドレイアウトとは、縦と横の線を引いて格子（グリット）を作成し、それを自由に組合わせていく手法のことを言います。
新聞や雑誌で古くから使われてきたレイアウト方法です。
グリットに沿って写真や文字などを配置していくことで、規則性が生まれて情報を見やすくすることができます。

有名な画像収集サイト、「Pinterest」でも採用されていますね！

フレックスボックスとの違い

フレックスボックスは横並びにしてくれるレイアウトです。横方向か、縦方向の、一方向からレイアウトを組んでいくものになります。
対してグリットレイアウトは、横方向と縦方向の両方向からレイアウトを組んでいきます。

この二つのメリット・デメリットをまとめてみました。比べてみましょう。

こんな感じになります。
個人的には、一行でも削ってコンパクトなCSSを書きたいと思っているので、フレックスボックスのベンダープレフィックスで記述が増えるのは許しがたい…。使える時はグリットレイアウトを使っていきたいと考えています。
使い分けできるようになると、表現の幅が広がりますよね！

さてさて、お待たせしました。「簡単にグリットレイアウトを組める方法」をご紹介していきます!

簡単にグリットレイアウトを組める方法

「CSS Grid Generator」というWEBツールを使っていきます。

こんな感じの画面になります。このツールで、組みたいレイアウトをこのツールで作った後、HTML/CSSコードをコピペする流れになります。
具体的に見ていきましょう。

STEP.1

まずは、「CSS Grid Generator」を開きましょう。

STEP.2

右側の「Columns」と「Rows」の数字がそれぞれ5になっているので、０と入力して、リセットさせましょう。
なお、５はデフォルトの数字なので、特に気にしないでください。　

そうすると、左側の欄にあった縦の線が消えました。毎回この状態（リセットされた状態）にしてから、レイアウトを組むようにしましょう。

STEP.3

それでは、グリッドレイアウトを組んでいきたいと思います。

仮に上記の画像のように、4列2段に並べたかったとします。「CSS Grid Generator」の画面に戻ります。

右側の「Columns」に「4」、「Rows」に「2」と入力しましょう。

「Columns」は縦の線の数、「Rows」は横の線の数になるため、4列2段に格子を並べることができました。
「1fr」という単位が出てくるかと思いますが、こちらは親要素から子要素の均等な大きさを自動で調整してくれるものになります。「均等に並べてくれてるんだな」程度の認識で大丈夫です。

STEP.4

それでは、各格子をドラッグおよびクリックし、上記の画像のように、4列2段（一段目が2つ、2段目が4つ）に並べるようにします。

上記の画像のような画面になっていれば、OKです。

STEP.5

それでは、格子間の余白を設定します。
右側の「Column Gap (in px)」と「Row Gap (in px)」も、それそれ「20」と入力しましょう。

そうすると、上記のように格子間の余白ができたと思います。

STEP.6

「Please may I have some code」というボタンを押しましょう。

上記のような画面が表示されたと思います。

STEP.7

「Copy to clipboard」と「Show HTML」というボタンがあります。
「Copy to clipboard」でコピーができて、「Show HTML」でCSSとHTMLの切り替えができます。
そのときにコピーできるCSSとHTMLは、以下のようになっているかと思います。

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.div1 {
    grid-area: 1 / 1 / 2 / 3;
}
.div2 {
    grid-area: 1 / 3 / 2 / 5;
}
.div3 {
    grid-area: 2 / 1 / 3 / 2;
}
.div4 {
    grid-area: 2 / 2 / 3 / 3;
}
.div5 {
    grid-area: 2 / 3 / 3 / 4;
}
.div6 {
    grid-area: 2 / 4 / 3 / 5;
}

<div class="parent">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
    <div class="div6"></div>
</div>

それでは各自、「index.html」「index.css」ファイルを用意して、CSSとHTMLをコピー&ペーストしてみましょう。

STEP.8

STEP.7でコピー&ペーストしただけだと、それぞれのボックスに色と高さがありません。何も表示されていないと思います。
CSSでそれぞれのボックスに色を追加し、高さを100pxとしましょう。

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.parent div {
    height: 100px;
}
.div1 {
    grid-area: 1 / 1 / 2 / 3;
    background-color: #5bcbdf;
}
.div2 {
    grid-area: 1 / 3 / 2 / 5;
    background-color: #fd787b;
}
.div3 {
    grid-area: 2 / 1 / 3 / 2;
    background-color: #5edba0;
}
.div4 {
    grid-area: 2 / 2 / 3 / 3;
    background-color: #a5d661;
}
.div5 {
    grid-area: 2 / 3 / 3 / 4;
    background-color: #f7da7c;
}
.div6 {
    grid-area: 2 / 4 / 3 / 5;
    background-color: #f7b07c;
}

実際にできた例

これまででできたものを、Codepenにコピペしてみました！こんな感じになっていればOKです。

グリッドレイアウトを組むことができましたね！
「CSS Grid Generator」を使えば、このように簡単にグリッドレイアウトを組むことができます。よろしければ色々試してみて下さいね！

これだけは覚えておきたいCSS

「CSS Grid Generator」を使って、グリッドレイアウトを組むことができました。これだけでも十分、実務でも使えると思います。
しかし、コピペしたCSSについてもっと知りたいよ、という方のために、簡単にCSSの説明も致します。

「STEP.7」でコピペしたCSS

.parent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
.div1 {
    grid-area: 1 / 1 / 2 / 3;
}
.div2 {
    grid-area: 1 / 3 / 2 / 5;
}
.div3 {
    grid-area: 2 / 1 / 3 / 2;
}
.div4 {
    grid-area: 2 / 2 / 3 / 3;
}
.div5 {
    grid-area: 2 / 3 / 3 / 4;
}
.div6 {
    grid-area: 2 / 4 / 3 / 5;
}

display: grid;

「グリットレイアウトを使います」という宣言みたいなプロパティです。IE対応がいらない環境なら、ベンダープレフィックスなしの一行で書けます！

grid-template-columns: repeat(4, 1fr);

「縦に4本、線を均等に引きます」といった意味合いになります。
先ほどSTEP.3で「Columns：4」と入力しました。そこで設定しております。

grid-template-rows: repeat(2, 1fr);

「横に2本、線を均等に引きます」といった意味合いになります。
先ほどSTEP.3で「Rows：2」と入力しました。そこで設定しております。

grid-column-gap: 20px;

「縦の格子間の余白を20pxにします」という意味合いになります。
STEP.5で「Column Gap (in px)：20」と入力しました。そこで設定しております。

grid-row-gap: 20px;

「横の格子間の余白を20pxにします」という意味合いになります。
STEP.5で「Row Gap (in px)：20」と入力しました。そこで設定しております。

grid-area: 1 / 1 / 2 / 3

div1に設定されているCSSです。
「div1をどこに置くか指定する」CSSになりますが、これが結構難しいのです…私はグリットレイアウトに挑戦する度に、ここで躓いてました…。
この記述を出してもらうために、「CSS Grid Generator」を使っていると言っても、過言ではありません！
とにかく、難しく考えずに「div1をどこに置くか指定する」CSSだ、という風にお考え下さい。

まとめ

WEBツールを使うことで、グリットレイアウトってこんなに簡単にできるんだ！と思っていただけると幸いです。
グリットレイアウトを使えるようになると、表現の幅が広がってコーディングもより効率化できると思います。
ぜひ、色々試してくださいね！