KP-C

Kevin Powell - Community•2y ago•

13 replies

merecido

How to style multiple lists like a single table?

Hello no longer "friend and friends" but front-end ones,

How would you go about formatting multiple (unrelated) lists like a table? See the attached example (blue dashed guidelines for better understanding only).

What I'm specifically after is:

1. Displaying lists side by side on widescreen (and sequentially one after another on mobile).
2. All lists having the exact same width.
3. Some elements potentially wrapping on multiple lines.
4. All elements on the same row being "properly aligned" with each other, that is, separator lines not "breaking up" from column to column. Also, displaying the bottom separator even if there's no element (see last row for columns A and C).
5. Lists potentially having a different number of elements each.

I decided against using a

<table>

<table>

for semantic/accessibility reasons because elements on the "same row" are unrelated. Ideally, I guess I'd want multiple

<ul>

<ul>

; however, I wouldn't know how to enforce the 4th constraint listed above.

I considered using a grid, have it auto-place elements by column with

grid-auto-flow: column;

grid-auto-flow: column;

and ensure each "list" starts at the beginning of a row (

grid-row: 1;

grid-row: 1;

for the corresponding elements); however, no

ul

ul

in markup and no control over separator being displayed at the bottom of empty cells.