CODEWITHSUNDEEP
htmlcssjavascript
mark-rodgers
mark-rodgers

Reputation: 61

CSS and JS to render columns with multiple components in different heights

I'm trying to figure out how I style this block of code to get a result like the graphic below. I plan to use media queries and make it responsive, which is simple enough but I can't figure out how to render the images in columns but with different heights. I can't seem to wrap my head around how this would be accomplished. Rendering images in DOM order left-to-right, top-to-bottom.

enter image description here

<div><img src="1.jpg" /></div>
<div><img src="2.jpg" /></div>
<div><img src="3.jpg" /></div>
<div><img src="4.jpg" /></div>
<div><img src="5.jpg" /></div>
<div><img src="6.jpg" /></div>
<div><img src="7.jpg" /></div>
<div><img src="8.jpg" /></div>
<div><img src="9.jpg" /></div>
<div><img src="10.jpg" /></div>
<div><img src="11.jpg" /></div>
<div><img src="12.jpg" /></div>

Upvotes: 2

Views: 2218

Answers (1)

Radius K.
Radius K.

Reputation: 11

This type of layout is called Masonry or sometimes called as Pinterest Grid. It's easy to do using Flexbox for top-bottom ordering.

.container { display: flex; flex-direction: column; flex-flow: wrap; }

Doing it from left-right, however, is more difficult. You will have to use Javascript to reorder or do the ordering in CSS one element at a time.

Example: https://codepen.io/collection/nLPmVa/

Upvotes: 1

Related Questions