CSS3 Pre-Reference



grid-columns

グリッドの列数・幅

試す

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

コメントする


対応ブラウザ

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-columns: 1em 2cm .5em 120px

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

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

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

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

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

grid-columns: 2cm * 3* 2*

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

単位grは、グリッドとマルチカラムと同じ値を参照し、優先度としてはグリッド>マルチカラム、テーブルセル>何も無しです。

トラックバック

投稿されたコメント