-2

I am trying to create a main sidebar content layout, with an unknown amout of row items. The width defination is 2fr main and 1fr for sidebar. The initial setup looks as following:

Codepen: base layout

However the problem now is the whitespace that is created. So after searching I found grid-auto-flow: dense; which states to fill empty spaces. The result of this leads to:

Codepen: grid-auto-flow dense

Although this removes the empty spaces it now "stretches" the rows, to fit the content next to it, which is not what is wanted.

So what wichcraft is needed to fix it so there is no empty space but the child elements fit the height content and to create a continues main / sidebar?

Paulie_D
  • 107,962
  • 13
  • 142
  • 161
MKroeders
  • 7,562
  • 4
  • 24
  • 39

1 Answers1

0

As Temani said add:

.area{align-items: flex-start;}

The vertical space between the items is normal because of the different amounts of content in either the left or right side.

Jacob
  • 192
  • 1
  • 19
  • So there is no way to make it a "continues" left vs right. It is possible what is want with a container wrappers, but am trying to avoid that – MKroeders Aug 03 '20 at 13:18