Create Grids using Div's to make fluid gallery of images

Question

Been attempting to create a very simple photo gallery grid using CSS and not using plugins like masonry. I tried columns, grid systems etc - all failed and was very complex.

What I have so far is 3-Div's and each Div has an #ID of Grid, so div-1 has #Grid1, div-2 has #Grid2 and div-3 has #Grid3. The Grids are display:inline-block so they float next to each other. This worked like a charm!

However, on small screens - I want to only show 2 Grids, so I have changed the size of the Div's to 50% from being 33% to show only two divs - this led to display #Grid3 in the center bottom of #Grid1 & #Grid2.

I tried to solve this problem, by making the width of #Grid3 100% and the elements or sections inside it to 50%. that sorta worked, but it generated a white-spaces like it shown in the image below:

Is there anyway to fix this? or what about remove the #Grid3 and spread it content in #Grid1 and 2 when screen size is small? Any ideas?

Here is the 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 &amp; 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>

The 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;
}   

Answer 1

Try applying a fix height on your boxes. That's the only way to force it to avoid those whitespaces.

Answer 2

make all grid divs display block and float left

#home-sectionD #grid1,
#home-sectionD #grid2,
#home-sectionD #grid3 {
    display: block;
    float:left
    vertical-align: top;
    width: 200px;
    height:300px; 

}