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?
3 Replies
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:
I've also already tried CSS grid:
display: "grid";
grid-template-columns: 2;
this splits the items like this:
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.