How to arrange <li> items like Tumblr's UI? [duplicate] - css

Question

This question already has answers here:
CSS-only masonry layout
(4 answers)
Closed 1 year ago.
My posts are currently arranged like this:
.
HTML looks like this:
<div class="center">
<ul>
<li>
<p>[User] posted: [content] at [date] (likes: [likes]) </p>
<button>like</button>
<button>dislike</button>
</li>
</ul>
</div>
Here's the css:
.center {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
min-height: 100vh;
}
li {
width: 20%;
display: inline-block;
list-style-type: none;
align-items: center;
align-content: center;
line-break: strict;
margin: 10px;
border-radius: 7px;
}
li p {
margin: 20px;
overflow-wrap: break-word;
}
Inspired by tumblr's design, how do I make it look more like this?

Answer 1

Considering how you re-ordered elements between your current result and the desired layout, CSS columns seem to be exactly what you're after.
For that to work, you column-containing element (which I assume is your ul) needs a limited height. Given you have applied a (min-)height, use this:
ul { columns: 4; column-gap: 20px; }
The kind of layout you're after is commonly called masonry layout. CSS already has a specification achieving this (see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Masonry_Layout) but so far Firefox is the only browser that has support for it behind a flag. If you want to enable this experimental support, go to about:config in Firefox, and set layout.css.grid-template-masonry-value.enabled to true.
If you want to try that out, use
ul {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: masonry;
gap: 20px;
}
Also compare https://caniuse.com/mdn-css_properties_masonry and https://caniuse.com/mdn-css_properties_grid-template-rows_masonry.