0

My posts are currently arranged like this: 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? this

connexo
  • 53,704
  • 14
  • 91
  • 128
iyouns
  • 1
  • 2
  • 2
    Search for `masonry layout css` in your searchengine of choice. Alternatively, use CSS columns. e.g. for the element containing your blocks, `columns: 4; column-gap: 20px;`. – connexo Mar 17 '21 at 01:09
  • It all boils down to using columns that contain rows, rather than rows that contain columns. And yes, the masonry layout is a piece of good advice. – Adriano Mar 17 '21 at 01:15
  • @Adriano Actually, that layout does not have any rows. It has columns containing elements. When you compare order of elements in OP's screenshots, CSS columns seems to be exactly what they are looking for. – connexo Mar 17 '21 at 01:16

1 Answers1

0

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.

connexo
  • 53,704
  • 14
  • 91
  • 128