CODEWITHSUNDEEP
htmlcssgrid-layout
Chris
Chris

Reputation: 1037

Adaptive grid layout with cells of different height

I have a grid with cells that are generated like so:

 <style>   
.calWrapper{
 width:200px;
 float:left;
}
</style>
<div class="container">
<?php for($i=1; $i<=12; $i++){
            echo "<div class='calWrapper'><h3 id='cal-$i-label'></h3>";
            echo "<div class='calendar' id='cal-$i'>Loading...</div>";
            echo "</div>";
    }?>

After the page loads, a bunch of AJAX requests are made that fill the .calendar divs are filled with, surprise, calendars! They lay themselves out in a nice grid with a varied number of columns based on how wide it is. However, when each month is a different height I end up with this mess: calendar mess

I know I can arrange them into a grid with display: table, display:table-row and display:table-cell, however because the number of cells per row change depending on the width of the viewport, there is no clearly defined 'row'. Basically, I need the answer to this question, but without using display:table-*.

I have tried explicitly setting the height of the calWrapper div, however on a small month it leaves an insane amount of white space and on a large month it is incomparable with the fact that the events displayed on that month make the calendar arbitrarily large.

Upvotes: 0

Views: 527

Answers (1)

LOTUSMS
LOTUSMS

Reputation: 10240

At first I was going to suggest Bootstrap, but I am not sure how far you are into your site architecture, so instead, use the basic principles of Bootstrap class="row"but instead of using display:table use display:inline-block That way you can still have the dynamic height you need and avoid this wrapping issue.

I would define the amount of calendars you are going to have per row (4 in this case) and class that row with a class="row" and give it this css.

.row {
    width:100%;
    display: inline-block;
    margin:20px auto;
    clear:both;
 }

See the DEMO

Upvotes: 1

Related Questions