I have a 3-column layout which I want populated with a variable number of videos (usually a multiple of 3). I'd like the videos to distribute themselves across the columns in such a way that each column is of equal height.
This isn't a problem if I'm using 6, 9 or 12 as the number of videos, but if I set it to 3, the columns don't distribute correctly, like this:
Column 1 | Column 2 | Column 3
[video 1] [video 3]
[video 2]
Where it should be:
Column 1 | Column 2 | Column 3
[video 1] [video 2] [video 3]
Is this something I should be using a table for instead? I've had trouble with them in the past, which is why I opted for columns in this instance, but now I've hit a bit of a wall... I'm currently using column-width to keep things responsive-friendly, I'm not sure how exactly that would work in a table layout.
My HTML is something like this:
<div id="videoContainer">
<iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
<iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
<iframe src="https://www.youtube.com/embed/ScMzIvxBSi4"></iframe>
</div>
With CSS like this:
#videoContainer {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-width: 300px;
-moz-column-width: 300px;
column-width: 300px;
}