CSS3: grid-column-start プロパティ - グリッド領域の列開始端のグリッド線の指定

■ 概要

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

■ 解説

grid-column-start プロパティ は，グリッド領域の列開始端のグリッド線 を指定します。

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

値説　　明
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 グリッド・コンテナの子要素の配置に関して何も指定しません。

■ 使用例（ grid-column-start プロパティの利用）

現在準備中です。

■ 備考

【参考ページ】