Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

[HELP] Repeating Section with Multi-Column Layout

1518466635
Finderski
Pro
Sheet Author
Compendium Curator
Is it possible to have a multi-column layout for a repeating section?  I'm looking for a two-column layout and, ideally, after column 1 has x number of items, then have column 2 created and start filling that.  Would be really awesome is if I could have a set of static items be a part of this...so like I have a number of skills that can be shown/hidden based on the user's configuration and once a certain number of skills have been selected, then column 2 is displayed and starts to fill up. Is this possible?  Am I making any sense?
1518468638
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
On mobile atm, but, short answer is yes. There are a couple methods I could see using for this. Css grid. Grid is my new favorite layout method. It can do a ton. Css flex. Flex doesn't have to go left to right, it can go top to bottom and then wrapto the right.
1518489683
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
There is also css columns, although I haven't figured out using it yet.
1518540444
Finderski
Pro
Sheet Author
Compendium Curator
That Grid thing seems promising and it works. Thanks for pointing that out. :)
1518545058
Scott C.
Forum Champion
Sheet Author
API Scripter
Compendium Curator
Np, I'm kinda addicted to it :)
1518546687

Edited 1518546701
Lithl
Pro
Sheet Author
API Scripter
Consider this from the Exalted 2e sheet: .repcontainer[data-groupname=repeating_intimacies] .repitem { display: inline-block; width: calc(50% - 20px); } .repcontainer[data-groupname=repeating_intimacies] .repitem:nth-child(even) { margin-left: 40px; } For the "Intimacies" repeating section, each item is an inline-block instead of a block, and the width is less than half the width of its container. Every other item (ultimately, the ones in the right column in this case) has a margin to space them apart.
1518566248
Finderski
Pro
Sheet Author
Compendium Curator
Thanks Brian, I knew there was a way to do it, but couldn't find the examples. :-/ In the meantime, I've been messing around with flex boxes, and think I kind of like those more than grids.  Pretty cool stuff.
1518591149
Jakob
Sheet Author
API Scripter
Flexbox is superior to inline-box for layout, and in particular it can do the kind of column-first layout you want to do, while inline-box cannot. Flexbox is awesome, and it 2018 you should use it, or grid, for layout.