1cec0ld
KPCKevin Powell - Community
•Created by 1cec0ld on 1/4/2024 in #front-end
CSS for variable length list to create new columns at a max count
I have a site that is fetching a list of items. That list can be 0, or up to 20 items, rarely more, the most I've seen is 42. I'm trying to organize them into a div such that if there are more than 10 items in the column, it starts a second column. At 20 items, it would start a third column.
To further complicate things, each item consists of 3 "pieces" (ID, Description, Flag) that I'd like to align with the others in that column.
I just saw Kevin's video on Flex versus Grid and thought I had an idea, but using
<div style="display: flex; flex-direction: column; max-height: 100px;"> just shrunk my items. (This will be moved into class/css file after testing). It also didn't contribute to the 3-piece alignment. I can't find anything like a Max-Count or Max-Children. His note at the end indicated flex-direction:column is a warning sign to look at Grid instead, but all the Grid examples I find insert the children horizontally with 1 & 2 on the top row before going downward. Is there a grid-direction equivalent? I have 2 YOE but CSS isn't my strength, and after seeing that video I'm hoping someone here has some insight to guide me.
Thanks in advance!9 replies