Ensuring that the columns are floated to the left without large gaps between rows is my current challenge.
Here's the HTML structure I'm working with:
<div class="row hide-for-small">
<div ng-repeat="module in modules">
<div class="medium-6 large-4 columns">
<div class="modBoxContainer">
<div class="modBox">
<div class="modHeading">
<h1><span class="modNumber">{{ module.part }}</span> {{ module.title }}</h1>
</div>
<ul>
<li ng-repeat="section in module.sections">
<a ng-href="#/education/{{ module.url }}/{{section.number}}/01"><strong>Part {{ section.number | number:0 }}: </strong>{{ section.title }}</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
In terms of CSS, I'm utilizing a standard columnar layout similar to Foundation. The issue arises when the columns have varying heights, as shown in the screenshot. I've attempted using nth-child on .modBox and .modBoxContainer, but sometimes it doesn't recognize the nth-child rule when used with :nth-child(n+something)...
How can I set one height for the first three columns and a different height for the remaining ones? I've experimented with height: auto, height: 100%, along with min-height or just height rules specified individually.
Unfortunately, I'm unable to recreate much of the code on platforms like JSFiddle due to the size of the project. Any suggestions would be greatly appreciated as I'm running out of ideas.
View the screenshot of the problem here: https://i.sstatic.net/8dqaL.png