0
私はMasonryグリッド内にアイテムを集中させようとしています。私は、グリッド自体をセンタリングすることに関して、かなりの数の関連記事を読み、試しましたが、項目については何も働いていませんでした。石工センターのアイテム
私がこれまで試したどのような：
- が
- が
- を追加しようとしたコンテナの上に
margin 0 autoを追加しようとしましたfitwidthオプションを削除/追加/削除側溝 - を追加/削除容器の幅。
私はあなたが見ることができるように問題
$(document).ready(function() {
var $container = $(".grid");
$container.masonry({
// options
itemSelector: '.grid-item',
columnWidth: '.grid-sizer',
gutter: 20,
fitWidth: true,
});
$container.imagesLoaded(function() {
$container.css({
opacity: 0,
visibility: "visible"
}).animate({
opacity: 1.0
}, 300);
//$container.show();
$container.masonry('layout');
});
});body {
display: flex;
flex-direction: column;
}
.wrapper {
width: 1260px;
border: solid 2px red;
}
.grid {
max-width: 1260px;
width: 100%;
margin: 0 auto;
border: 1px solid #f2f2f2;
overflow: hidden;
padding: 0 0 2em;
visibility: hidden;
background: rgba(0, 255, 0, .1);
}
.grid-item,
.grid-sizer {
display: block;
padding: 1.5em;
margin: 0 0 1.5em;
background: #fff;
width: 23%;
}<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<body>
<main id="content" class="content" role="main">
<div class="wrapper">
<section class="grid">
<div class="grid-sizer"></div>
<article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
<p>hey there how ya doin' today ?
</p>
</article>
<article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
<p>Hello world !</p>
</article>
<article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
<p>hey there how ya doin' today ?
</p>
</article>
<article class="grid-item" itemtype="http://schema.org/BlogPosting" role="article">
<p>Hello world !</p>
</article>
</section>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.2.1.min.js">
</script>
<script src="https://unpkg.com/[email protected]/dist/masonry.pkgd.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
var $container = $(".grid");
$container.masonry({
// options
itemSelector: '.grid-item',
columnWidth: 400,
fitWidth: true,
});
$container.imagesLoaded(function() {
$container.css({
opacity: 0,
visibility: "visible"
}).animate({
opacity: 1.0
}, 300);
//$container.show();
$container.masonry('layout');
});
});
</script>
</body>を表現するスニペットを作成した、緑のセクションでは、左側にある小さな緑のスペースがあるが、そこ最後の1人と右側の間には多くのスペースがあります。 どうすれば平等なスペースを持つことができますか？私は何かが分かっていないと確信していますが、私は何かを見つけることができません。