koko

@kokoronis

little slime doing their best

they/them, any
kokoronis.carrd.co/

31, white ★ freelance illustrator ★ jrpg enthusiast ★ 90s anime ★ soda-flavored slime

💍💚: @birdrobot

koko @kokoronis7/24/2023, 6:46 PM

Alex Zandra @zandravandra

eevee @lexyeevee7/23/2023, 3:33 AM

css for css baby 4: flexbox and grid!!!!!! yes!!!!!!!!!!!

Are YOU a CSS BABY who just wants to know how to put stuff in a row already?

eevee's web zone — Mozilla Firefox

−

← → ⟳a> ⯃

🔒 https://eev.ee/

Are your friends

Tags
Games

may 5, 1999making entire freaking websites in their posts, and leaving you feeling left out?

feb 23, 1999hey guys! finally finished the new layout, hope you enjoy!

Done

Are you holding out for A hero by the end of the night
She's gotta be <strong> and she's gotta be <em>?

I have excellent news. Your patience has been rewarded. We have finally, finally arrived at

thegoodstuff

#css crimes #real posting #The Cohost Global Feed

eevee @lexyeevee7/24/2023, 5:52 AM

good news (?): i felt like the grid stuff got kind of rushed at the end, so i went back and expanded some of those last-second bullet points into actual prose. now span and alignment get some real treatment, and auto-flow gets a real introduction with an explicit comparison to flexbox.

tragically i deleted the hazard diamond along the way, so, here it is for posterity. also i guess now i don't mention aspect-ratio anywhere. crap i better edit it again

here's a hazard diamond i guess

COR

#css crimes

You must log in to comment.

in reply to @lexyeevee's post:

Plum @plumpan7/23/2023, 3:47 AM

idly clicks the X on the browser window in the very top

box goes away

I shouted out laughing, well done.

eevee @lexyeevee7/23/2023, 3:53 AM

lmfao thank u, i was wondering how long it would take for someone to try that

edania (sapphic++)@azujax7/23/2023, 7:12 AM

holy wow lol. love the functional minimize button and... the refresh button goes to cohost.com ??

simply delightful

SysL @sysl7/23/2023, 3:58 AM

lol this is a better writeup than most introductions to flex and grid floating around. Amazing work.

eevee @lexyeevee7/23/2023, 4:07 AM

haha i was secretly hoping for that! something about the way i'm inclined to think about things in dependency order seems to make this kinda stuff come out well. thanks

fluffy @fluffy7/23/2023, 4:26 AM

flexbox is so complicated and full of so many little weirds that every time I use it I end up having to look up the css-tricks guide and reacquaint myself with just how much stuff is in it.

saori @gayanimegirl7/23/2023, 4:45 AM

great post on my favorite part of css!! oh and flexbox too. thank you for writing it!

now if you'll excuse me i'll continue to stare longingly at the caniuse page for subgrid

eevee @lexyeevee7/23/2023, 4:49 AM

No. You can never use it. Would you like to use WebUSB instead. We made a laptop that only runs a browser and we're going to fuck the whole web up instead of admitting that was maybe a dumb idea

Andreu Botella @andreubotella7/23/2023, 10:52 AM

Hey. I sometimes work on writing the code in browsers that powers all of this CSS stuff. And while I haven't worked on grid, my understanding (and hearing from folks who know more about this) is that Firefox took shortcuts when implementing grid that make it simpler than the spec says, and implementing subgrid there was easier. Whereas Chrome didn't take those shortcuts, and making subgrid work was very complicated.

eevee @lexyeevee7/23/2023, 4:13 PM

now that's interesting. does that mean there are properties of grid that firefox handles incorrectly? if not then... it doesn't matter, right?

again this is a difference of four years

Andreu Botella @andreubotella7/23/2023, 4:33 PM

It's not a property – IIRC you can have a circular dependency between sizes, and in those cases the spec says the layout should be run in two passes, and Firefox does only one. And now that I look at the spec, this might be something specific to subgrid, rather than general to grid, so Chrome might have wanted to get it right when implementing it for the first time.

