そんな疑問にお答えします。
前の記事では聖杯レイアウトをFlexboxを使って作りました。
今回はGridを使って作ります。
Gridでレイアウトを組む方法は２つあります。
- ラインを使う方法
- エリアを使う方法
この記事ではエリアを使う方法を紹介します。
Gridを用いた聖杯レイアウト
コード
<body>
<header>header</header>
<nav>left</nav>
<main>center</main>
<aside>right</aside>
<footer>footer</footer>
</body>body {
min-height: 100vh;
max-width: 1200px;
width: 100%;
margin: 0 auto;
display: grid;
grid-template:
"header header header" 200px
"left center right " 1fr
"footer footer footer" 200px
/ 200px 1fr 200px;
}
header {
grid-area: header;
}
main {
grid-area: center;
}
nav {
grid-area: left;
}
aside {
grid-area: right;
}
footer {
grid-area: footer;
}
@media (max-width: 960px) {
body {
grid-template:
"header" 200px
"center" 1fr
"left "
"right "
"footer" 200px;
}
}
| grid-template | grid-columnsおよびrows、areasを定義するための短縮プロパティ |
| grid-area | グリッドアイテムの場所を指定するプロパティ |
解説
まずGridのHTMLとCSS構成をおさらいしておきます。
HTMLで記述しなければならない要素は
- コンテナ（グリッド全体を表す要素）
- アイテム（グリッドのエリアに配置する要素）
の２つです。
アイテムはコンテナの子要素として記述します。
<!-- サンプル -->
<div class="container"> <!-- コンテナ -->
<div class="itemA">A</div> <!-- アイテム -->
<div class="itemB">B</div> <!-- アイテム -->
<div class="itemC">C</div> <!-- アイテム -->
</div>
そして親要素のコンテナにdisplay: grid;と記述します。
/* サンプル */
.container {
display: grid; /* グリッドレイアウト */
}これでGridが使えるようになります。
次にGridのエリアを使う方法を解説します。
エリアをを使う方法は次の３ステップで完了します。
①コンテナを作成。display: grid;と指定。
②コンテナにgrid-templateと記述し、グリッドの位置（エリア）ごとに名前とサイズを指定。
③アイテムにgrid-areaと記述し、それぞれのアイテムをどこに割り当てるかを指定。
ここまでを踏まえてGridのエリアを使って聖杯レイアウトを作ります。
まずHTMLの構成は、body内にheader、nav、main、aside、footerを並べます。
<body>
<header>header</header>
<nav>left</nav>
<main>center</main>
<aside>right</aside>
<footer>footer</footer>
</body>
次にCSSを記述します。
コンテナ（親要素）のbodyにdisplay: grid;と指定。
次にgrid-templateと記述し、名前とサイズを指定します。
body {
display: grid; /* 親要素に指定 */
grid-template: /* 名前とサイズの指定 */
"header header header" 200px
"left center right " 1fr
"footer footer footer" 200px
/ 200px 1fr 200px;
}
最後にアイテム（子要素）にgrid-areaを記述することで、それぞれのアイテムをどこに割り当てるかを指定します。
/* それぞれのアイテムをどこに割り当てるかを指定 */
header {
grid-area: header;
}
main {
grid-area: center;
}
nav {
grid-area: left;
}
aside {
grid-area: right;
}
footer {
grid-area: footer;
}
ここでgrid-template内の記述について解説しておきます。
聖杯レイアウトはこのような配置になっています。
この配置を見たままに記述します。
どういうことかというと、次の図とCSSを見比べてもらえればわかると思います。
"header header header" 200px
"left center right " 1fr
"footer footer footer" 200px
/ 200px 1fr 200px;
いかがでしょうか。
見たままに記述されているのがわかると思います。
最初見たときはちょっとびっくりしました。
こんな書き方ができるんですね。
この視覚的にわかりやすいというのがGridの大きな特徴でありメリットでもあります。
ちなみに「1fr」という書き方についてもふれておきます。
「fr」とはfraction（比率）のことで上記の横幅の場合（200px 1fr 200pxの記述部分）、左右各200pxを引いた残り全部を真ん中の幅に割り当てています。
よって左右固定の真ん中伸縮という動きになります。
レスポンシブ対応
画面サイズが小さい場合には縦に並ぶようにします。
以下の並びにしたいとします。
@media (max-width: 960px) {
body {
grid-template:
"header" 200px
"center" 1fr
"left "
"right "
"footer" 200px;
}
}これも先ほどと同様、見たままの記述となっているのがわかると思います。
leftとrightには高さの指定がありません。
指定がない場合はautoとなるので、そのコンテンツの持っているサイズ分だけ確保します。
あとの指定の仕方は先ほどと同じです。
Gridのエリアを使う方法はコードがシンプルだし、視覚的にもわかりやすいです。
最初は少し戸惑いますが、慣れてしまえばすごく楽にレイアウトが組めるようになります。
IE未対応という点だけがデメリットですが、そこを除けば使わない理由はないと思います。
少しずつでも慣れていっていいんじゃないでしょうか。
以上です。
投稿者 トシ
コメントを残す