0

I want to have responsive layout with different column heights. Namely I want to have two columns, first containing 2 components, second containing a single component. When the screen size is big (For example Npx) the columns should be displayed as two separate columns. When the screen is small (For example smaller than Npx) then they should be displayed as a single column like this: enter image description here

I've done this by using flex-box columns, by specifying the wrap columns with order and specifying the parent height in pixels but I don't want to specify the height in pixels, I want it to be general enough to contain components of any size.

Any ideas how to do that?

Mamuka Sakhelashvili
  • 136
  • 2
  • 10

1 Answers1

0

What you are looking for is named Masonry Grid. That is not possible to do with flexbox. But there is an solution with grid. That attribute is supported in actual browsers now. Maybe you like to have a look here:

CSS-only masonry layout

Support for grid: https://caniuse.com/?search=grid

Brebber
  • 2,986
  • 2
  • 9
  • 19