Chrome has also spent the last ~6 years slowly rewriting their layout engine (https://developer.chrome.com/articles/layoutng/), to make things like multi-pass layout not have to choose between slowness and bug-proneness. And I suspect they wanted to have the new layout system well in place before starting work on subgrid.

eevee @lexyeevee7/23/2023, 5:34 PM

ah, looks like that's bug 1300366. not specific to subgrid, but seems most likely to happen due to contents with an aspect ratio (either replaced elements or explicit use of aspect-ratio) — the spec also calls out wrapped flexboxes

@mehbark7/23/2023, 5:23 AM

i thought i had a decentish knowledge of grid and flex, but this is what i wrote when i wanted the children of an element to all be equal width hours ago:

display: "grid",
gridTemplateColumns: `repeat(${number_of_children_easily_calculated}, 1fr)`,

which is bad (especially compared to display: flex and then flex: 1 on the children), but what's even worse is that my go-to before was to precalculate the widths in percentages. this is lame and bloats the css for no reason, but it works. except for the occasional one pixel gaps which (and i can't find where i did this?) i've fixed with outlines in the past which is just really eugh

anyway thank you so much for this post

eevee @lexyeevee7/23/2023, 5:34 AM

hmm i wonder if i shoulda spelled out explicitly that grid: auto / auto-flow 1fr; is equivalent to a flexbox with all 1s?

@mehbark7/23/2023, 6:09 AM

thinking about it made it a lot clearer in my mind how grid and flexbox have control at opposite levels (sort of), which i think that emphasizes well. idk i've spent like half an hour on the last sentence, so grain of salt etc etc

Mr. Hands @mrhands7/23/2023, 8:07 AM

I'm crying salty tears because this post is an incredible resource, and I can't use more than half of it because I'm stuck in the bullshit environment of "doing web for games UI" called Coherent Gameface (yes, that's really what it's called), which is a browser of sorts that has:

No display: grid 😥
Yes display: flex! 😄
No support for gap of any kind 😨
minmax()? Buddy, we don't even support calc() if you try to combine % and px!

I have to cobble together solutions from Twitter Bootstrap circa 2013 and blogposts from before the grid era and it suuuucks. So thank you for the random asides in your post, because they actually help a lot!!

eevee @lexyeevee7/23/2023, 5:02 PM

i feel you, though fwiw my game's UI is built with a system called "calculating pixel coordinates", so it could always be worse

Mr. Hands @mrhands7/23/2023, 5:47 PM

I've done that type of UI too, and it's indeed much worse. 💀

fluffy @fluffy7/23/2023, 5:16 PM

why even bother supporting calc() if you can't mix and match units? If all your units are the same then you can just like. add 'em up yourself. so baffling.

Mr. Hands @mrhands7/23/2023, 5:48 PM

The only benefit is doing something like width: calc(var(--coconot-count) * 12%), but it will wag its finger at you if the --coconot-count variable is not also a percentage.

eevee @lexyeevee7/23/2023, 5:51 PM

wh... hang on, percent is a unit, you can't multiply two of them

Mr. Hands @mrhands7/23/2023, 5:55 PM

You're right. I messed up in that example. But let's say --font-size is 1.2em, and you try to get 50% of that variable with calc(), that's definitely a scolding and a finger-wagging from Coherent Gameface.

eevee @lexyeevee7/23/2023, 5:56 PM

you can't multiply percents by ems, either — % has a specific meaning in sizes, so 50% can't be the same as 0.5. you want to multiply by 0.5

Mr. Hands @mrhands7/23/2023, 6:01 PM

You're right again, I was thinking of addition. At the risk of "posting through it," here's what the documentation says:

CSS calc() support
Not supported within @keyframe definitions
Mixing “%” and other dimensional units is not supported (e.g. 50% - 20px)

You should scroll down that page if you want to see some absolute insanity, by the way.

artemis system @arty7/23/2023, 1:19 PM

this is a really nice post, wow! i learned some things and got a better understanding of some things, i think

[deleted]7/23/2023, 1:40 PM

eevee @lexyeevee7/23/2023, 6:15 PM

kind of a bummer comment to receive on the post where i try to explain how to make it

Lizstar @Lizstar7/23/2023, 6:30 PM

Ah, I'm sorry. I do totally get how it can be a downer. I'll give it a try to learn, I promise, thanks for all your hard work!

Alex Zandra @zandravandra7/23/2023, 1:56 PM

thank you so much for opening my third eye!! now everything is so bright ow ow

jae @jkap7/23/2023, 4:25 PM

oh fuck yeah i didn't even have to ship doom wad support to get this

Reads everything but the room @librarianmage7/23/2023, 5:24 PM

Two games that helped me get a hands-on intuition of flexbox and grids were Flexbox Froggy and Grid Garden

batterpunts @batterpunts7/23/2023, 11:52 PM

this post is like 😌👌👌👌👌

티재 @tabatkins7/24/2023, 7:00 AM

Excellent excellent post Eevee, this rules.

