砌筑留下了很多空间

Question

我试图使用砌体，但它似乎并不好用。它留下了很多空的空间。 as you can see here 我已经尝试过各种其他方法来实施砌体，但是这个方法对结果的影响最大。有人可以帮这位新秀吗？

这里我认为HTML / CSS / JAVASCRIPT

非常重要

＆＃13;

＆＃13;

<script src="masonry-docs/js/masonry.pkgd.min.js"></script>

<script type="text/javascript">// Javascript
var container = document.querySelector('#masonry-grid');
var msnry = new Masonry( container, {
  // options
  columnWidth: 33%,
  itemSelector: '.grid-item'
});</script>

＆＃13;

.grid-item{width: 33%;}
.grid-item--width2{width: 33%;}
.grid-item--width3{width: 33%;}

*{box-sizing:border-box;}
.box-sizing:border-box;

.grid:after {
  content: '';
  display: block;
  clear: both;
}

.grid-item {
  width: 33%;
  float: left;
  border: 5px solid #FFFFFF;
}

.grid-sizer,
.grid-item {
  width: 33%;
}

＆＃13;

<section id="werk">
	<div class="container">
	<div class="grid">
	<div class="item">
		<div id="masonry-grid">

			<div class="grid-item">
				<h3>Manifesta 10</h3>
				<span class="category">huisstijl</span>
				<img src="images/manifesta.jpg" alt="" />
			</div>
		
			<div class="item">
			<div class="grid-item grid-item--width2">
				<h3>Deutsche Grammophon</h3>
				<span class="category">platenhoezen</span>
				<img src="images/GIF_1.gif" alt="" />
			</div>
			</div>
          			<div class="item">
			<div class="grid-item grid-item--width3">
				<h3>Ghent Art Book Fair</h3>
				<span class="category">poster</span>
				<img src="images/boekposter.png" alt="" />
			</div>
			</div>

			<div class="item">
			<div class="grid-item">
				<h3>teaser masterproef</h3>
				<span class="category">foto</span>
				<img src="images/masterproef.png" alt="" />
			</div>
			</div>

			<div class="item">
			<div class="grid-item grid-item--width2">
				<h3>Mundaneum</h3>
				<span class="category">publicatie</span>
				<img src="images/Mundaneum.gif" alt="" />
			</div>
			</div>
          
        </div>
    </div>
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

h3 元素有一个边距，将其添加为CSS代码的开头：

h3 { margin: 0px; }

您的 .grid-item 的边框为5px，请在CSS代码中进行更改：

.grid-item {
  width: 33%;
  float: left;
  border: 0px solid #FFFFFF;
}