CODEWITHSUNDEEP
javascriptcssgrid
singular
singular

Reputation: 55

Need help removing vertical space with divs in a grid

I am working on a fluid grid section which displays events. I have media queries to adjust the size of the divs based on screen resolution. If all of the divs are the same height, it looks great. However, if they divs are different in height, the vertical space between them looks bad. I was wondering if there was a way to fix it. Not sure it can be done with css alone. Might need some javascript. I am attaching two images: one of what it looks like and one of what I want it to look like. HTML code is below.

<style>
body {
    background-color:#dedede;
    margin:0;
    font-family:Verdana, Geneva, sans-serif;
    font-size:11px; 
}
#pagewrap {
    width: 100%;
    margin: 10px auto;
}
.box {
    box-sizing:border-box;
    padding:10px;
    margin:6px;
    max-width:220px;
    border:solid 1px #ccc;
    background-color:#fff;
    float:left;
}
@media screen and (max-width: 1200px) {
    .box {
        width:19%;
        margin:.5%;
    }
} 
@media screen and (max-width: 980px) {
    .box {
        width:23.75%;
        margin:.5%
    }
}
@media screen and (max-width: 650px) {
    .box {
        width:31%;
        margin:1%;
    }
}
@media screen and (max-width: 565px) {
    .box {
        width:46%;
        margin:2%;
    }
}
@media screen and (max-width: 360px) {
    .box {
        width:90%;
    }
}
</style>
</head>
<body>
<div id="pagewrap"> 
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultricesneque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus  posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus  Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdumneque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
<div class="box">Fusce ut sem est. In eu sagittis felis. In gravida arcu ut neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus rutrum non malesuada metus fermentum. Vestibulum neque ornare vitae rutrum turpis vehicula. Nunc ultrices sem mollis metus ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque interdum rutrum quam, a pharetra est pulvinar ac.</div>
</div>
</body>

What it currently looks like: what it looks like
(source: asingularcreation.com)

What I want it to look like: what I want it to look like
(source: asingularcreation.com)

Thanks for your help!

Upvotes: 0

Views: 62

Answers (2)

singular
singular

Reputation: 55

This is the solution that I found and works great.

jQuery(document).ready(function($) {
    var CollManag = (function() {
        var $ctCollContainer = $('#pagewrap'),
        collCnt = 1,
        init = function() {
            changeColCnt();
            initEvents();
            initPlugins();
        },
        changeColCnt = function() {
            var w_w = $(window).width();
            if( w_w <= 360 ) n = 1;
            else if( w_w <= 565 ) n = 2;
            else if( w_w <= 720 ) n = 3;
            else if( w_w <= 980 ) n = 4;
            else n = 5;
        },
        initEvents = function() {
            $(window).on( 'smartresize.CollManag', function( event ) {
                changeColCnt();
            });
         },
         initPlugins = function() {
            $ctCollContainer.imagesLoaded( function(){
                $ctCollContainer.masonry({
                    itemSelector : '.box',
                    columnWidth : function( containerWidth ) {
                        return containerWidth / n;
                    },
                    isAnimated : true,
                    animationOptions: {
                        duration: 400
                    }
                });
            });
            $ctCollContainer.colladjust();
            $ctCollContainer.find('div.box-multi').collslider();
        };
        return { init: init };
    })();
    CollManag.init();
 });

Upvotes: 0

plalx
plalx

Reputation: 43718

If you plan to support only modern browsers, you could use CSS3 multi-column layouts.

DEMO: http://jsfiddle.net/Vr4Dh/

#pagewrap {
    width: 100%;
    margin: 10px auto;
    -webkit-column-width: 220px;
    -moz-column-width: 220px; 
    column-width: 220px; 
}
.box {
    box-sizing:border-box;
    padding:10px;
    margin:6px;
    max-width:220px;
    border:solid 1px #ccc;
    background-color:#fff;
    display: inline-block;
    vertical-align: top;
}

However for a cross-browser solution there's the Vanilla Masonry Library if you are not using jQuery, or the Masonry jQuery plugin. Both does what you are looking for.

Upvotes: 1

Related Questions