Posted at

Semantic UI 苦労したとこメモ


Grid


wide column

Grid の中で N wide column と幅を変えた div を設置できる (https://semantic-ui.com/collections/grid.html#columns) が、これは常に 16分割 (正確には、設定した 分割数、default は 16) を基準とした数の N 倍となる

以下、分割数が default の16のままの場合の例を示す

<div class="ui grid">

<div class="column"></div><!-- 1/16 サイズ -->
<div class="column"></div><!-- 1/16 サイズ -->
<div class="two wide column"></div><!-- 2/16 サイズ -->
<div class="four wide column"></div><!-- 4/16 サイズ -->

<div class="eight wide column"></div><!-- 8/16 サイズ -->
</div>

eight column grid のように column 数(Mとする)を変えたときに、たとえば two wide column としても、分母は M にならず、16 である

<div class="ui eight column grid">

<div class="column"></div><!-- 1/8 サイズ -->
<div class="column"></div><!-- 1/8 サイズ -->
<div class="two wide column"></div><!-- 2/16 サイズ -->
<div class="four wide column"></div><!-- 4/16 サイズ -->
</div>

eight column row のように column 数を変えた row を作っても同じ

<div class="ui grid">

<div class="eight column row">
<div class="column"></div><!-- 1/8 サイズ -->
<div class="column"></div><!-- 1/8 サイズ -->
<div class="two wide column"></div><!-- 2/16 サイズ -->
<div class="four wide column"></div><!-- 4/16 サイズ -->
</div>
</div>

仕方ないので 16 を基準にして倍数を設定した。なお、M column 時に 1/16 のサイズを作るには one wide column とする

<div class="ui eight column grid">

<div class="column"></div><!-- 1/8 サイズ -->
<div class="column"></div><!-- 1/8 サイズ -->
<div class="two wide column"></div><!-- 2/16 サイズ -->
<div class="four wide column"></div><!-- 4/16 サイズ -->

<div class="one wide column"></div><!-- 1/16 サイズ -->

<div class="five wide column"></div><!-- 5/16 サイズ -->
</div>

(間違ってたらコメントお願いします)