Check this out:
Thanks for the suggestions @stucork . The Column Panel does work but as I can see it lacks the left alignment feature. The reason I wanted the Flow Panel is that if you hide the left most Linear Panel, the other two will re-position themselves to the left, this does not happen with a Column Panel.
I ended up abandoning this idea of using an XY Panel and used a Grid Panel and then programmatically set the position of the panels if one of the panels was hidden. It seems to work pretty well with …
Or @stucork ’s awesome CSS solution
Well that opened up the minefield of css masonry layout…
if you don’t mind vertical ordering
item 0 item 3 item 6
item 1 item 4 item 7
item 2 item 5
then the same approach with this…
.anvil-role-3-cols>div {
column-count: 3;
-webkit-column-count: 3;
column-gap: 3%;
-webkit-column-gap: 3%;
}
.anvil-role-3-cols>div>div {
break-inside: avoid;
-webkit-column-break-inside: avoid;
display: inline-block;
width: 100%;
}
There are a few other ideas in that same thread.
The easiest way I have found is to create a form just the way you want the card to look and then add it programmatically to the container (column panels or flow panels work nicely).
1 Like
