CSS3 Pre-Reference



grid-rows

グリッドの行数・高さ

試す

対応ブラウザが無くテストができません。

コメントする


対応ブラウザ

Firefox
まだ
Chrome/Safari
まだ
Opera
まだ
InternetExplorer
まだ

パラメータ

[[||] | ([|| ]+)[‘[’‘]’]? ]+ | none | inherit
初期値 none
適用 すべての要素
継承 しない
レベル 3
%の解釈 コンテナブロックの高さを参照
適用メディア Vidual, Paged
参考文献 CSS Grid Positioning Module Level 3#4.1.1. ‘grid-columns’ and ‘grid-rows’ properties

解説

グリッドの行数・高さを指定します。

グリッドはHTMLのframesetに似た方法で指定します。

もっとも単純なものが、グリッドの高さを長さで列挙していく方法です。

grid-rows: 1em 2cm .5em 120px

上記のように指定すると、上から順に指定した長さの4つの行が出来上がります。

繰り返し指定をすることが出来ます。たとえば、以下のようにすると、行が1 + 3 x 3の合計10行が出来上がります。

grid-rows: 1em (2cm .5em 120px)[3]

余ったエリアについては、繰り返し箇所が最後に来ている場合は繰り返し部分のグリッド高を適用します。(この例の場合は「2cm .5em 120px」の箇所)繰り返し部分がない場合は、最後のグリッド高を繰り返します。(前例の場合は「120px」)
はみ出したエリアについては、単純に切り取られます。

framesetのような相対長を利用することも出来ます。例えば、以下の例だと、高さのうち2cmを上端のグリッドに利用し、残りを1:3:2で等分します。

grid-rows: 2cm * 3* 2*

テンプレートに向けた名前付きグリッドも提案されていますが、まだ詳細は決まっていないようです。

トラックバック

投稿されたコメント