CSS3: grid-auto-position プロパティ - グリッド・コンテナ子要素の配置位置の指定

■ 概要

項　　目説　　明
記述形式 セレクタ {grid-auto-position: 値 }
値 の形式 grid-column-start / grid-row-start
仮想の子要素の grid-column-start と grid-row-start の値は，
　グリッド線 = auto　|　ID名　|　整数 [ ID名 ]　|　span [ 整数 [ ID名 ] ]
で指定します。
初 期 値 1 / 1
対応ブラウザー C?+ / e?+ / Fx?+ / Op?+ / Ch?+ / Sa?+
適用可能な要素 グリッド・コンテナ
継　　承 しない

■ 解説

grid-auto-position プロパティ は，グリッド・コンテナ子要素の配置位置 を指定します。

指定できる値の形式は，以下のとおりです。

値説　　明
ID名
  1. もし，ID名 を持つグリッド領域があれば，その領域の列［行］開始端に揃えます。
  2. それ以外の場合で，ID名 を持つグリッド線があれば，そのうち前から最初のものに揃えます。
  3. それ以外のときは，何も指定しません。
整数 [ ID名 ]
  1. 前から数えて 整数 番目のグリッド線に揃えます。
  2. 負の整数値のときは，逆に最後から数えて | 整数 |　番目のグリッド線に揃えます。
  3. ID名 を指定した場合，その ID名 を持つグリッド線のみを数えて，前から 整数 番目のグリッド線に揃えます。
  4. とくに，その ID名 を持つグリッド線がない場合には，整数の正負によって最初か最後のグリッド線に揃えます。
  5. また，指定した数のグリッド線がない場合には，整数の正負によって最後か最初のグリッド線に揃えます。
  6. 整数 に "1" を指定するとこれを省略した上の欄の場合と同様になります。
span [ 整数 [ ID名 ] ]
  1. 整数 を指定した場合は，このグリッド領域の列終了端から数えて，前へ 整数 番目のグリッド線に揃えます。
  2. ID名 を指定した場合は，その ID名 を持つグリッド線のみをこのグリッド領域の列［行］終了端から数えて，前へ 整数 番目のグリッド線に揃えます。
  3. とくに，その ID名 を持つグリッド線がない場合には，ID名 の指定は無視されます。
  4. 指定した数のグリッド線がない場合には，数える方向で最後のグリッド線に揃えます。
  5. 整数 を省略すると既定値の "1" になります。　また，"0" や負の値は指定できません。
auto このプロパティでは，auto は " 1 " と同様に扱います。

■ 使用例（ grid-auto-position プロパティの利用）

現在準備中です。

■ 備考

【参考ページ】