I'm working on a two-column layout and need the right column to wrap items that vary in height. I've tried several methods like changing display types, using flexbox direction, adjusting alignment, and setting fixed heights and widths, but nothing seems to work the way I want. Ideally, I want the smaller lists to stack and sometimes have two or more in one column while the larger list stands alone in its column, adapting to different screen sizes. For instance, it should display like this:
`Small list BIG LIST small list`
`Small list ........ small list`
You can check out my current code here: [https://jsfiddle.net/qos0pdn1/11/](https://jsfiddle.net/qos0pdn1/11/). Right now, they're either all in a single row or a single column, rather than flowing beneath each other based on height. The number and length of lists can change, which complicates things further.
5 Answers
Have you looked into using flex-wrap? It could help manage how the items display without needing complicated adjustments. Here's a useful link about it: [MDN flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/flex-wrap). If I had access to my computer, I'd experiment further!
Check out this resource for a masonry layout: [MDN Masonry Layout](https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Grid_layout/Masonry_layout). It might give you some more ideas on how to effectively manage your layout!
If you're dealing with items of different heights, you might want to consider using CSS Grid instead of Flexbox. While Flexbox is great for one-dimensional layouts (either in a row or a column), Grid is better for handling two-column layouts with varying content, giving you more control and predictability. Check out this simple example:
```css
.container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
```
This approach should help with wrapping and alignment issues.
You might find success using the `grid-auto-flow: column` property for this issue. I spent too long trying to force Flexbox to work when I finally switched to Grid for this exact problem. Your second approach with separate column containers might also be the most practical despite seeming less straightforward.
Flexbox won't completely solve your problem since it doesn't account for item heights when wrapping; it only considers row and column order. What you're actually after is more of a masonry layout. Consider using CSS columns with `break-inside: avoid` on the lists for a neat effect. If you need tighter control, you might need to use a JavaScript masonry library instead.
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads