how do I represent this properly in the dom
I am thinking of using a table but it sounds very bad in my head;
I also ran into some issues I don't like while using flex box
21 Replies
Why not Grid 🥲
I'm not that good with grid
But I think it could work
Grid template areas then fill in the spotd?
I feel like semantically this should be a table that you can style with grid probs
wouldn't this semantically be a bunch
details tags in a ul?Hm... I was thinking that
general and joining process would be the column headers and then you could have details in the tr?
I'm assuming that the FAQ questions are dropdowns / detailsI don't think this is technically tabular data
it's a nested list
General also describes the type of question it is, instead of being a label for a data column
I can see that, I'll have to read the spec to see what exactly constitutes as tabular data now haha
But then using a details and a nested list, how do I get the first column to be all on the same line, without affecting the alignment of the rows on the last column
with grid
Okay I'll look into grid
Thank you
I'll try to make a codepen for this later tonight too after work if you're still stuck, ping me if you don't get a response by ~7 PM EST
I'll try to work on it with grid
I have an idea in mind, had to step out
Thanks Vince
i got the general layout; just trying to style it. I think i can handle from here. Thanks
used grid-template-areas and grid area
I was looking at those thing grey lines, how do you handle those? I was thinking that could be tricky
Psudoelements maybe?
ill have to research what these are
only familiar with hover
i was thinking of adding the borders everywhere but now that i think about it, it wont cover the grid areas that are empty
I think you could use something like
::after or ::before and basically have it span all grid columns:
Not sure how well that would work / if it would be the best way though
Your .element here could be your questions maybeokay i will try this, thanks
I got a rough prototype here: https://codepen.io/vince1444/full/bGyeZKm
I really don't like this solution though so if anyone has some suggestions please feel free!
I'm actually confused on how my
width: 200% was able to fit perfectly with no overflow 😅looks way better than mine for sure lol
Looks like you're going with grid to style? If you need something semantic for the
<html>, you could try the <dl> <dt> <dd> tags. They're really good for lists with definitions or descriptions like this. I put together a little Codepen, so you can see how they handle themselves just from the <html> alone.
https://codepen.io/salentipy/pen/yLWaLjW?editors=1000
More info here:
https://www.w3schools.com/TAgs/tag_dd.asp