I am putting together a series of boxes with lists in them of variable lengths. The boxes are all the same width, but of varying heights. I would like to have the boxes populate on the top of the screen from left to right across the screen forming columns, with the number of columns dictated by the width of the screen. The problem that I am having is vertical gaps in the columns when the boxes wrap around. Please view the following pages with your browser at 850-1150px wide so that the content appears in 2 columns.
Using float:left I got this result
I found an example of another way to do it using display:inline-block; vertical-align:top; which looks better, but still has some vertical gaps.
The complete css code that I'm currently using on the page is as follows:
div {
display:inline-block;
vertical-align:top;
padding:15px;
border:2px;
border-color:#000;
border-style:solid;
width:400px;
}
with the content being a bunch of <div>CONTENT HERE</div> boxes.
Thank you in advance for any help, it's much appreciated.
Solution using Masonry: Go to the masonry site masonry.desandro.com (listed above by nevermind in the comments), and download the "masonry.pkgd.min.js" production file. In the header of the page where you want the grid to work, reference the masonry file. In the body of the page, create an outer div container using the "Initialize with HTML" code snippet from the above site. Within that block, have div containers of the class "item" (or whatever the itemSelector is set to). Please note that you cannot format (at least that I can tell) the div class="item" so if you want to have a box around your content like I did, you will need a 3rd div within the floating div to perform that formatting.