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タグを用意してあげなければなりません。
|
1 2 3 4 5 |
<div class="ui grid"> <div class="four wide column"></div> <div class="four wide column">display1</div> <div class="four wide column">display2</div> </div> |
逆に言うと、少し書き方がイケてないですが上記コードを書いてあげるだけでoffsetを表現できます。
いつになるか分かりませんが、Fomantic UIにoffsetが追加されるまでは上記のような形で実装してあげましょう。
もちろん、自力でoffsetを表すCSSを組んでも実装が可能です。
終わりに
Fomantic UIのグリッドシステムでColumnのoffsetを設定したいときどのようにすれば良いのかについてご紹介いたしました。