セマンティックUIスタック可能なグリッド - 空白を使用する/積み重ね可能なグリッドの実際の幅を動的に取得する

Question

多分、これは必要以上に複雑にしているかもしれません。おそらくそれは不可能ですが...理想的には空白がある私はそれを利用したいと思います。

セマンティックUIのスタッカブルグリッドを使用しています。例のスクリーンショットでブラウザ幅を少し広くすると、別の「ポスト」が右側に表示され、3つの列が表示されます。完璧！

私はそれが一定量の上にいた場合、私はそのスペースに小項目を表示できるように、動的に「未使用領域」を計算する方法があるかどうかを知りたいです。
ユーザーがブラウザを少し広くした場合、右側にもう1つの投稿が表示され、3つの列が作成され、小さな項目が消えます。

正しい方向のポイントは素晴らしいですが、私は動的に列の数を計算することができるので、ウィンドウの幅と比較して合計幅を計算できますか？あなたがこれを達成すると考えることができる他の方法？

おかげで、Lezlea

私のサイトはベータテスト中です：http://fishtag.world/

http://www.lezlea.co.uk/fishtag/todelete/whitespace.png

Answer 1

スタッカブルグリッドは、利用可能なスペースにまたがるあなたの列を維持する必要がありますし、小さな画面上では、すべて100％にすべきである（https://jsfiddle.net/ryan_whitlie/2sLw5bon/ ）、しかし、画面サイズを小さくする前にあなたがラップしているようです。あなたはおそらくいくつかのマージンをカラムに適用していますか？

あなたが求めていることを達成するには、そのセクションを2つの列に分割することをお勧めします。左側は全幅の75％、右側は25％です。左側に「投稿」、右側にあなたの他のコンテンツを表示します。画面サイズが特定のサイズになったときにその後、右の列を非表示にして唯一のCSSメディアクエリ使用してあなたの記事を表示：これは、任意の画面/デバイスと上幅とshow（display: block;）の2つの列が適用されます

@media(min-width: 600px) { 
    .posts { 
     width: 75%; 
    } 
    .aside { 
     width: 25%; 
     display: block; 
    } 
} 

を幅600px以上。

は、ここでは作業バージョンをチェックアウトし、 https://jsfiddle.net/ryan_whitlie/cg9p3kuw/