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?
{
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?
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time π.
36,263Members
Resources
Similar Threads
Was this page helpful?
