I've experimented with both CSS Grid and CSS Flex to try and achieve this layout, but haven't been successful in fully accomplishing it.
What I Need:
Within a container, I have multiple items that need to be aligned vertically either at the top, center, or bottom. The top items should be at the top, center items in the middle, and bottom items at the bottom of the parent container.
These items are dynamic, meaning there could be any number of them, and each item can have any vertical position (top, center, bottom).
The user is only required to add the items in order: first the top items, then the center items, and finally the bottom items.
https://i.sstatic.net/giAhe.png
<div class="parent">
<div class="child top"> Item 1</div>
<div class="child top"> Item 2</div>
<div class="child center"> Item 3</div>
<div class="child center">Item 4</div>
<div class="child bottom"> Item 5</div>
<div class="child bottom"> Item 6</div>
</div>
</div>