CSS-only masonry layout

0 votes

I need to implement a masonry layout. However, for a number of reasons I don't want to use JavaScript to do it.

A grid of multiple columns of rectangles of varying height.

Parameters:

  • All elements have the same width
  • Elements have a height that cannot be calculated server side (an image plus various amounts of text)
  • I can live with a fixed number of columns if I have to

The problem with that solution is that elements are ordered in columns:

Starting from the top leftmost box, they're numbered 1 through 4 straight down, the topmost box in the next column is 5, and so on.

While I need the elements to be ordered in rows, at least approximately:

Starting from the top leftmost box, they're numbered 1 through 6 straight across, but because box 5 is the shortest the box underneath it is 7 as it has the appearance of being on a row higher than the next box on the far left.

Approaches I've tried that don't work:

  • Making items display: inline-block: wastes vertical space.
  • Making items float: left:

Now I could change the server-side rendering and reorder the items by dividing the number of items by the number of columns, but that's complicated, and error-prone (based on how browsers decide to split the item list into columns), so I'd like to avoid it if possible.

Is there some flexbox magic that makes this possible?

Aug 3 in CSS by Edureka
• 9,940 points
12 views

1 answer to this question.

0 votes

A masonry feature is included in CSS Grid Layout Level 3.

The code will look like this:

grid-template-rows: masonry
grid-template-columns: masonry
answered Aug 8 by Tanishqa
• 700 points

Related Questions In CSS

0 votes
1 answer

Is there any way to colorize a white PNG image with CSS only?

Filters can be used with -webkit-filter and ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
79 views
0 votes
1 answer

How to build a special polygon (a kite shape) with HTML & CSS only?

I made two divs, one for Arc ...READ MORE

answered May 28 in CSS by Edureka
• 9,540 points
80 views
0 votes
1 answer

How to hide image broken Icon using only CSS/HTML?

Because CSS/HTML has no means of knowing ...READ MORE

answered May 31 in CSS by Edureka
• 9,540 points
19 views
0 votes
1 answer

X close button only using css

You can use the ISO code with ...READ MORE

answered Jun 21 in CSS by Edureka
• 9,540 points
28 views
0 votes
1 answer

Why vh works and % doesn't? (height css)

The height of an element, by default, ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
54 views
0 votes
1 answer

Flex wrap and overflow on both column and row

Here's a workaround, but it comes with ...READ MORE

answered Jun 13 in CSS by Edureka
• 9,540 points
106 views
0 votes
1 answer

Controlling the amount of space in justify-content: space-between

The justify-content property positions flex items on ...READ MORE

answered Jun 28 in CSS by Edureka
• 9,540 points
22 views
0 votes
0 answers

CSS NoWrap on Text

I have a card with a bunch ...READ MORE

Jul 4 in CSS by Edureka
• 9,940 points
12 views
0 votes
1 answer

How do I specify row heights in CSS Grid layout?

Apparently, the auto value on the grid-template-rows property does exactly what ...READ MORE

answered Aug 4 in CSS by Tanishqa
• 700 points
23 views
0 votes
1 answer

What is the meaning of "cascading' in CSS??

Cascading simply implies that it may be ...READ MORE

answered Aug 3 in CSS by Tanishqa
• 700 points
14 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP