Semantic UI Doc ( Collections - Grid ) を読む

Semantic UI の Grid を読んだ。グリッドにテーマはない。

グリッドはサイトのレイアウトを格子状に整理して並べるのに利用する。CSS の技術としては Flexbox を使っており、グリッドのセル同士の余白は padding を利用して空けている。また、セルの持つ余白がグリッド上下左右の余白に影響を及ぼさないように、グリッドは周囲に負のマージンを持っている。

よくあるのは 12 列のグリッドだが、Semantic UI のデフォルトのテーマでは 16 列を採用している。テーマ変数をの値を操作することでこの列数は変更可能。

セル同士の余白を padding でとっているため、グリッドのセルに内側の余白をもたせたい場合は 1 つ HTML 要素をネストしなければいけない。

<div class="ui three column grid">
  <div class="column">
    <div class="ui segment"> <!-- セルの内側に余白をもたせたい場合は、要素を追加してその要素に余白を持たせる -->
      <img>
    </div>
  </div>
   ...
</div>

グリッドはネストしたり、色つけたり、境界線をつけたりすることができる。

equal width を使えば行内を均等に分割した幅のセルがつくれる。このとき、子要素に当たる列の幅指定はいらない。

<div class="ui equal width grid">
  <div class="column"></div> <!-- 1 行を 3 等分した幅になる -->
  <div class="column"></div>
  <div class="column"></div>
  <div class="equal width row"> <!-- 行を指定したので、ここで改行 -->
    <div class="column"></div> <!-- 1 行を 2 等分した幅になる -->
    <div class="column"></div>
  </div>
</div>

グリッドの中身を中央に配置することもできるし、セルをそれぞれ左右の端に配置することもできる。

グリッドをレスポンシブに動作するが、固定幅で表示することもできる。

ここで書いたことの詳細は Grid (Definition) のページにまとまっている。