masonryとmagnific popupで相対指定のギャラリーをつくりたい

masonry でギャラリーを作っています。
先日、こちらで教えてもらった事、
”magnific popupでフィルター毎のスライドショーを表示させたい”
と、ほとんど変わらないのですが、
あれからmasonryのカラム幅を固定から相対指定に変えました所、また詰まってしまいました。

（前回の質問はこちらです。）
https://teratail.com/questions/89354

現状こんな感じでフィルターの部分のjQueryが、できていません。

html
1<!DOCTYPE html>
2<html >
3<head>
4  <meta charset="UTF-8">
5  <title>Masonry - gutter</title>
6    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
7    <style type="text/css">
8	.grid {
9		max-width:900px;
10			margin:0 auto;
11		}
12		.grid .grid-block  { 
13		  width: 32%; 
14		  margin-bottom: 10px;
15
16		}
17		.grid .grid-sizer { 
18			width: 32%; 
19		}
20		.grid .gutter-sizer { 
21			width: 2%; 
22		}
23		.grid-block  img{
24			width:100%;
25			max-width:300px;
26		}
27		* {
28		  -webkit-box-sizing: border-box;
29			 -moz-box-sizing: border-box;
30				  box-sizing: border-box;
31		}
32		@media only screen and (max-width: 630px) {
33		.grid {
34		}
35		.grid .grid-block  { 
36		  width: 49%; 
37		  margin-bottom: 5px;
38		}
39		.grid .grid-sizer { width: 49%; }
40		.grid .gutter-sizer { width: 2%; }
41
42		body {	width:100%;
43			  margin:0 auto;
44		}
45	</style>  
46</head>
47<body class="menu category-all">
48<div class="category-btn">
49    <div><a href="" class="all is-current">All</a></div>
50    <div><a href="" class="a">a</a></div>
51    <div><a href="" class="b">b</a></div>
52    <div><a href="" class="c">c</a></div>
53    <div><a href="" class="d">d</a></div>	
54</div>
55
56<div class="grid">
57	<div class="grid-sizer"></div>
58	<div class="gutter-sizer"></div>
59    <div class="grid-block item-all item-a" href="https://placehold.jp/3d4070/ffffff/150x150.png?text=a.jpg">
60        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=a" width="100%" alt="a01">
61    </div>
62    <div class="grid-block item-all item-b" href="https://placehold.jp/3d4070/ffffff/150x150.png?text=b.jpg">
63        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=b" width="100%" alt="b01">
64    </div>
65    <div class="grid-block item-all item-c" href="https://placehold.jp/3d4070/ffffff/150x150.png?text=c.jpg">
66        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=c" width="100%" alt="c01">
67    </div>
68    <div class="grid-block item-all item-a" href="https://placehold.jp/3d4070/ffffff/150x150.png?text=d.jpg">
69        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=d" width="100%" alt="a02">
70    </div>
71    <div class="grid-block item-all item-b" href="https://placehold.jp/3d4070/ffffff/150x150.png?text=e.jpg">
72        <img src="https://placehold.jp/3d4070/ffffff/150x150.png?text=e" width="100%" alt="b02">
73    </div>	
74</div>
75	
76<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
77<script src='https://unpkg.com/masonry-layout@3/dist/masonry.pkgd.js'></script>
78<script src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
79<script>
80$(window).load(function(){
81  $('.grid').masonry({
82    columnWidth: '.grid-sizer',
83    gutter: '.gutter-sizer',
84    itemSelector: '.grid-block '
85  });
86}); 
87</script>
88<script>
89    jQuery(function($){
90        $('.grid').magnificPopup({
91            delegate: 'div', 
92            type: 'image',
93            gallery: {  
94            enabled:true
95            }
96        });
97    });
98</script>
99</body>
100</html>
101

前回教えていただきました解決策(下記)のcolumnWidthを相対表示なので".sizer"に変えて
記述してみたのですが上手くいきませんでした。

java
1<script>
2    $(function () {
3        var categoryBtn = $(".category-btn").find("a");
4
5        function findActiveElement(selected) {
6            return selected === "a" ? "div.item-a" : selected === "b" ? "div.item-b" : selected === "c" ? "div.item-c" : "div.item-all";
7        }
8
9        categoryBtn.each(function () {
10            $(this).on("click", function (e) {
11                var selected = $(this).attr("class");
12                e.preventDefault();
13                categoryBtn.removeClass("is-current");
14                $(this).addClass("is-current");
15                $("body").removeClass(function (index, className) {
16                    return (className.match(/\bcategory-\S+/g) || []).join(" ");
17                }).addClass("category-" + selected);
18                $(".grid").masonry({
19                    itemSelector: ".grid-block",
20                    columnWidth:".sizer",
21                }).magnificPopup({
22                    delegate: findActiveElement(selected),
23                    type: "image",
24                    gallery: {
25                        enabled: true
26                    }
27                });
28            });
29        });
30
31        $(".grid").masonry({
32            itemSelector: ".grid-block",
33            columnWidth: ".sizer",
34        }).magnificPopup({
35            delegate: "div",
36            type: "image",
37            gallery: {
38                enabled: true
39            }
40        });
41		
42
43
44		
45    });
46</script>