セマンティックUIグリッド：私は行あたりの列の「奇数」番号のセマンティックUIグリッドを有する

Question

行ごとに異なるカウントを有するグリッドにスパニングカラム：

<div class="ui grid"> 
    <div class="seven column row"> 
     <div class="column">ABC</div> 
     <div class="column">DEF</div> 
     <div class="column">GHI</div> 
     <div class="column">JKL</div> 
     <div class="column">MNO</div> 
     <div class="column">PQR</div> 
    </div> 

I希望2つの非標準サイズの列（最後の2つ）にまたがる「PQR」セル。

「2列幅」を使用すると機能しません。

誰でもこの方法を教えてもらえますか？

Answer 1

セマンティックUIはデフォルトで16列のグリッドを使用します。 theming variablesを調整して、ウェブアプリの目的に合わせてこれを変更することができます。

これを回避したくない場合は、16列のうち14列しか使用せず、グリッドのcenter alignを使用して、左右両方のスペースを均等にすることができます。

例：https://jsfiddle.net/batrasoe/nnpxgmaq/

<div class="ui center aligned grid"> 
    <div class="row"> 
     <div class="two wide column">ABC</div> 
     <div class="two wide column">DEF</div> 
     <div class="two wide column">GHI</div> 
     <div class="two wide column">JKL</div> 
     <div class="two wide column">MNO</div> 
     <div class="four wide column">PQR</div> 
     </div> 
    </div> 

これは<div class="seven column row">ようなものを使用した2 + 2 + 2 + 2 + 2 + 4 = 14列

を使用する列に等しい幅を与えます。これはあなたのtwo wide columnがうまくいかない理由です - グリッドの幅の2/16の列を作成することによって等幅プロパティと競合するためです。