ドットインストール：CSSグリッドレイアウト入門#07~#08
CSSグリッドレイアウトを学習しています。
今回は3回目。#07~#09を学習していきましょう。
前回の学習はこちらです。
#07 エリアを登録して配置してみよう
前回、位置をいろいろ変えてみましたが
今回はシンプルなレイアウトに戻して学習します。
今までは、グリッドラインを使って場所の指定をしてきましたが
グリッドをいくつかまとめて、
「エリア」として配置することもできます。
ちなみに現在はこんな感じ。
ここで学習したとおりです。
このマス目に対して、文字列を割り当てていきます。
grid-template-areaというプロパティを使います。
.container{
background:#eee;
display:grid;
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
grid-template-area
"header header header"
"main main sidebar"
"footer footer footer"
}
grid-template-areaプロパティに
それぞれのマス目の名前をつけています。
上の段は全部ヘッダー。
真ん中の段は左二つが「メイン」、右側が「サイドバー」。
下の段は全部フッターです。
すごい。よく見るブログのレイアウトみたいだ！
そして、それぞれのitem の中にも名前をつけます。
.item-1{
background:hsl(300,80%,30%);
grid-area:header;
}
このようにすると、item-1を上の3つに割り当ててくれるのだそうです。
.item-2{
background:hsl(300,80%,30%);
grid-area:main;
}
.item-3{
background:hsl(300,80%,30%);
grid-area:sidebar;
}
i
.item-4{
background:hsl(300,80%,30%);
grid-area:footer;
}
同じように、item4までをそれぞれ指定します。
今回はitem5以降は使わないので、一度コメントにして
反映されないようにしておきましょう。
こうですね。
ブラウザで見ると、このようになっています。
なるほど、イメージ通りになっていますね。
ちなみに、配置したくない場所には
ピリオドを打てばいいそうです。
「main」の一つをピリオドにした感じですね。
このように、ピリオドを書いた場所には
何も配置されません。
これも、よく見る指定方法なので覚えておきましょう。
先ほどの、
grid-template-area
"header header header"
"main . sidebar"
"footer footer footer"
のところと、
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
列の幅や行の高さのところを
一気にまとめて書くこともできます。
なんだかトリッキーな書き方に見えますが＾＾；
このように一気に指定することもできるのだそうです。
ブラウザで見ても、
配置は変わりません。
直感的にかけて、いい感じですね。
おさらい。
グリッドの配置は、「グリッドライン」だけではなく「グリッドエリア」で指定することもできる。
#08 自動的に要素を配置してみよう
また、元のコードに戻って学習します。
ブラウザで見ると、このような感じになっています。
次は、
要素の位置は指定せずに
要素のサイズだけを指定する方法です。
spanでサイズを指定する
たとえば、item-2に次のように指定します。
.item-2{
background:hsl(300,80%,40%);
grid-row: span 2;
grid-column: span 1;
}
行方向の高さは2つ分、列方向の幅は1つ分とします。
item-3には、
こんなふうにしてみます。
.item-3{
background:hsl(300,80%,50%);
grid-row: span 1;
grid-column: span 2;
}
こちらは行方向の高さが1つ分、列方向の幅が2つ分ですね。
これをブラウザで見るとこのようになっています。
まあ…。なんて自由な位置どりでございましょう。
要素は何も指定しないと、左上から順に横に並べられていきます。
3は幅が広いため、2 の横に入りきらなかったため
下に移動しているのです。
このようにすると、サイズだけを指定することができます。
grid-auto-flow:denseで横向きに要素を詰める
ただ、間があいたところに
要素を詰めたいことがあります。
そのような場合には.containerのところにこのように書き足します。
.container{
background:#eee;
display:grid;
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
grid-auto-flow:dense;
}
grid-auto-flow:dense;とすると、間をつめてくれます。
ブラウザで見ると、このようになっています。
不定形な2と3を入れたあと、
後の数字は順番通りに隙間に入っていっている感じですね。
grid-auto-flow:dense columnで縦向きに要素を詰める
このように、残りの要素を横向きに並べていく方法のほかに、
縦に並べる方法もあります。
.container{
background:#eee;
display:grid;
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
grid-auto-flow:dense column;
}
先ほどの横に「column」を書き足した形ですね。
左上から順に、
縦方向に並んでいます。
このように縦方向にも指定することができます。
グリッドからはみ出した要素にも幅や高さを指定する
また、今回の8と9のように、
グリッドからはみ出してしまった要素にも
幅や高さを指定することができます。
.container{
background:#eee;
display:grid;
grid-template-rows:80px,80px,80px;
grid-template-colums:80px,80px,80px;
grid-auto-flow:dense column;
grid-auto-rows:80px;
grid-auto-column:80px;
}
幅と高さを80pxにしました。
8と9も幅と高さが80pxになりましたね。
おさらい。
- 要素のサイズだけを指定するにはspan。
- 横向きに要素を詰めるのはgrid-flow:dense;。
- 縦向きに要素を詰めるのはgrid-flow:dense column;。
- グリッドからはみ出した要素にサイズを設定するにはgrid-auto-rowsとgrid-auto-columns。