Really nothing to comment about in the main post, you did great. At the very end:

As Andreu said on another comment, the existing subgrid impls aren't correct (in cases involving intrinsic sizes) and the test suite didn't cover nearly enough interesting cases. We're doing it correctly, and part of that involved waiting for the refactor of our entire layout engine to be finished. (Also the layout team is different people than whatever other specs your complaining about. Talking about the merits of those other specs isn't useful in this post's comments tho, so I won't.)
Masonry is exciting in theory but we're pretty sure it's wrong to actually build it on top of Grid. Ian has an alternate proposal we just recently put forth for the WG. It'll still look pretty Grid-ish, tho.

eevee @lexyeevee7/24/2023, 7:12 AM

i couldn't find anything specifically wrong with gecko's subgrid impl; it currently doesn't do a second pass on grid sizing, but that's not subgrid specific. (also i had to check the spec to work out a case where it failed, and i found some hints that fixing it might be a priority for this year.)

no shade on people doing layout work. but absolutely shade on google as an organism for having all kinds of ulterior motives and very little to dissuade it from pursuing them.

ok yeah just the ideas bandied around in the OP here make it sound like cramming masonry into grid is a clumsy hack. which i guess it is

fun fact: in looking through bugzilla earlier, i found someone requesting that the track count limit be raised... because they were faking masonry by spanning 1px rows, and only 1000 of those doesn't get you very far apparently

티재 @tabatkins7/24/2023, 7:30 AM

This is one reason why the spec now mandates (as a SHOULD requirement) that you support up to 20000 tracks in each axis.

eevee @lexyeevee7/24/2023, 7:37 AM

Let me tell you about my faux masonry grid for hidpi monitors that has rows 0.1px tall. Fix this immediately

Modded XCOM 2 After Action Reports @Modded-XCOM2-AAR7/26/2023, 11:47 AM

I'm trying to make side-by-side flex boxes with one box being a thumbnail of an image and the other being a text box, but no matter what I try there's a big awkward gap above the image.

<div style="display: flex; height: 12em; gap: 0.5em;">
  <div style="flex: auto; padding: 0.5em; align-items: top;"><a target="_blank" href="https://i.imgur.com/bGaosRT.png">
  <img src="https://i.imgur.com/bGaosRT.png" alt="Cain Juntley" style="width:200px">
</a>
</div>
  <div style="background: hsl(90, 60%, 70%); flex: auto; padding: 0.5em;"><b>Cain Juntley (Deceased)</b><br>A space adventurer who chose to come to Earth to fight ADVENT. May the knowledge there is non-hostile life out there be remembered.<br>
<i>Dan's fun facts: Cain Juntley was submitted by my friend Patrick AKA Shadowsandbag. He is from a tabletop RPG oneshot.</i></div>
</div>
<br>
<div style="display: flex; height: 8em; gap: 0.5em;">
  <div style="flex: auto; padding: 0.5em;"><a target="_blank" href="https://i.imgur.com/3vhw8w0.png">
  <img src="https://i.imgur.com/3vhw8w0.png" alt="Dennis 'Thin Man' Notanalien" style="width:200px">
</a></div>
  <div style="background: hsl(40, 60%, 70%); flex: auto; padding: 0.5em;"><b>Dennis "Thin Man" Notanalien</b><br>
Dennis is a normal human from a normal human city in the country of France and is NOT a "thin man" in disguise. That is all.</div>
</div>

Additionally, here is an attempt to make a 4-image grid.

<div style="display: grid; grid-template-columns: auto auto; margin: 0px auto;">
  <div style="padding: 5px;">
    <img src="https://i.imgur.com/qPuaazI.jpeg" alt="A sectoid using mind control">
  </div>
  <div style="padding: 5px;">
    <img src="https://i.imgur.com/usEaIIq.jpeg" alt="The Wanderer getting mind controlled.">
  </div>
  <div style="padding: 5px;">
    <img src="https://i.imgur.com/3JOwzta.jpeg" alt="The Wanderer shooting Cain Juntley.">
  </div>  
  <div style="padding: 5px;">
    <img src="https://i.imgur.com/3uJi7NR.jpeg" alt="Cain Juntley's dead body getting knocked to the ground by gunfire. He disturbs the foliage and lands on the body of an ADVENT troop.">
  </div>
</div>

Big awkward image gaps have been endlessly confounding in my attempts to display images.

eevee @lexyeevee7/26/2023, 6:41 PM

that would be cohost's own css, which treats images in posts like they're big full-width affairs — you gotta slap margin: 0; on every image to cancel it out