trying to figure out a preferred physical layout
How to even do this? I can't wrap my head around what or how many to consider.
Use to work a lot with graphic tablet and belkin n52 (later nostromo) and wanted something that combine functional keyboard and left-handed pad. Got ErgodoxEZ few years ago... now I vaguely know that I want something smaller and more portable (maybe wireless and scroll wheel)... but layout? Absolutely no idea.
Generally you don't need anything for child element, except in rare case, which you have seen before a fix...
Columns usually try to balance every columns to have same height, and last column have least items.
EDIT: In your case, \ having a margin-top, which got clipped when new column starts. I don't know if there is a fix for this but I would use padding instead.
CSS is chaotic, dude.
ul {
/* reset */
margin: 0;
padding: 16px;
columns: 2;
/* box-sizing: border-box; */
}
@media screen and (min-width: 640px) {
ul {
columns: 3;
}
}
@media screen and (min-width: 960px) {
ul {
columns: 4;
}
}
ul li {
list-style-type: none;
padding: 2px 16px 2px 4px;
font-size: 120%;
display: flex;
break-inside: avoid;
}
ul li a {
/* display: inline-block; */
background-color: #35516c;
color: #d2dade;
text-decoration: none;
padding: 2px 8px;
border: solid 1px #d2dade;
flex-grow: 0;
}
ul li a:first-child {
flex-grow: 1;
/* width: 106px; */
/* margin-right: -3px; */
}
ul li a:hover {
background-color: #1e445d;
color: #fff;
border: solid 1px #fff;
}
This is kinda sad. I was hoping someone will give you working solution eventually but nope.
I saw both of your posts. People really overthink this. It's not flex, it's not grid... you need columns.
Straight up columns, not flex column not grid column.
columns - CSS: Cascading Style Sheets | MDN
Sure you can do it with flex or grid, but you need to do some unnecessary trickery on it.
Flex and grid won't wrap column unless you specified it to somehow, parent element will just grow to accommodate any amount of child elements and keep them in one column.
Isn't this also what Tailwind, UNOCSS and the likes about?
Sounds like he have a problem where working in project using BEM, different team use it in different way (which I think as what to expect). And when components are involved, is CSS convention really the focus here?
edit: ok, I think I finally got your point...
How does BEM differ from OOCSS, AMCSS, SMACSS, SUITCSS?
Well... this thing feels like frontend framework with extra step.