Need CSS help to create a container for a list of items (requirements below)

Hi all~ I've been trying to create a 2-column list container and am curious if anyone could come up a CSS solution for this. Requirements are to create a 2-column list container component that is given an object like this: { recipeCategory: "Breakfast", recipeTitleList: ["Avocado Toast", "Egg and Ham"] // alphabetically sorted startingPage: 1 } the output of this is the first picture added. let's look at a different example: { recipeCategory: "Breakfast", recipeTitleList: ["Avocado Toast", "Egg and Ham", ..... 13 other recipes] // alphabetically sorted startingPage: 1 } the output is the second picture added. The tricky things here are: - we want a two-column layout, right justified - if all items can fit in one column, only show one column and still be right justified - if items need two columns to all fit, the items need still need to be in order and reading from left to right Is this possible?
No description
No description
3 Replies
Dazani
Dazani5w ago
Things I've already tried: - CSS columns with the following rules for the container: column-count: 2; column-fill: "auto"; direction: "rtl"; this creates the desired output, except for when the container splits the items into two columns, it looks like this:
No description
Dazani
Dazani5w ago
I've also already tried CSS grid: display: "grid"; grid-template-columns: 2; this splits the items like this:
No description
ChooKing
ChooKing5w ago
Use a flex container for the larger scale layout with justify-content:space-between. For the items with prices, make a container that is a grid and use grid-auto-flow: column.