0

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;
}
diplodorkus
  • 170
  • 2
  • 14

1 Answers1

1

Link to JSFiddle

If you add the following to #videoContainer it should work

display: flex;
ddr45
  • 123
  • 9
  • Just tried this and it appeared to work - except it looks like it's not compatible with `column-width` and now the columns don't collapse upon resizing the window... Updated the CSS in the original question to reflect this (it's probably a more important detail than I'd thought) – diplodorkus Jan 29 '18 at 22:28
  • Actually, this did lead me to a solution - I just did away with the columns and switched entirely to a flexbox layout. [Here's](https://codepen.io/klamping/pen/xGZMEm?editors=110) the Codepen that helped me out. – diplodorkus Jan 29 '18 at 23:08