Masonry ヘッダーサイズに合わせて画像を一覧表示する

![イメージ説明]WIDTH:600

Masonryを使用し画像を一覧表示しています。ヘッダーのサイズに合わせて画像を一覧表示させたいのですが、画像のように両サイドが余ってしまいます。
どのようにすればヘッダーにぴったり合わせることができるでしょうか

lang
1* {
2    margin: 0;
3    padding: 0;
4    -webkit-box-sizing: border-box;
5    -moz-box-sizing: border-box;
6    box-sizing: border-box;
7
8}
9
10.pinGridWrapper h1 {
11    font-size: 2.0em;
12    padding: 10px 0 10px 0;
13    text-align: center;
14    max-width: 160em; 
15    margin: 0 auto;
16}
17.pinGrid {
18    width: 103.125%; 
19    overflow: hidden;
20    margin-left: -1.562%; 
21    margin-bottom: -1.875em; 
22}
23.pin {
24    display: inline-block;
25    background: #fff;
26    border-radius: 4px;
27    -webkit-box-shadow: 0 6px 6px -6px #ccc;
28    -moz-box-shadow: 0 6px 6px -6px #ccc;
29    -webkit-column-break-inside: avoid;
30    -moz-column-break-inside: avoid;
31    column-break-inside: avoid;
32
33    max-width: 100%;
34    box-shadow: 0.5px 0.5px 0.5px 0 #8b8b8b;
35
36
37    width: 30.303%; 
38    float: left;
39    margin: 0 1.515% 1.875em;
40}
41.pin img {
42    width: 100%;
43    height: auto;
44    -webkit-border-radius: 10px 10px 0 0;
45    -moz-border-radius: 10px 10px 0 0;
46    border-radius: 4px 4px 0 0;
47}
48
49
50@media only screen and ( max-width: 160em ) 
51{
52    .pin
53    {
54        width: 23.088%; 
55        margin-bottom: 0.938em;
56        margin-right: 0;
57    }
58}
59@media only screen and ( max-width: 70em ) 
60{
61    .pin
62    {
63        width: 31.280%; 
64        margin-bottom: 0.938em;
65        margin-right: 0;
66    }
67}
68@media only screen and ( max-width: 40em ) 
69{
70    .pin
71    {
72        width: 47.786%; 
73        margin-bottom: 0.938em; 
74    }
75}
76@media only screen and ( max-width: 15em ) 
77{
78    .pin
79    {
80        width: 100%;
81        margin-left: 0;
82        margin-right: 0;
83    }
84}
85
86
87
88

lang
1//masonry.js
2$(document).on('ready page:change ', function() {
3    var $container = $('.pinGridWrapper');
4
5    $container.imagesLoaded(function() {
6        $container.masonry({
7            itemSelector: '.pin',
8            isFitWidth: true,
9            reload: true,
10            isAnimated: true,
11
12            animationOptions: {
13                duration: 200,
14                easing: 'swing'
15            }
16        });
17
18    });
19    $(function($) {
20        $('pin').hide();
21        $('pin').each(function(i) {
22            $(this).delay(i * 2).fadeIn(80);//デフォルト1000
23        });
24    });
25});

html.erb

lang
1<div class="pinGridWrapper">
2  <div class="pinGrid">
3    <% @items.each do |item| %><!-- アイテムインデックス start-->
4        <div class="pin">
5          <% if item.picture_1.present? %>
6              <%= link_to(item) { image_tag item.picture_1_url(:thumb),:class =>"index_border_radius" } %>
7
8              <% unless item.infraction %>
9                  <h2 class="palette-paragraph">
10                    <%= item.title %>
11                  </h2>
12              <% else %>
13                  <h4 class="palette-paragraph">
14                    違反アイテム
15                  </h4>
16              <% end %>
17
18
19              <p><small><small>
20                <i class="fa fa-clock-o"></i>
21                <span class="countdown" data-until= "<%= item.limit_day.to_datetime %>" ></span>
22              </small></small></p>
23          <% else %>
24              <%= link_to(item) {image_tag("opps.jpg", :size => '135x135') } %>
25          <% end %>
26        </div>
27    <% end %><!-- アイテムインデックス end -->
28  </div>
29</div>
30
31
32<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
33  <div class="form-group">
34    <div class="pagination">
35      <%= paginate @items %>
36    </div>
37  </div>
38</div>
39

生成されるHTML

lang
1<div class="pinGridWrapper">
2  <div class="pinGrid">
3    <% @items.each do |item| %><!-- アイテムインデックス start-->
4        <div class="pin">
5          <% if item.picture_1.present? %>
6              <%= link_to(item) { image_tag item.picture_1_url(:thumb),:class =>"index_border_radius" } %>
7
8              <% unless item.infraction %>
9                  <h2 class="palette-paragraph">
10                    <%= item.title %>
11                  </h2>
12              <% else %>
13                  <h4 class="palette-paragraph">
14                    違反アイテム
15                  </h4>
16              <% end %>
17
18
19              <p><small><small>
20                <i class="fa fa-clock-o"></i>
21                <span class="countdown" data-until= "<%= item.limit_day.to_datetime %>" ></span>
22              </small></small></p>
23          <% else %>
24              <%= link_to(item) {image_tag("opps.jpg", :size => '135x135') } %>
25          <% end %>
26        </div>
27    <% end %><!-- アイテムインデックス end -->
28  </div>
29</div>
30
31
32<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">
33  <div class="form-group">
34    <div class="pagination">
35      <%= paginate @items %>
36    </div>
37  </div>
38</div>

行動規範の内容に同意します

回答1件

HTMLの構造が見えませんので、大きく外しているかもしれませんが…

