merecido
KPCKevin Powell - Community
•Created by merecido on 3/19/2024 in #front-end
How to style multiple lists like a single table?
@Kevin would you be so kind to double check or maybe even briefly describe how would you go about checking what's supported where? With regard to
display: contents, my reasoning is as follows:
1. It shouldn't affect mobile thanks to simple block stacking in place.
2. May affect behavior on tablets and up, although latest browser versions seem to have trouble with buttons only, not with lists.
3. That being said, it's not unusual to have older iPads (5-6 years old) laying around and users who rely on their default Safari browsers, which cannot be kept up to date, so that'd be a deciding factor.
Maybe worth putting a YouTube short together going over the process you'd normally follow for checking support?14 replies
KPCKevin Powell - Community
•Created by merecido on 3/19/2024 in #front-end
How to style multiple lists like a single table?
@MarkBoots thank you very much for your solutions (header styling + content and all)! I believe I saw you refer to
display:contents earlier for a split second, which immediately made me start exploring what that property value was all about.
Unfortunately, as far as I understand, Safari support seems to be problematic when it comes to applying it to lists:
https://adrianroselli.com/2022/07/its-mid-2022-and-browsers-mostly-safari-still-break-accessibility-via-display-properties.html#D-Safari
I may be better off taking the subgrid route after all. 😕14 replies
KPCKevin Powell - Community
•Created by merecido on 3/19/2024 in #front-end
How to style multiple lists like a single table?
I understand. Some additional context: in this case, there's no direct comparison between columns, each one just lists examples for a given area. E.g.:
- Data Analyst jobs (column 1): BI Analyst, Financial Analyst, Data Engineer, Statistician
- Programming jobs (column 2): App Developer, Software Architect, Full-Stack Developer
- Research jobs (column 3): User Researcher, Archaeologist, Biomedical Scientist
The look & feel of the whole thing is inspired by the following minimalistic theme: https://fylla-template.webflow.io/
14 replies
KPCKevin Powell - Community
•Created by merecido on 3/19/2024 in #front-end
How to style multiple lists like a single table?
What do you mean @Joao ? The use case may have got lost on the Codepen examples: the idea is to have separate lists, one per column, each one with its own header (as shown in the original screenshot). There's no relationship between the columns other than being styled like a single table.
14 replies
KPCKevin Powell - Community
•Created by merecido on 3/19/2024 in #front-end
How to style multiple lists like a single table?
Thanks for the prompt reply @Kevin !
I haven't delved into subgrid because of its supposed actual support; however, I could consider using it if it solved all of my problems.
Above all else, I like very much the idea of being able to keep the proper markup. Next, relying on a single grid template makes everything align nicely (e.g. when a row contains a longer element). Unfortunately, I don't think it can help with the "keeping the separator for empty cells" thing.
In order to highlight both the benefit and the issue, I've made the longer element even longer and I've also removed a couple of elements from the middle list: https://codepen.io/adriteka/pen/mdgRagr
14 replies
KPCKevin Powell - Community
•Created by merecido on 12/2/2022 in #front-end
Where does extra height for row come from when using grid?
Before now I was just using grid with
fr for all rows/columns and thinking about relative space distribution among all those rows/columns.
I hadn't thought through what the behavior would be if you specified fr for, let's say, 2 out of 3 rows/columns or, even more interestingly, how a single fr would be treated considering there's no other fr to relate to.
So, summing up, single fr → get me all that extra space. Thank you very much for the clarifications!17 replies
KPCKevin Powell - Community
•Created by merecido on 12/2/2022 in #front-end
Where does extra height for row come from when using grid?
I guess It'd be
align-items; however, that one determines how content within the cell is aligned based on the available space, not how the available space should be managed to begin with.
https://css-tricks.com/snippets/css/complete-guide-grid/#aa-align-items17 replies
KPCKevin Powell - Community
•Created by merecido on 12/2/2022 in #front-end
Where does extra height for row come from when using grid?
As soon as I change a
fr value for something else on that 3rd row or get rid of it, the unwanted extra space gets back.17 replies
KPCKevin Powell - Community
•Created by merecido on 12/2/2022 in #front-end
Where does extra height for row come from when using grid?
Thanks for chipping in, Kevin!
To begin with, I have to admit I didn't know you could define both columns and rows. Now, I've been able to achieve the desired result by specifying
grid-template-rows; however, I don't understand the rationale behind it based on the values I'm using. In order to get rid of that unwanted extra space:
- I threw in whatever auto, min-content or max-content values for the first 2 rows.
- I had to set a fr value for the 3rd row (the one with GAME MECHANICS).
E.g.
grid-template-rows: auto auto 1fr
grid-template-rows: min-content min-content 1fr
grid-template-rows: max-content auto 2fr17 replies
KPCKevin Powell - Community
•Created by merecido on 12/2/2022 in #front-end
Where does extra height for row come from when using grid?
Ok. I'll be trying myself. Thank you very much for your prompt response!
17 replies
KPCKevin Powell - Community
•Created by merecido on 12/2/2022 in #front-end
Where does extra height for row come from when using grid?
Do you think it could be easily "fixed"? Would I be better off turning to
flex? I guess left column (in desktop layout) with flex-direction: column and justify-content: flex-start may be the way to go.17 replies
KPCKevin Powell - Community
•Created by merecido on 12/2/2022 in #front-end
Where does extra height for row come from when using grid?
I suspected something along those lines might have been happening but didn't know
grid behaved that way. I thought flex was the only one adjusting sizes as it saw fit.17 replies
KPCKevin Powell - Community
•Created by merecido on 12/2/2022 in #front-end
Where does extra height for row come from when using grid?
You're right! It doesn't happen when GAME MODES is shorter.
17 replies