2020.11.24

HTML/CSS

【今までの苦労はなんだったのか】CSSの常識を覆す『Grid Layout』

初めまして！9月からインターン生としてLEGITにお世話になっておりますてっちゃんです！

今までキャラ的に「ちゃん」付けのあだ名をつけられてこなかったのですが、LEGITに来て初めて「てっちゃん」というあだ名を頂きました。案外気に入っています（笑）

今回はGrid Layoutが革新的かつ非常に便利で、超超超オススメなので従来のFrex Boxと比較しながらご紹介したいと思います。

Grid Layoutとは？

CSS Gridレイアウトとは、CSSでレイアウトを組む時に使われる主要な方法の一つです。Frex Boxの後に出てきたもので、後発というだけあってFrex Boxと比べてもより自由にレイアウトを組むことができます。

Grid Layoutの用語

まずは、この後の解説を理解しやすくなるようにGrid Layout特有の用語を説明します。

コンテナ

Grid全体を囲む要素です。

display: grid;を指定することで、その要素はGrid Layoutのコンテナになります。

アイテム

コンテナの子要素です。

コンテナの直接の子要素は基本的に全てのアイテムになります。

ライン

グリッドを分ける垂直および水平の線のことです。

ラインには、上あるいは左から1から順に生の番号が振られています。

セル

アイテムを配置できる最小の単位です。

エリア

一つあるいは複数のセルが結合してできるセルの集まりです。

エリアには名前をつけることができ、アイテムを配置できます。

Grid Layoutの使い方

Grid Layoutでレイアウトを組む方法は下記の二つがあります。

◇ラインを使った方法

◇エリアを使った方法

これらの方法をレイアウトの基本である聖杯レイアウトを例として挙げ、それぞれのレイアウトの組み方をご紹介します。

HTML

 <div class="container">
    <header>header</header>
    <main>main</main>
    <nav>left</nav>
    <aside>right</aside>
    <footer>footer</footer>
</div>

<header>header</header>

<aside>right</aside>

<footer>footer</footer>

</div>

ラインを使った方法

下記の3つのステップで記述を行います。

コンテナを作成する。作成するには要素に対してdisplay: gridもしくはdisplay: inline-girdを指定する。その時、コンテナ直下の要素がアイテムとなる。
コンテナにgrid-template-rows、grid-template-columnsを指定してグリッドのサイズを決める。
アイテムにgrid-row、grid-columnを指定しの配置を決定する。

.container{
    display: grid; /* 親要素に指定 */
    grid-template-rows: 100px 1fr 100px;　/* 行の高さを指定 */
    grid-template-columns: 80px minmax(300px,1fr) 80px;　/* 列の幅を指定 */
}
header{　/* アイテムの配置を指定する */
    grid-row: 1/2;　
    grid-column: 1/4;
}
nav{
    grid-row: 2/3;
    grid-column: 1/2;
}
main{
    grid-row: 2/3;
    grid-column: 2/3;
}
aside{
    grid-row: 2/3;
    grid-column: 3/4;
}
footer{
    grid-row: 3/4;
    grid-column: 1/4;
}

.container{

display: grid; /* 親要素に指定 */

grid-template-rows: 100px 1fr 100px;　/* 行の高さを指定 */

grid-template-columns: 80px minmax(300px,1fr) 80px;　/* 列の幅を指定 */

}

header{　/* アイテムの配置を指定する */

grid-row: 1/2;　

grid-column: 1/4;

}

nav{

grid-row: 2/3;

grid-column: 1/2;

}

main{

grid-row: 2/3;

grid-column: 2/3;

}

aside{

grid-row: 2/3;

grid-column: 3/4;

}

footer{

grid-row: 3/4;

grid-column: 1/4;

}

grid-template-rows	グリッドの行の高さを指定するプロパティ
grid-template-columns	グリッドの列の幅を指定するプロパティ
grid-row	縦方向のアイテムの位置を指定するプロパティ。スラッシュ区切りで指定する。
grid-column	横方向のアイテムの位置を指定するプロパティ。スラッシュ区切りで指定する。

エリアを使った方法

下記の3つのステップで記述を行います。

1.はラインを使った方法と同様。
コンテナにgrid-templateを指定し、視覚的に配置する。グリッドのサイズもgrid-template内で決めることができる。
アイテムにgrid-areaを指定し、どこに割り当てるかを決める。

.container{
    display: grid; /* 親要素に指定 */
    grid-template: /* グリッド領域の名前とサイズを指定する */
    "header header header" 100px 
    "left   main   right " 1fr
    "footer footer footer" 100px
    /80px minmax(300px,1fr) 80px;
}
/* それぞれのアイテムをどこに配置するかを指定する */
header{
    grid-area: header;
}
main{
    grid-area: main;
}
nav{
    grid-area: left;
}
aside{
    grid-area: right;
}
footer{
    grid-area: footer;
}

.container{

display: grid; /* 親要素に指定 */

grid-template: /* グリッド領域の名前とサイズを指定する */

"header header header" 100px

"left main right " 1fr

"footer footer footer" 100px

/80px minmax(300px,1fr) 80px;

}

/* それぞれのアイテムをどこに配置するかを指定する */

header{

grid-area: header;

}

main{

grid-area: main;

}

nav{

grid-area: left;

}

aside{

grid-area: right;

}

footer{

grid-area: footer;

}

grid-template	grid-columnsおよびrows、areasを定義するための短縮プロパティ
grid-area	グリッドアイテムの場所を指定するプロパティ