Possible to have elements in two columns and each row not effect height of adjacent row in that column

Asked Jul 14 '20 at 07:17

Active Jul 15 '20 at 08:49

Viewed 36 times

I tried using flexbox and grid, but both cause adjacent rows to increase in height when text wraps.

Ideally I want to keep HTML simple, like this:

<div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>3</div>
 <div>5</div>
</div>

Where I would like the first column to fill up first and then second column.

| 1 | 4 |
| 2 | 5 |
| 3 |   |

I know one solution is to split data into two arrays and have two isolated columns that stack. However, I was wondering if there was a pure CSS solution to have the same desired result?

Update

Code example: https://codepen.io/labithiotis/pen/RwrYJyr

edited Jul 15 '20 at 08:49

asked Jul 14 '20 at 07:17

Labithiotis

3,519
7
27
47

look at css columns or flexbox with column orientation. Show your attempts – Fabrizio Calderan Jul 14 '20 at 07:20
Do you want a layout like [this](https://masonry.desandro.com/)? – Khalil Jul 14 '20 at 07:29
_Tried using flexbox and grid_ : can we see your code? – Sfili_81 Jul 14 '20 at 07:57
css-columns would be the way to go. - https://developer.mozilla.org/en-US/docs/Web/CSS/column-count – Paulie_D Jul 14 '20 at 08:09
@Sfili_81 Added code example: https://codepen.io/labithiotis/pen/RwrYJyr – Labithiotis Jul 15 '20 at 08:51
@FabrizioCalderan Added code example: https://codepen.io/labithiotis/pen/RwrYJyr – Labithiotis Jul 15 '20 at 08:51
@Khalil yer like masonry layout but I am not going to pull in that library and don't want to use JS ideally. – Labithiotis Jul 15 '20 at 08:52
You can use `column-fill: auto` and `column-count: 2` on the parent element to achieve this effect. – Khalil Jul 15 '20 at 10:46
@Khalil nope that doesn't work see codepen https://codepen.io/labithiotis/pen/RwrYJyr and notice line 4 height isn't collapsed. – Labithiotis Jul 15 '20 at 14:09
@Labithiotis Please check this [codepen](https://codepen.io/khalil_ullah/pen/wvMYMba) – Khalil Jul 16 '20 at 04:49
@Khalil I see, it sort of works but I don't want text to wrap to second column. – Labithiotis Jul 16 '20 at 08:14

Possible to have elements in two columns and each row not effect height of adjacent row in that column

0 Answers0