0

I am making a recipe app and I would like the recipe tiles to display one under another with no extra space (think Pinterest). Currently my recipes display along the same top line on each row, regardless of the height.

Here is my current CSS code:

.recipe {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0,0,0,.2);
  display: block;
  margin-bottom: auto;
  max-height: fit-content;
}

.recipe-container {
  display: grid;
  grid-gap: 20px;
  align-content: flex-start;
  flex-wrap: wrap;
}

Which outputs this: Recipe List Displayed

I have tried using grid-template-columns/rows: masonry; to no avail. Additionally, I have tried using flex-row, assigning a min or max height, as well as defined dimensions, but none of those gave the result that I have been looking for.

Thanks for any help on this.

Nathan Miller
  • 1
  • 1
  • This is called [masonry layout](//google.com/search?q=site:stackoverflow.com+css+masonry&tbm=isch). See [CSS-only masonry layout](/q/44377343/4642212), and the [documentation](//developer.mozilla.org/en/docs/Web/CSS/CSS_grid_layout/Masonry_layout). – Sebastian Simon May 30 '23 at 18:23

0 Answers0