とりあえず、HTML構造を想像で組んで試してみました。
![イメージ説明]WIDTH:594
左右の画像は少し断ち切られる形のようですが、隙間は生まれないようです。
※ピンク色＝pinGridWrapper要素
※水色＝pin要素

ちなみにHTMLは以下です。（CSS、JSともほぼご提示のソースを用いています）

lang
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4  <meta charset="utf-8"> 
5  <title>TEST</title>
6  <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.js"></script>
7<style>
8* {
9    margin: 0;
10    padding: 0;
11    -webkit-box-sizing: border-box;
12    -moz-box-sizing: border-box;
13    box-sizing: border-box;
14}
15
16.pinGridWrapper h1 {
17    font-size: 2.0em;
18    padding: 10px 0 10px 0;
19    text-align: center;
20    max-width: 160em; 
21    margin: 0 auto;
22    
23    background-color:#ffa; /* 分かりやすいように着色 */
24}
25.pinGrid {
26    width: 103.125%; 
27    overflow: hidden;
28    margin-left: -1.562%; 
29    margin-bottom: -1.875em; 
30    
31    background-color:#faf; /* 分かりやすいように着色 */
32    
33}
34.pin {
35    display: inline-block;
36    background: #fff;
37    border-radius: 4px;
38    -webkit-box-shadow: 0 6px 6px -6px #ccc;
39    -moz-box-shadow: 0 6px 6px -6px #ccc;
40    -webkit-column-break-inside: avoid;
41    -moz-column-break-inside: avoid;
42    column-break-inside: avoid;
43
44    max-width: 100%;
45    box-shadow: 0.5px 0.5px 0.5px 0 #8b8b8b;
46
47
48    width: 30.303%; 
49    float: left;
50    margin: 0 1.515% 1.875em;
51    
52    
53    background-color:#aff; /* 分かりやすいように着色 */
54}
55.pin img {
56    width: 100%;
57    height: auto;
58    -webkit-border-radius: 10px 10px 0 0;
59    -moz-border-radius: 10px 10px 0 0;
60    border-radius: 4px 4px 0 0;
61}
62
63
64@media only screen and ( max-width: 160em ) 
65{
66    .pin
67    {
68        width: 23.088%; 
69        margin-bottom: 0.938em;
70        margin-right: 0;
71    }
72}
73@media only screen and ( max-width: 70em ) 
74{
75    .pin
76    {
77        width: 31.280%; 
78        margin-bottom: 0.938em;
79        margin-right: 0;
80    }
81}
82@media only screen and ( max-width: 40em ) 
83{
84    .pin
85    {
86        width: 47.786%; 
87        margin-bottom: 0.938em; 
88    }
89}
90@media only screen and ( max-width: 15em ) 
91{
92    .pin
93    {
94        width: 100%;
95        margin-left: 0;
96        margin-right: 0;
97    }
98}
99</style>
100</head>
101<body>
102
103<div class="pinGridWrapper">
104  <h1>H1</h1>
105  <div class='pinGrid'>
106    <div class='pin'><img src='test.gif'></div>
107    <div class='pin'><img src='test.gif'></div>
108    <div class='pin'><img src='test.gif'></div>
109    <div class='pin'><img src='test.gif'></div>
110  </div>
111</div>
112
113
114<script>
115
116
117$(document).on('ready page:change ', function() {
118    var $container = $('.pinGridWrapper');
119
120    $container.imagesLoaded(function() {
121        $container.masonry({
122            itemSelector: '.pin',
123            isFitWidth: true,
124            reload: true,
125            isAnimated: true,
126
127            animationOptions: {
128                duration: 200,
129                easing: 'swing'
130            }
131        });
132
133    });
134    $(function($) {
135        $('pin').hide();
136        $('pin').each(function(i) {
137            $(this).delay(i * 2).fadeIn(80);//デフォルト1000
138        });
139    });
140});</script>
141
142</div>
143</body>
144</html>
145

そちらの問題となるHTMLソースを質問に追記されるとより良い回答が得られるかもしれません。
解決につながる回答になっておらず失礼ながら、何かの参考になりますれば幸いです。

投稿2015/06/27 09:20

noise

総合スコア256

退会済みユーザー

2015/06/27 16:29

確かにjsを外せば綺麗に表示されますね。。

noise

2015/06/27 23:26

コメントありがとうございます。構造はおよそ合っていますか？適当なjqueryと Masonryなど入れても動かなかったので、可能であれば再現するよう添削いただければ何かわかるかもしれません（＾＾） pinGridWrapperあたりに何か変な値が入ってきたりとか、なんとなく怪しく感じています。

退会済みユーザー

2015/06/28 06:20

railsで構築しているので、indexのhtml.erbとレンダリングされたhtmlを追記しました。

noise

2015/06/28 08:46

railsをお使いなのですね。面目ないことに私は不明でして…見る限りHTMLに問題となりそうな箇所が想定できませんでした。まことに申し訳ありません。もし、まだお付き合いいただけるなら、head箇所の読み込んで使用しているjavascriptライブラリやCSSフレームワークの情報がいただければ、サンプルのHTMLを組んで検証できるかもしれません。ちなみに、JSライブラリが動かなかった時のサンプルHTMLのheadは以下のとおりです。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.js"></script> 良い解答がつくことをお祈り申し上げます。

退会済みユーザー

2015/06/28 11:14

お付き合いいただきありがとう御座いました。 cssのみで実装するためのコードを流用しているので、jsと組み合わせることで問題が起きているんだと思います。

noise

2015/06/28 11:20

私も同感です。原因に少しでも前に進めていれば幸いですが… お力になれず、すみませんでした。

行動規範の内容に同意します