以下の記事において、CSS Grid Layoutはまずグリッドを定義して、それに基づいて各コンテンツをグリッドにはめ込んでいく形での指定方法を書いた。
上記はgrid-templateというプロパティを用いるとかなり省略して記述できる。
.container {
display: grid;
grid-template:
"header header header" 80px
"left main right" auto
"footer footer footer" 50px / 300px 1fr 20%;
}
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.nav {
grid-area: nav;
}
.footer {
grid-area: footer;
}個別に詳細
グリッドの定義
グリッドに対して名前をつけて、それらがどこを網羅するかを名前で記述する。
それらに行単位で高さを指定する。
最後にスラッシュで区切ってからカラム幅を定義する。
grid-template:
"header header header" 80px
"aside main nav" auto
"footer footer footer" 50px /
300px 1fr 20%;上記の記述は、以下のような定義を作るイメージ。
太字はグリッドに対する名前で、細字は設定値。
| １列目 | ２列目 | ３列目 | 行の高さを定義 |
|---|---|---|---|
| header | header | header | 80px |
| aside | main | nav | auto(1fr?) |
| footer | footer | footer | 50px |
| 300px | 1fr | 20% | ←列の幅を定義 |
グリッドの割当
上でつけた名前をgrid-areaプロパティを使用してそれぞれのHTMLブロックに割り当てる。
.header {
grid-area: header;
}
.main {
grid-area: main;
}
.aside {
grid-area: aside;
}
.nav {
grid-area: nav;
}
.footer {
grid-area: footer;
}書く位置と意味を覚えないと書けないし、複数列に渡るグリッドは定義の時点で3回書いたり、列の幅指定は最終行にスラッシュ区切りで書くなどいまいちがちゃがちゃしてるので、違和感半端ない。個人的にはまあまあムズムズする。
なお、grid-areaを定義するだけならsassの繰り返し処理を使うと楽かも？
$areas: header, aside, main, nav, footer;
@each $area in $areas {
.#{$area} {
grid-area: #{$area};
}
}でも実際にはグリッドごとの各セレクタに色々とスタイルを書くと思うので、繰り返し部分と個別スタイルを結局二回書かなあかんのではないか。書き方には工夫が必要。