1

I am creating a new page layout with 3 columns. I want my contents,consisting of several different elements, to fill the available height of the first column and then wrap to the next column and so forth. The user can add elements as needed.

I am using Angular 7 with Flex-Layout. I had a look at https://tburleson-layouts-demos.firebaseapp.com/#/docs but none of those is similar to my problem.

I also looked at: - flow 2 columns of text automatically with CSS - Make grid container fill columns not rows

to no avail.

Css column layout splits my content in 3 columns equally. It does not fill the first column before wrapping.

I would like it to fill the first column then the second and lastly the 3rd. It doesn't matter if this can be achieved with flex or with Css Grid/Columns

Memphis335
  • 265
  • 1
  • 13
  • Check out the `grid-auto-flow` property of CSS Grid. Here's a good primer: https://css-tricks.com/snippets/css/complete-guide-grid/ – Sean Apr 06 '19 at 15:32
  • @sean thanks. I tried it. The content does not wrap. See [here](https://ibb.co/FBqXMNk) – Memphis335 Apr 06 '19 at 16:11

1 Answers1

2

I managed to solve it.

These two lines of css on the parent div:

column-count: 3; column-fill: auto;

All child elements now auto fill the column first then wrap

Memphis335
  • 265
  • 1
  • 13