レイアウトをコーディングするときにFloat（フロート）、Flexbox（フレキシブルボックス）、Grid Layout（グリッドレイアウト）などいろいろな組み方があります。
Floatを使うwebサイトはだいぶ少なくなってきたと思いますが。
Float（フロート）、Flexbox（フレキシブルボックス）は横並びにレイアウトを組むことができます。
一方、Grid Layout（グリッドレイアウト）も横並びのレイアウトを組むことができます。
ですがFlexbox（フレキシブルボックス）とGrid Layout（グリッドレイアウト）には横並びのレイアウト以外に違いがあります。
今回は、この FlexboxとGrid Layoutの違いとGrid Layout（グリッドレイアウト）の組み方を紹介していきたいと思います。
FlexboxとGrid Layoutの違い
Flexbox（フレキシブルボックス）
横方向にレイアウトされるのみ
Grid Layout（グリッドレイアウト）
縦横自在にレイアウトできる。
そして自由度が高い。
Flexboxだと縦と横のいずれかの一方向へのレイアウトができるのに対してGrid Layoutは縦横自在にレイアウトできるという特徴があります。
Grid Layout/ グリッドレイアウトの使い方
それでは基本手なグリッドの組み方になります。
まず下記は、3列+2行のレイアウトになります。
html
<div class="cont">
<div class="item item1">item1</div>
<div class="item item2">item2</div>
<div class="item item3">item3</div>
<div class="item item4">item4</div>
<div class="item item5">item5</div>
</div>css
.cont{
display: grid;
width: 800px;
grid-template-columns: 1fr 1fr 1fr;
gap: 5px;
display: none;
}
.container .item{
padding: 5px;
background: #eee;
}こちらはflexboxでもレイアウトが可能ですがグリッドでやってみました。
参考
幅や高さを指定するプロパティ
cssで指定したようにグリッドを使用する場合は「display: grid;」を指定します。
ですがこの指定だけではグリッドレイアウトにはなりません。
グリッドを使用する場合は幅や高さを指定するプロパティを指定します。
| オプション | 説明 |
| grid-template-columns | 列トラックの幅と表示させる数を指定 |
| fr | 均等に分割して表示 |
レイアウトパターン（応用）
次はサイトでよく使うレイアウトパターンをグリッドレイアウトで組んでいきます。
ヘッダー、右メニュー、コンテンツ、フッターをグリッドレイアウトで組みます。
html
<div class="cont">
<div class="item item1">ヘッダー</div>
<div class="item item2">コンテンツ1</div>
<div class="item item3">コンテンツ2</div>
<div class="item item4">コンテンツ3</div>
<div class="item item5">右メニュー</div>
<div class="item item6">フッター</div>
</div>css
.cont{
display: grid;
width: 600px;
grid-template-columns: 1fr 200px;
}
.cont .item{
padding: 5px;
background: #eee;
}
.cont .item.item1{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 1;
grid-row-end: 2;
background: #eee;
}
.cont .item.item2{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 2;
grid-row-end: 3;
background: #aaa;
}
.cont .item.item3{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 3;
grid-row-end: 4;
background: #ddd;
}
.cont .item.item4{
grid-column-start: 1;
grid-column-end: 2;
grid-row-start: 4;
grid-row-end: 5;
background: #bbb;
}
/* 右メニュー */
.cont .item.item5{
grid-column-start: 2;
grid-column-end: 3;
grid-row-start: 2;
grid-row-end: 5;
background: #aaa;
}
/* フッター */
.cont .item.item6{
grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 5;
grid-row-end: 6;
background: #999;
}
参考
配置位置を指定するプロパティ
| プロパティ | 説明 |
| grid-row | 行方向の配置位置を指定する |
| grid-column | 列方向の配置位置を指定する |
grid-rowとgrid-columnを使用することで複雑なレイアウトを簡単に指定することができます。
このようにgridを使うことで効率化にもつながり運用面でもメリットがあります。
ぜひ使ってみてください。
コメント