レスポンシブ CSS グリッドと石積みを使用しています。css グリッドの余白は .wrapper のサイズによって変化するため、css ファイルでガターの値を設定し、jquery で値を取得できるかどうか疑問に思っていました
石積みjs
jQuery(document).ready(function($){
var $container = $('.wrapper');
//get the value from .gutter in css file
var $gutter = parseInt($('.gutter').css('margin'), 10);
$container.imagesLoaded( function(){
$container.masonry({
itemSelector : '.container',
singleMode:true,
isAnimated:true,
gutterWidth: gutter
});
});
});
CSS:
@media only screen and (min-width:1200px) {
.gutter {margin:20px}
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
.gutter {margin:10px}
}