I am dealing with a grid layout where cells are dynamically generated using the following code:
<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>";
}?>
Once the page loads, AJAX requests populate the .calendar divs with calendars. These calendars automatically adjust to fit into a grid layout based on the available space. However, I encounter issues when each month has a different height, causing some overlap in the grid:
While I am aware that I can use CSS properties like display: table, display:table-row, and display:table-cell to structure the grid, the challenge lies in the varying number of cells per row due to responsive design. Essentially, I need a solution similar to what is discussed in this question, but without relying on display:table-*.
Attempts to manually set the height of the calWrapper div have been unsuccessful as it results in either excessive white space for smaller months or distortion for larger months with more events displayed.