Need ideas for a nested ul layout
I need ideas, suggestions or examples for a nice way to display a nested
ul (or perhaps, a better way of displaying it).
I tried a grid, with a flex inside, but I'm dry of ideas.
Here you can play with the HTML:
https://codepen.io/myntsu/pen/OJwQaoz
5 Replies
You can browse sites like https://tailwindui.com. Most are not free but just the screenshots can give you nice ideas
looks like a good use case for
grid-template-rows: masonry 😁
In the meantime, if the order isn't terribly important (which it doesn't look like it is here, since it is an unordered list :D) you can use columns
There are some issues with it depending on the styling your using, and in general you do need to declare a height, but it might work?
https://codepen.io/kevinpowell/pen/YzjeBqdOh, masonry looks nice after I gave it a look, but 0% support 😭 it's the perfect use case.
So, in this case, the columns wouldn't be responsive, rather scroll (almost like a table), right?
Also, what does
break-inside do? I removed the property, read the MDN (but didn't understand it) and it behaves the same apparently?columns is wonderfly responsive unless you give it a fixed number of columns actually. If you give it a size (like I did), it's an ideal size, very similar to a minmax(300px, 1fr) type thing in grid.... but it will go smaller than that value to, it's just what it tries to make them. The issue with responsiveness comes from the fixed height, which... yes, that can be problematic. There might be a way around that, but I don't use them often enough to remember what it is.
The break-inside: avoid stops that element from breaking across 2 columns. If you turn it off and play with the viewport size, you might find an li` will break across 2 columns at one pointbreak-inside should prevent/allow column and page breaks (print styles) inside paragraphs. Unfortunately it's fundamentally broken across browsers. It would also make use of orphans and widows to control when a break may/may not occur.
I'm waiting for support since ever.