Is there a way to align divs as a grid with different height and width?

Asked May 08 '19 at 15:07

Active May 08 '19 at 18:35

Viewed 34 times

I'm trying to align some div elements with pure css, but the problem is that those elements can have different heights and widths.

I've already tried to use tables and grid but I can't figure out the right way to do it.

This is the output I want when there are 8 div in the following order

<div style="height: 2;width:2;"></div>
<div style="height: 1;width:2;"></div>
<div style="height: 2;width:2;"></div>
<div style="height: 2;width:3;"></div>
<div style="height: 2;width:2;"></div>
<div style="height: 1;width:3;"></div>
<div style="height: 1;width:2;"></div>
<div style="height: 1;width:4;"></div>

I'm new here so I cant post images, but here is the link for the expected output https://i.stack.imgur.com/xzGm2.jpg . I'm wondering if that is even possible with css3.

[Edit] : I'm looking for Masonry behavior but with pure css and with different width and heights, that's because I want to use this in a IMG to HTML converter project

edited May 08 '19 at 18:35

asked May 08 '19 at 15:07

Gabriel Donadel Dall'Agnol

Not sure what you're asking for, but [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) might be the answer – freefaller May 08 '19 at 15:09
are you looking for a [Masonry](https://masonry.desandro.com/) behaviour? – Lu Chinke May 08 '19 at 15:09
Yes, just as Masonry behaviour – Gabriel Donadel Dall'Agnol May 08 '19 at 15:10
I don't that is a duplicated question as that link that I refer only works with javascript or with only one dimension at time. – Gabriel Donadel Dall'Agnol May 21 '19 at 19:40

Is there a way to align divs as a grid with different height and width?

0 Answers0