Gridstack.js: パーセンテージではなくピクセルに基づいて固定幅のグリッドを作成します。

@cblokkerこれを行う方法を理解したことがありますか？ また、パーセンテージではなくピクセルに基づいて幅を実装する方法も検討しています。 私は正しい場所にスナップすることさえしません。 大幅にずれているようです。

これは私に悲しみを引き起こしている機能です：

    GridStack.prototype.cellWidth = function() {
        return Math.round(this.container.outerWidth() / this.opts.width);
    };

ピクセルベースの幅の場合、ピクセル単位で列を定義するcssとともに、this.opts.widthのみを返すこの関数が必要です。

どのモデル（％またはpx）であるかを判断するために、gridstackにいくつかのスマートが必要になるか、どのモードであるかを指示する構成オプションがあると思います。

編集：それはそれほど単純ではないかもしれません。 私は今それを見て遊んでいます。

編集2：私の5分の修正。 少なくともまだ、それに応答するフローはありません。
差分：サポート-pixelwidth

4K画面でのグリッドの表示に問題があるため、これを気に入っていただければ、Webページの幅を広くしたい場合があります。その場合は、サイズがほぼ半分になる新しいグリッドを設定してから、サイズを変更する必要があります。他の人が使用する解像度までのページの幅が狭すぎます。

私もこの機能がgridstackでサポートされていることを望んでいます

ここでも同じですが、グリッドスタックでそれを確認したいと思います。

それまでの間、単純なユースケース（1行、disabledOneColumnMode、height = 1）でハックすることができました。
すべてのタイルの幅を100pxに強制するには（私のタイルはすべてwidth = 1なので、どの幅でも難しいことではありません）：
CSSで
$tile-width: 100px; /*100px*/ .grid-stack-item[data-gs-width="1"] { width: $tile-width; min-width: $tile-width; max-width: $tile-width; } .grid-stack-item { <strong i="9">@for</strong> $i from 1 through 20 { &[data-gs-x='#{$i}'] { left: $i * $tile-width; } } }
コンストラクタ：
const width = $('.grid-stack').outerWidth(); this.grid = $('.grid-stack').gridstack({ auto: false, cellHeight: 80, disableResize: true, verticalMargin: 0, width: Math.round(width/100), height: 1, disableOneColumnMode: true }).data('gridstack');
サイズ変更ハンドラーで幅をリセットします
resizeHandler() { const width = $('.grid-stack').outerWidth(); const grid = $('.grid-stack').data('gridstack'); grid.setGridWidth(Math.round(width/100), true); }
ハックは、現在のグリッド幅（px）に基づいて幅（列数）を調整することにより、cellWidthを（CSSで設定されているように）100pxに強制することです。

cellHeightを任意に設定でき、コンテナを作成してオプションをグリッドスタックに渡す前に、Javascriptを使用してディメンションを決定できます。 このようにして、必要な比率を設定したり、特定のピクセルベースの幅と高さを設定したりすることもできます。