-1

I have many card-like elements all with the same width but differing heights that I want to show like this picture enter image description here

How could I achieve this using styling?

Makazau
  • 615
  • 7
  • 17
  • 1
    There's many ways. What you are describing is called "masonry layout". The current "hot" way of doing it is "flexbox masonry". – Iskandar Reza Jun 07 '19 at 17:44
  • ony styling CSS alone won't be enough, you can google something like Masonry layout and have a look, this is a quite common lib you can start out with https://masonry.desandro.com/layout.html – Duc Hong Jun 07 '19 at 17:45

1 Answers1

1

CSS has property called columns, it offers you display element content in column layout, you can use it to achieve what you described.

<div>
    <img src="http://via.placeholder.com/100x60">
    <img src="http://via.placeholder.com/100x80">
    <img src="http://via.placeholder.com/100x100">
    <img src="http://via.placeholder.com/100x120">
    <img src="http://via.placeholder.com/100x140">
    <img src="http://via.placeholder.com/100x160">
    <img src="http://via.placeholder.com/100x180">
    <img src="http://via.placeholder.com/100x200">
</div>

css:

div {
   columns: 100px auto;
}

Fiddle: https://jsfiddle.net/x6bdft9u/

https://developer.mozilla.org/en-US/docs/Web/CSS/columns

it has been duplicate while I was answering, sorry

Code Warrior
  • 52
  • 3