Javascriptで可変サイズの要素を使用した動的グリッドレイアウト

Question

これは頻繁な質問かもしれないが、私は答えを見つける運がなかった。

可変サイズの要素が不明なグリッドに対して、3列の応答レイアウトを作成する必要があります。それらのサイズは、グリッド内で最大3x3に制限されています。

ここでの問題は、1行のアイテムをスタックできるようにする必要があることです。しかし、試したすべてのプラグインは、カラムの前に行を埋め尽くしてしまいます。

例えば、ここにgridstack.jsを使用してソリューションです：

<div class="grid-stack grid-stack-3"> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: red;">1</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: green;">2</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: green;">3</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: red;">4</div> 
    </div> 
</div> 

var options = { 
    cell_height: 267, 
    vertical_margin: 26, 
    width: 3 
}; 
$('.grid-stack').gridstack(options); 

あなたが画像で見ることができるように、彼らが必要として、緑の要素が積層されていません。それらを積層有すること

、Iは（予想レイアウトである）、これにつながる、div要素3及び4を交換する必要があります。

残念ながら、アイテムが外部サービスから受信されているので、私は彼らの順序を制御することはできません（と私は予想レイアウトがされるのかを知ることができないとして、それは無意味だろう）。

は、私はそれが写真の例を修正することを意味し、同位体のfitColumnモードと少し運を持っていましたが、5番目の要素を追加すると4列目を作成し、私はそれらのちょうど3を持っていることを強制しています、私は本当にそれを使用することはできません。ここで

は（この1つは私がするように頼まれてきたもののサンプルです）私が実装する必要がテストレイアウトのHTMLです：

<div class="grid-stack grid-stack-3"> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: red;">1</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: green;">2</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: red;">4</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: green;">3</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="2" data-gs-height="3" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: blue;">5</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="2" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: red;">6</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: green;">7</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="2" data-gs-height="1" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: yellow;">8</div> 
    </div> 
    <div class="grid-stack-item" data-gs-width="1" data-gs-height="1" data-gs-auto-position="1"> 
    <div class="grid-stack-item-content" style="background: green;">9</div> 
    </div> 
</div> 

誰かができますjavascriptのソリューション上の任意のアイデアを持っています私はそのようなレイアウトを構築する（1列モードのサポートも必要です）。私はオプションが不足しているので、私はjavascriptで経験したことがないので、私はこのタスクのためのカスタムソリューションを書くことを避けたいと思います。

Answer 1

ほとんどのブラウザでになっているので、grid layoutをご覧ください。 Grid by Exampleサイトとvideo playlistが役に立ちます。 CSS-Tricksには、articleという素晴らしい機能もあります。