Susy のギャラリー ツールを使用して要素をグリッド形式で表示しています。Angular は、ユーザーの選択に応じて、その場でこれらのグリッド要素を非表示または表示します。Angular がグリッド内の要素を非表示にすると、 のクラスがアタッチng-hideされます。これにより、CSS が に設定されdisplay:none !importantます。
問題は、Susy が各要素の位置を計算し、設定された項目を考慮していないことdisplay:noneです。これらの要素が非表示になっていると、グリッドにギャップが生じます。
非表示の要素を配置するときに Susy に非表示の要素を無視させることはできますか?
CSS セレクターを使用してみましたが:not()、成功しませんでした。レイアウトにはまだギャップがあります。
.results__result:not(.ng-hide) {
@include gallery(3 of 12);
}