3

I have some sections that naturally flow one below the other on a mobile device. As screen size increases I want to be able to create a more interesting layout where some content is side by side in two columns. The natural flow of the sections in each column should not be bound to the sections in the other column. The height of the first section in the first column does not constrain/influence the height of the first section in the second column. This is key.

I imagine being able to say something like: on medium width screen sizes, sections 1, 4, and 5 will go into column 1, and sections 2, 3, and 6 will go into column two. Or whatever the ordering ends up being...

Consider the following diagram, that shows how I might want to order the sections on mobile vs desktop.

diagram of desired layout

I’ve tried to create this using a flexbox container, by setting the width of the flex items to form columns. And using flexbox order to re-position the sections. Letting the items wrap to form new rows. The problem: with rows there is a relationship between the start/end of the items in either column. And that disturbs the layout (unless your content is perfectly shaped/sized) as shown in the next diagram.

diagram of problem

The same type of problem seems to occur when using CSS grid. At first I thought css grid would be a promising angle because you can assign multiple elements to be displayed in the same cell. But this seems to be for displaying pieces of content atop one another, not so they can resume their regular flow of stacking inside said cell. (Although I haven’t prototyped this example yet. Is this the answer?)

Because of their row/col behavior, I’m afraid neither flexbox nor CSS grid will do the trick.

A backup is to use some JavaScript, where I can manipulate the DOM to just divide the sections into separate containers and order them based on window resize events. But I’d really like to solve this issue using just CSS—if possible.

Jesse van der Pluijm
  • 703
  • 1
  • 7
  • 20
  • its entirely possible.show what you have done so far.i have done it with both flex and grid. – ino Aug 17 '20 at 15:12
  • Does this answer your question? [CSS-only masonry layout](https://stackoverflow.com/questions/44377343/css-only-masonry-layout) – FluffyKitten Aug 17 '20 at 15:13
  • Or using Bootstrap card columns if you prefer [Bootstrap 4 masonry layout utilizing flexbox grid](https://stackoverflow.com/questions/48468140/bootstrap-4-masonry-layout-utilizing-flexbox-grid) – FluffyKitten Aug 17 '20 at 15:14
  • Did you try using `grid-template-areas`? Checkout this article on using grid. It should do exactly what you want it to. [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/) – Dan Mullin Aug 17 '20 at 15:16
  • @DanMullin template areas is a way to group cells into named areas, it doesn’t get around the fact that a grid still has rows. It allows you to create a layout close to what I want... but not as easily. Content doesn’t just flow by the same rules as regular. – Jesse van der Pluijm Aug 17 '20 at 15:24
  • @FluffyKitten that’s a great resource. But I don’t think it contains the exact scenario that I need (unless if you count the option to use JS). – Jesse van der Pluijm Aug 17 '20 at 15:34
  • @FluffyKitten bootstraps cars-column utility relies on the `column` properties. The problem here is that you can’t control the order. And content will first fill up the first column, then the next – Jesse van der Pluijm Aug 17 '20 at 15:47
  • The only working resource that I found is detailed here: https://tobiasahlin.com/blog/masonry-with-css/ – gbalduzzi Aug 17 '20 at 15:56
  • @gbalduzzi great resource. Unfortunately not for my exact use-case. But still very useful for others. – Jesse van der Pluijm Aug 18 '20 at 17:03

0 Answers0