Gridを使って30分未満でオリジナルなレイアウトを作成する方法

CSSにて公開されている技術の一つとして、Grid Layout(グリッドレイアウト)というものがあります。簡単にいうと、サイトのレイアウトを作成するための手法の一つです。
理解していくことで、より効率的にレイアウトを作成していくことができます。

今回は、そんなGrid Layout(グリッドレイアウト)の考え方を用いて、レイアウトを作成するための方法について一緒に見ていきましょう。

✅   Grid Layout(グリッドレイアウト)とは何か?
✅   Gridを用いて、オリジナルレイアウトを作成する方法
✅   サンプルプログラムを用いて解説

Grid Layout(グリッドレイアウト)とは??

Grid Layout(グリッドレイアウト)とは、サイトレイアウトを作成する際の手法の一つになります。
Grid Layoutコンテナ(display:grid;が設定されている要素)を格子状のマス目のように考えることで、1方向に関わらず、水平方向、垂直方向の両方に沿って要素を配置することが可能になるため、2次元レイアウトとも言われています。

基本的なHTMLのレイアウトの配置としては、上から下に順番に配置されていきます。CSSを指定して、横方向に並べたりもできますが、結論は、どちらか一方のみが指定可能です。

それに比べて、Grid layoutは、両方向から設定が可能なので、自由なレイアウトの作成が出来ます。

Grid Layout(グリッドレイアウト)の使い方

さて、Grid Layoutについて確認していったところで、実際の使い方について実践形式で確認していきましょう。

ベースとなるHTML/CSSを準備

<html> 
    <head>
        <meta charset="UTF-8">
        <title>gridレイアウト05</title>
        <link rel="stylesheet" href="grid_sample.css">
    </head>
    <body>
        <header id="header">ヘッダー</header>
        <div class="wrapper">
            <div id="main">メイン</div>
            <div id="main02">メイン02</div>
            <div id="main03">メイン03</div>
            <div id="main04">メイン04</div>
            <footer id="footer">フッター</footer>
        </div>
    </body>
</html>

body {  
    margin: 0; 
}

/*  ヘッダーのみ通常のレイアウトで作成する   */
#header {
    width: 20%;
    height: 100%;
    background-color: rgb(227, 242, 255, 0.9);
    position: fixed; 
    z-index: 2; 
}

CSS Gridを実装

ベースとなるHTML/CSSファイルが準備できましたら、早速、grid layoutとしてデザインしていく上でのコードを追加していきます。

追加コードについては、順番に説明していきますので、ご安心ください。

Grid Layoutコンテナ(display:grid;が設定されている要素)に関するCSSを追加

※ 次のコードをベースとして作成したCSSファイルに追加してください。

.wrapper {   
    /*  Grid Layoutコンテナとして指定  */
    display: grid;
    /*  親要素の横幅を基準に分割するイメージ。 */
    /*  20%の横幅のみ指定し、残りは自動で割り振るようにする 
        : 水平方向に2つの子要素分のトラックサイズを指定   */
    grid-template-columns: 20% auto;
    /*  親要素の高さを基準に分割するイメージ。 */
 　　/*  550pxの高さのブロックを縦に並べ、最後の要素のみ200pxで指定 
　　　　　: 垂直方向にに5つの子要素分のトラックサイズを指定  */
    grid-template-rows: 550px 550px 550px 550px 200px ;
}

親要素(Grid Layoutコンテナ)の設定が終わったら、メインコンテンツとフッターの設定をしていきます。

/*   メインコンテンツの設定   */
#main {
    grid-row: 1/2;
    grid-column: 2/3;
    background-color: aquamarine;
}

#main02 {
    grid-row: 2/3;
    grid-column: 2/3;
    background-color: rgb(255, 214, 127);
}

#main03 {
    grid-row: 3/4;
    grid-column: 2/3;
    background-color: aquamarine;
}

#main04 {
    grid-row: 4/5;
    grid-column: 2/3;
    background-color: rgb(255, 214, 127);
}
/*   メインコンテンツの設定 終わり   */


/*   フッターの設定   */
#footer {
    grid-row: 5/6;
    grid-column: 2/3;
    background-color: rgb(151, 205, 253);
}
/*   フッターの設定 終わり   */