Grid の width の について

grid-cols.md

|---| |---| |---| |---| |---| |---| |---| |---| |---| |---| |---| |---|
|---| |---| |---| |---| |---| |---| |---| |---| |---| |---| |---| |---|
|---| |---| |---| |---| |---| |---| |---| |---| |---| |---| |---| |---|

のような Grid の 横幅算出の アルゴリズムについて

全体の横幅を T (100%)、カラムの間の Gap を Ｇ、gridの分割数を、S とする。

カラムの横幅を C{n} とし、C{1} が一つ分、 C{S} = T である。

C{1}
|---|


C{2}
|---| |---|

カラム幅 n のときの 横幅について。

カラム幅 n のときの 横幅 C{n} は、 C{1} を用いて

C{n} = n * C{1} + ( n - 1 ) * G

と書ける。

T = S * C{1} + (S - 1) * G // ex. S = 12 であれば、12 * C{1} + 11 * g
  = S * C{1} + S * G - G

なので、これを、C{1} について解くと、

C{1} = (T + G)/S + G

ここで、C{n} = n * C{1} + ( n - 1 ) * G なので、

C{n} = n * C{1} + n * G - G
     = n * ( C{1} + G ) - G

C{1} を代入して、

C{n} = n * ( ( T + G )/S + G - G ) - G
     = n * ( ( T + G )/S ) - G

より、

C{n} =  n * ( T + G ) / S - G
C{n} =  n/S * ( T + G ) - G

これ、100% + gap
とすると、Gutter と Col の数がちょうどになって、ちゃんと 割り切れるのね。しましまになるというか。
これを、6/12 とかで、4/12 とか書けると、横幅 6 とか 4 とかに Gap が1つ分余計についた数が出るのよ。なので、最後に Gap 1個引けばという。

数式でごり押ししたのだいーぶ頭固い・・・・