Semantic UI の Grid レイアウトをレスポンシブにしました

Semantic UI で Gird レイアウトのクラスを反映しただけでは、レスポンシブ対応されませんでした。これよく忘れるのでメモします。

Gird レイアウト

Semantic UI の Grid レイアウトは適用するだけではレスポンシブにはなりません。

２カラムレイアウト

<div class="ui grid">
  <div class="eight wide column">
    <a class="ui button" href="#">東京都</a>
  </div>
  <div class="eight wide column">
    <a class="ui button" href="#">神奈川県</a>
  </div>
</div>

上記のような２カラムレイアウトは、モバイルでも２カラムになります。

stackable クラスでレスポンシブ対応

クラスに stackable を追加します。

２カラムレイアウト

<div class="ui　stackable grid">
  <div class="eight wide column">
    <a class="ui button" href="#">東京都</a>
  </div>
  <div class="eight wide column">
    <a class="ui button" href="#">神奈川県</a>
  </div>
</div>

stackable クラスを付与すると自動で Grid がレスポンシブ対応されました😄

参考