一直在尝试使用 CSS 创建一个非常简单的照片画廊网格，而不是使用像 masonry 这样的插件。我尝试了列、网格系统等——都失败了，而且非常复杂。
到目前为止，我拥有的是 3-Div，每个 Div 都有一个网格的#ID，所以 div-1 有#Grid1，div-2 有#Grid2，div-3 有#Grid3。网格是 display:inline-block ，因此它们彼此相邻浮动。这就像一个魅力！
但是，在小屏幕上 - 我只想显示 2 个网格，所以我将 Div 的大小从 33% 更改为 50% 以仅显示两个 div - 这导致在 #Grid1 的中心底部显示 #Grid3 & #网格2。
我试图通过将#Grid3 的宽度设置为 100% 并将其中的元素或部分设置为 50% 来解决这个问题。该排序有效，但它生成了如下图所示的空白：
有没有什么办法解决这一问题？或者当屏幕尺寸较小时，删除#Grid3 并将其内容传播到#Grid1 和2 中呢？有任何想法吗？
这是HTML：
<div class="wrapperA1">
<div class="content">
<div id="home-sectionD">
<div id="grid1"><!--Gird 1-->
<article class="testimonial">
<img alt="Neal Kilburne" src="assets/images/neal kilburne.jpg"/>
<div>
<h3>Neal Kilburne</h3>
<p><em>CEO, iTEQ Global www.iteqglobal.com</em></p>
<br>
<p>“Loai is a great asset to our company and provides us with great and quick responses,Such a talented designer which we have the honour of working with.” 2011 - 2012</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Amanda Chui</h3>
<p><em>Owner of www.beautyroom.ca</em></p>
<br>
<p>Just what my website needed! When I had finished my website, I felt that it was missing something,so I enlisted in the help of Loai. He did a great job of giving my website the professional and polished look it needed without having me wait for days on end. Thanks, Loai!” June 23, 2012</p>
</div>
</article>
</div><div id="grid2"><!--Gird 2-->
<article class="testimonial">
<img alt="Geeta Martinez" src="assets/images/geeta martinez.jpg"/>
<div>
<h3>Geeta Martinez</h3>
<p><em>Lawyer & Business Consultant</em></p>
<br>
<p>"Leo did a great job! He designed and put together several websites for me in less than a week. He was incredibly patient and flexible throughout the whole process, and took a lot of the stress out of the whole situation for me. He is a really nice guy to work with - I really appreciated his approach! I would definitely recommend working with him". July 14, 2013</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Richard Jackson</h3>
<p><em>Photographer www.rjpstudios.co.uk</em></p>
<br>
<p>“Loai designed my website last year on wix though I could have done it myself loai added a proffesional touch to the design which is so important in creating the best first impeson.” 2013</p>
</div>
</article>
</div><div id="grid3"><!--Gird 3-->
<article class="testimonial">
<img alt="Glen Eric Huysamer" src="assets/images/glen eric huysamer.jpg"/>
<div>
<h3>Glen Eric Huysamer</h3>
<p><em>Specialist Service Provider.</em></p>
<br>
<p>“I would like to take this opportunity to warn people who might consider using Loai Design Studio. You will have to buckle up and strap yourself in as this young designer and associates take you through the process of creating your design needs. I was pleasantly surprised from start to finish, and can say that even though Loai took control of the creative process the end result felt like it was mine. You can not go wrong with this young lad, go ahead surprise yourself”. December 30, 2011</p>
</div>
</article>
<article class="testimonial">
<div>
<h3>Richard Jackson</h3>
<p><em>Photographer www.rjpstudios.co.uk</em></p>
<br>
<p>“Loai designed my website last year on wix though I could have done it myself loai added a proffesional touch to the design which is so important in creating the best first impeson.” 2013</p>
</div>
</article>
</div>
</div>
</div>
</div>
CSS：
/*Home Page SectionD---*/
#home-sectionD #grid1,
#home-sectionD #grid2,
#home-sectionD #grid3 {
display: inline-block;
vertical-align: top;
width: 33.33%;
margin-left: -4px;
}
.testimonial {
background-color: #FFFFFF;
border: 1px solid #3e5679;
margin: 0 7px 15px 7px;
-webkit-transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-ms-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
transition: all 0.4s ease;
}
.testimonial img {
border-bottom: 1px dashed #3e5679;
width: 100%;
padding: 2px;
}
.testimonial div {
padding: 20px;
}
.testimonial h3{
color: #456087;
}
.testimonial p:first-of-type{
color: #8C9CB5;
}