前回書かせていただきました、こちらの記事について
https://qiita.com/Rinatamu/items/3ea2032b7fd1a6a49234
Grid Position の値について、ちょっとわかりづらい部分があったので、以下のように再度検証しました。
その結果わかったことを備忘録的にまとめたいと思います
0 という値の意味
ここでいう 0 は、0番地という考えではなく、未設定 という意味なのではないかというのが私の見解です。
つまりは、何もいじらない。入力されたその部分は何も制御配下のものではないですよ、という意味での 0 という値なのかなと思いました。
実際に Start 位置を 0 にした場合、そこの位置にアンカリング(固定される)わけではなく、End で指定した値に従ってただ移動するだけです。
そのため、コンテナを形を変えずに移動させたいという場合には、Start もしくは End 側を「未設定」、つまりアンカリングしないという設定にする必要があります。
1~ の意味
逆に1以上の値を入れた場合は、その場所にアンカーした上で、Start と End でどれぐらいの「差」があるのかで計算されます。
Start 0 End 1 の場合
例えば、Start を 0 、End を 1 とした場合、指定した Rows もしくは Columns の 1番目の部分にアンカリングされるため、このようになります。
Start 1 End 1 の場合
Start を 1 、End を両方 1 とした場合、スタート位置が 1 、終了位置 が 1 となり、差が0であるため、何も変わりません。
Start 1 End 2 の場合
Start を 1 、End を 2 とした場合、End 位置 から Start 位置 を引くため、1 なることから、差が1つ分なため、結局何も変わらずにこのような表示となります。
Start 1 End 3 の場合
Start を 1 、End を 3 とした場合、End 位置 から Start 位置 を引くため、差が 2 なることから、横幅(もしくは縦幅、もしくは両方)が右、下方向に増加するため、1つ分大きくなります。
Start 2 End 2 の場合
Start を 2、End を 2 とした場合、Start 位置が2個目の部分となり、そこと同じ位置が終了位置となるためこのようになります。
Start 3 End 1の場合
Start を 3、End を 1 とした場合、Start 位置が3個目の部分となり、終了位置が 1つ目の位置となるため、Columns であれば左方向、Rows であれば上方向に拡張されます。
右 or 下寄せ、にしたいときは End を小さく
右寄せ、下寄せにしたい場合は、このようにむしろ End を小さく、Start を大きくする必要があります。
まとめ
というわけで、 グリッドコンテナーの Grid Position についてもうちょっと踏み込んで検証してみました。
最初はちょっと混乱するかもしれませんが、いろいろ試してみると、何となく「ああ、そんな感じなんだ」ぐらいの感覚になると思いますので、ぜひいろいろ数値をいじって試してみてください。








