0

I have the following layout inside a parent element of a specific height say 700px for example which compromises of a column with a multiple of 4. Depending on how many items it must look like the following:

4 Items

This should be the layout if the items are >= 1 and <= 4

enter image description here

8 Items

This should be the layout if the items are >= 5 and <= 8

enter image description here

12 Items

This should be the layout if the items are >= 9 and <= 12

enter image description here

16 Items

This should be the layout if the items are >= 13 and <= 16

enter image description here

I'm pretty much clueless on how to approach this as this is a complex grid structure, I was wondering if anyone here can create a CSS with this kind of layout. The minimum item is 1 and the maximum is 16. I tried checking the resources for flexbox but I think for flexbox we either have the default behavior which displays horizontally and using flex-direction: column displays vertically. Can we have both behavior where-in by default it displays vertically, and when it reaches the max of 4 columns, display the next in a row format while remained center aligned to its parent? Hope CSS gurus can help me on this.

The Bassman
  • 2,241
  • 5
  • 26
  • 38
  • 1
    fourth snippet here: https://stackoverflow.com/a/44092580/8620333 – Temani Afif Nov 11 '20 at 23:31
  • @TemaniAfif thanks for this, the only problem I have is how do I center this based on the parent? If I have 1 col, center the 1 col but I have 3, the center should be on col 2. How do I do that? – The Bassman Nov 12 '20 at 01:07
  • 1
    .parent{ display: flex; justify-content: center; align-items: center;} That's how you center themen. – Mark Bean Nov 12 '20 at 04:06

0 Answers0