Fomantic UIのグリッドシステムでColumnのoffsetを設定したいとき

Fomantic UIのグリッドシステムでColumnのoffsetを設定したいときどのようにすれば良いのかについてご紹介いたします。



Fomantic UIのグリッドシステムでColumnのoffsetを設定したいとき

結論を書くと、Vue.jsのVuetifyのように、classに追加すべきoffsetを表すCSSはFomantic UIには存在しません。

この記事を執筆しているのが2022年の5月16日ですが、2019年ごろにoffsetを表すclassに関してのプルリクが発行されていてまだソースコードがコミットされていないようです。
https://github.com/fomantic/Fomantic-UI/issues/1211

現状、columnにoffsetをつけたいときは、上記のプルリクの内容の通り、空のdivタグを用意してあげなければなりません。

逆に言うと、少し書き方がイケてないですが上記コードを書いてあげるだけでoffsetを表現できます。

いつになるか分かりませんが、Fomantic UIにoffsetが追加されるまでは上記のような形で実装してあげましょう。
もちろん、自力でoffsetを表すCSSを組んでも実装が可能です。

終わりに

Fomantic UIのグリッドシステムでColumnのoffsetを設定したいときどのようにすれば良いのかについてご紹介いたしました。

最後までお読みいただきありがとうございます。
ブログやTwitterでのシェアOKです。
コメントもお待ちしております。
誤植や勘違いなどございましたらコメント欄にて教えていただけると幸いです。

Youtubeチャンネル開設いたしました。
よろしければチャンネル登録お願いいたします。
https://www.youtube.com/channel/UC219XhmSRxmXltTy6COxSMw