グリッドの基本的な使い方を、この記事では紹介していきます。
それでは、さっそく…
gridにまつわる用語
グリッドを理解するには、それにまつわる名前を覚えるのが先決です。
名前さえ覚えてしまえば、半分くらいは分かったようなものです。
ホントに。
まず列と行を見てみましょう。
列と行と格子状
縦が列、横が行です。
どっちがどっちだっけ？ってなる人もいるはずです。
僕がそうなので。
もう1回言いますね。
縦が列で、横が行です。
ここをしっかり頭に入れましょう。
この先がグッと読み進めやすくなるります。
そして、その行と列が重なったのがグリッド。
グリッドは格子状という意味。
こういうの↓
コンテナとアイテム
コンテナは格子状の1番外枠とイメージすればいいかもしれません。
以下のhtmlコードで言うと、親の<div>がコンテナにあたります。
<div> /* コンテナ */
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>アイテムはコンテナの子要素です。
<div>
<div>1</div> /* アイテム */
<div>2</div> /* アイテム */
<div>3</div> /* アイテム */
<div>4</div> /* アイテム */
<div>5</div> /* アイテム */
</div>イメージ的にはこうですね。
トラック・ライン
トラックはコンテナの縦(列)または横(行)のこと。
列トラック・行トラックと呼びます。
ラインは格子状で言うと、1本1本の線になります。
左または上から番号が付けられます。
ラインは右または下からマイナス値で表すことも可能です。
セル・エリア
セルは格子で囲まれた中のもっとも小さな単位。
このセルにアイテムを置けます。
エリアは横または縦、さらには横と縦のセルを結合させたもの。
複数のセルを結合していない単一のセルもまたエリアと呼ばれます。
とにかく、ここまで出てきた用語を先に覚えてください。
しんどいけど…
gridの指定方法
ここからやっとgridの指定の書き方です。
と、その前にまた用語が…
コンテナ・アイテム
- コンテナ…親要素
- アイテム…子要素
コンテナとは日本語で入れ物。
イメージとしては、大きな1つの入れもの(コンテナ)中に複数のもの(アイテム)が入ってるような感じでしょうか。
<div class="wrapper"> /* wrapper…包むという意味 */
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
<div>.wrapper {
display: grid;
}.wrapperにdisplay: girdと指定しました。
これをコンテナ化すると呼びます。
この時点では、親はコンテナ。
子はアイテムと呼ばれるようになります。
指定した結果はこちら↓
見た目はdisplay: blockと同じです。
検証画面でgirdを指定する前との要素を比べてみましょう。
grid指定後は点線で囲まれてますね。
上記の点線は、下図のgridにカーソルを合わせると表示されます。
列(幅)と行(高さ)を指定する
次は、列と行を指定します。
これで格子状に見えるようになります。
<div class="wrapper">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
<div>.wrapper {
display: grid;
grid-template-columns: 200px 100px;
grid-template-rows: 100px 50px;
}
grid-template-columnsは列(幅)トラックのサイズを指定できます。
grid-template-columns: 200px 100pxは、2本の列トラックを作ります。
左から1列目が200px、2列目が100pxです。
一方、grid-template-rowsは行(高さ)トラックのサイズを指定します。
grid-template-rows: 100px 50pxは2本の行トラック。
上から100px、2つ目が50pxの高さになります。
検証画面でhtmlコードのgridをクリックすれば、以下のようにラインが表示されます。
frを使って指定する
frはことばで説明するより見てもらった方が分かりやすいと思います。
なので、さっそく指定をどうぞ。
列トラック(grid-template-columns)に指定します。
<div class="wrapper">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
<div>アイテム4</div>
<div>アイテム5</div>
<div>.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 50px;
}grid-template-columns: 1fr 1fr 1frは、1・2・3列目とも同じ幅になります。
frを使うと、親要素である.wrapper(コンテナ)の幅いっぱいにアイテムが置かれます。
.wrapperの幅が広がるとアイテムの横幅も大きくなります。
反対に、.wrapperの幅がせまくなると、アイテムの横幅は小さくなります。
もう1つ見てみましょう。
<div class="wrapper">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
<div>アイテム4</div>
<div>アイテム5</div>
<div>.wrapper {
display: grid;
grid-template-columns: 100px 100px 1fr;
grid-template-rows: 100px 50px;
}grid-template-columns: 100px 100px 1frと指定します。
この指定は、1・2列目が100pxで3列目が残りの幅となります。
下図は画面幅が400pxです。
※画面幅＝<body>の幅です。
この指定の場合だと、親である.wrapper(コンテナ)の幅が拡大縮小しても、1・2列目は100pxのままです。
3列目の幅だけが、.wrapperの幅に伴って変化します。
今度は、行トラックであるgrid-template-rowsにfrを指定してみましょう。
<div class="wrapper">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
<div>アイテム4</div>
<div>アイテム5</div>
<div>.wrapper {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 1fr;
}grid-template-rows: 100px 1frとすると、1行目は100pxになりますね。
では、2行目(アイテム4・5)はどうかというと…
高さは文字のぶんの大きさないですね。
これは、高さが決められないからというのがこうなる理由です。
幅はスマホやパソコンで見る時に、幅が決まります。
一方、高さはその大きさが決まりません。
height: 〇〇pxで指定すれば、話は別ですが。
ですので、行トラックであるgrid-template-rowsにfrを指定しても、上記のような結果になります。
もし、行トラックにfrを指定するのなら、親にheightを指定しましょう。
<div class="wrapper">
<div>アイテム1</div>
<div>アイテム2</div>
<div>アイテム3</div>
<div>アイテム4</div>
<div>アイテム5</div>
<div>.wrapper {
display: grid;
height: 300px;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 1fr;
}
.wrapperにheight: 300pxと指定。
この場合、grid-template-rows: 100px 1frは、1行目が100px。
2行目が、(高さ300px)ー(1行目の高さ100px) ＝ 200pxとなります。
アイテムを配置
ここで子要素でアイテムに指定をして、配置を決めてみます。
列ラインを指定
<div class="wrapper">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
<div class="item4">アイテム4</div>
<div class="item5">アイテム5</div>
</div>.wrapper {
display: grid;
grid-template-columns: 100px 100px 1fr; /* 3列 */
grid-template-rows: 100px 50px; /*2 行 */
}
.item1 {
grid-column: 1 / 3;
}アイテム1にgrid-column: 1 / 3と指定。
この指定は、列のライン1からライン3にアイテム1を置くという意味です。
結果は下図のようになります。
なんとなく分かっていただけましたか？
ちなみに、grid-column: 1 / 3は、
grid-column-start: 1;grid-column-end: 3;
というふうにも書けます。
まあ、grid-column: 1 / 3の方がラクなので、こっちを覚えましょう。
行ラインを指定
さいごは行ラインを指定します。
<div class="wrapper">
<div class="item1">アイテム1</div>
<div class="item2">アイテム2</div>
<div class="item3">アイテム3</div>
<div class="item4">アイテム4</div>
<div class="item5">アイテム5</div>
</div>.wrapper {
display: grid;
grid-template-columns: 100px 1fr; /* 2列 */
grid-template-rows: 100px 50px 50px; /* 3行 */
}
.item1 {
grid-row: 1 / 3;
}grid-row: 1 / 3は、行のライン1からライン3までにアイテム1を置く指定。
ご覧のような結果になりました。
grid-row: 1 / 3は、
grid-row-start: 1;grid-row-end: 3;
とも書けます。
が、やっぱりgrid-row: 1 / 3の方を覚えておきましょう。
以上、基本はこんな感じです。
おわり…
参考サイト
「grid」は、CSS3をもとに書きました。
CSS3とは、cssのルールブックみたいなもので、その最新版です。
まとめ
gridは使い方や指定の仕方もいろいろあるので、別の記事でも取り上げていきますね。
今回は、とりあえずgridにまつわる用語を覚えてしまいましょう。