"surely it isnt that hard to get layouts like this with those gaps, right?"
EDIT: "why does [x] not work?" this is why
My god I miss being able to use table tags. It's why I don't like doing HTML stuff anymore.
- he/him
- holenet.info/
For use only on NTSC Genesis Systems.
Avatar image by CyanSorcery!
Message Boardings
jul.rustedlogic.net/index.phpMastodon
woof.tech/@techokamiTumblr (inactive)
tumblokami.tumblr.com/Twitter (inactive)
twitter.com/TechokamiBluesky, I guess
bsky.app/profile/techokami.bsky.socialYou must log in to comment.
in reply to @lexi's post:
Screw it let's <table><tr><td><img src="spacer.gif" width="113"
i was actually considering not using grid, but i would have written my own rendering otherwise and i am not even joking
yeah i'm confused too, I feel like gap should work in that case but i'm also too lazy to try right now
gap usually works, but not in this case, because i want those tiles to be on a fixed grid, and the 1x1 aspect ratio to be 1:1 and the others to connect over the gap. using gap results in this:
I have an example here using grid gap using 1x1 squares just fine?
https://cohost.org/gwenverbsnouns/post/1056723-enforcing-squareness/8d829b6c9e23458aae631fc783faf87e
apologies if I'm just missing something here and being obnoxious; I happen to be messing with css grids a lot in a side project rn so they're front of mind x)
the problem with that is that i have to use a fixed value for the width/height. id have to mess around with calc() to make it fill up all available space lol
No, just make it fill width and then use aspect-ratio on the container.
Edit: oh, no, nevermind, then the gap messes with the aspect ratio also.
if i change 100px to 1fr, and add aspect-ratio: 1 / 1; on the "a" cell (and only that cell), this seems to work fine and fill its container
in reply to @xkeeper's post:
table IS, like... right there. staring you in the face. who was the first to decide against the humble table
i could use table here and would have to use the same workaround because those boxes should be squares or fit into the grid. css grid/flex and table all have the same problem that setting the aspect ratio for 1x1s and making the others align is a pain in the ass
also i agree 100% this would usually be better with table and i am a passionate grid hater as well, but in this case grid is easier because i change positions and dimensions on the fly. and having to generate the table every time is a lot easier than just doing grid-column: var(--col) / span var(--width); grid-row: var(--row) / span var(--height);
Out of curiosity, why did folks shift from using table to using css/js grids?
what @quat already said, plus grid is just a lot more flexible. you can stack entries on the grid, you can change orders on the fly, you can define your grid however you like even if it does not make sense. table on the other hand just does a table
Pinned Tags