[SOLVED] Can't figure out how to do this layout with css grids and `aspect-square`...
Im trying to make a card with the following layout. the main requirement is that the red box should be a square, with an icon/logo inside. this will be a 2x2 grid.
the red square should have the same height/width as the blue cell's height, so if the blue cell gets bigger, the red square will size accordingly
the pink cell is essentially blank, but will have the same height as the yellow.
the yellow cell height will change dynamically based on the content.
sorry if this is confusing, maybe this will clarify:
so far, im somewhat able to get it working, but am facing clipping/overlapping issues on smaller devices. AI told me it has something to do with
aspect-square or something, but visually in my head, it should be fine. or should I just switch to using flexbox?
here is some code: https://pastebin.com/Ba8yc8MaPastebin
```js <div className={cn( "grid grid-rows-2 border", "...
Pastebin.com is the number one paste tool since 2002. Pastebin is a website where you can store text online for a set period of time.
115 Replies
what's the size of the square, in pixels?
it should be based on the height of the blue cell, which will have a line of text (title), so essentially it will be the font-size that is set in the blue cell
then you want the columns to be 1fr auto and the rows 1fr auto
and set the aspect ratio to 1:1 if you always want a square
i tried that but still get the clipping issue :/
thanks for the help though, your solution is very similar to the one in my pastbin link, and i had tried that first before posting
surely the columns should be the other way round,
auto 1fr so that the logo column is only wide as needed whilst maintaing the square aspect ratio 🤔i feel like i tried all those combinations and couldn't achieve my desired result... ive spent hours and hours trying to figure this out but it seems like an issue with
aspect-square conflicting with css grid
my google fu shows only results where the entire grid and its cells are square, or ratios like 2:1 or 3:1 etcI pasted your code into tailwind play, adjusted the grid-col definition to grid-col-[auto_1fr] and it worked as I believe your are descrobing.
The red box maintains it's aspect ratio of 1/1 as the height increases according to the h3 font size increased
https://play.tailwindcss.com/S6w1OC6wJo
i always mess up the order :/
hmm ok i changed font to 7xl, and the red square does not scale to match
here is the closest i've gotten
but it still has clipping issues
https://play.tailwindcss.com/tiJndHlMcI argh so doesnt seem to make a difference
Tailwind Play
Tailwind Play
An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.
1) clipping, 2) pink space not match red cell width
why are you forcing grid children to be flex?
bc i want the heights/widths to match/line up properly
i've always heard the saying "if it looks like a grid, use grid"
if i used flex then i'd have to make some janky spacer for the pink cell/spacer cell to match the red cell above
i thought about using flex but i think that might just be a hacky way
Here's my attempt at it, with some video to show it working.
It uses some JS, though, to get the height of the blue area and set the red square to that width/height:
https://codepen.io/13eck/pen/myegado
AHHH ok tysm, i briefly had the idea to implement js and thought i should prob do so, but never gave it much more thought
It's not perfect, but it works. And if you want the red area to stay a square based on the height of the blue area you'll want to listen to the window's resize event to re-run the
adjustSizes function.dang i was hoping there was a css only method... there has to be an easier way but i guess css is still in constant dev
Not everything has a CSS-only way of doing things. If you want dymanic anything, JS is still the way to go
And really, you shouldn't shy away from JS in 2025, it's not like we're back in 2012 where some people (unironically) have JS turned off. Or that browsers had different JS implemenations/API :p
i'll give this method a shot. thanks again, this is the way
agreed!
Just made a quick change to add auto-resize based on viewport size
Thats strange, it does change when I changed the font size
(I realize that the conversation has moved on since then)
is there any reason why this can't be a fixed width?
from what i see, it's for an icon and then it's wasted space for decoration
the red square should have the same height/width as the blue cell's height, so if the blue cell gets bigger, the red square will size accordingly–OP
i get that, but why?
I assume it's due to the "blue cell" being a header of some kind and for responsive reasons based on viewport
(i am challenging the request)
okay, but then why does the red have to be a square?
C-suite says so :p
the smaller the screen, the bigger the red
c-suite ... -.-
The root of all evil, yeah
if you want fucking idiotic ideas, ask a c-suite
you will have laughing material for days
but seriously, forcing it to be a square is just ... not
on a phone, i predict 70% is icon and a sliver of barely readable title
lol no the title is gonna be a short 1 liner title, and the icon i want square at match the height of the blue cell
basically like this but it doesnt look right on mobile with clipping issues
If it's a one-liner that won't change then no need for JS as it should be very simple to know how tall one line of text is lol
yeah but i have the font size responsive based on the device
so each breakpoint has a fontsize respective to that screen
then you can also set the font size for the symbol
its an svg that im using as a mask so i can change color dynamically
idk if that makes any diff
why???
just use the svg directly or use a symbol
then set the fill to currentColor
bc i have 3 different color themes and dont want to save 3 diff files
no need for masks
well still
you are overcomplicating
i dont think that matters because there seems to be a conflict with aspect-square and css grids
but that's fine
i might be
which is why im asking here
you can just do auto 1fr and be done with it
what's the issue you're challenging?
yes, that works on desktop
the need of it being a square
but mobile there is a clipping issue
it's horrible on mobile
ok well thanks for trying to help anyway
the solution that beck sent does the "red is square" thing, but it's horrible for smaller sizes
yes i'm aware of that and plan do adjust accordingly
but if i cant resolve the clipping issue then i can't go from there
well, you cant
the only solution to keep it as a square on smaller sizes is to overflow or throw text away
i don't see what your issue is with my problem
it's been resolved
it's the need of it being a square
because it's an icon, i dont want a rectangle container
and i want the title to line up with the icon, and the title to line up with the description
but it has to always be square, even on smaller screens?
... yes
and even when the text wraps?
that's how i want it, man
it won't
unless your screen width in like 300px
the font size of the title scales to smaller devices
okay, then beck's solution is too overkill and will fail until the browser downloads, parses and runs the js
the titles are 1 word less than 10 characters
then you can just do a fixed size for the first column
probably, but i don't see another solution, i don't want to set a fixed size
well, use a variable for the size
or use other units
there's ch, for example
well setting a variable for the size would be setting a fixed size, wouldnt it?
or lh, which is the line height of the text
err i guess em
but that's still based on the 16px
it's actually based on the parent
ok, well i just want to use
aspect-square
oh yeah you right, im referring to rem i thinkyou are, yes
which usually is
medium size, which the spec defines as a default of 16px
but users can set it to other values
and some browsers may set it to other sizes, like 21pxok, well i guess i'll use @13eck 's solution until i can figure out an easier solution
i dont want to use fixed size bc responsive
unless i have a set fixed size for each breakpoint
idk ill keep playing around, i spent half the day and all last night
thinking of just scrapping the design if i can't get the js to work, or if it breaks like you said
i have a solution for you
Create a grid layout with background colors - JSFiddle - Code Playg...
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
pure css, responsive, the icon is a good size, always square, always centered
unless you go too tall
then it breaks
if you remove the aspect ratio from the 1st div, it will work
the font size was from some random generator, and it goes from 20px to 32px - for 16px font sizes
holy crap ok
super interesting
thanks man
im checking it out right now
alright
hmm ok i currently have the STUFF h1 as an H3 styled component, so i need a way to pass the font size...
it doesnt stay as a square when the title is huge and wraps, but you said it wasnt a concern for you
yeah i think this should work if i can convert this to tsx tailwind
or might just need to have its own css file
i dont know tailwind, but it may be possible to make it a bit less complex
im using padding to align the icon, instead of the normal properties
yea this is some super custom code so i dont think tailwind can handle it any easier
and im not using the lh unit, opting for math instead
what is lh stand for
1lh = 1x the line height of the element
ahh ok
so, if you do
line-height: 1.4, the unit 1lh will be the size of that line-height
which may be 16px * 1.4hmm ok this mean i will need to set the styling in this css file... which is no biggie, unless i can pass this styling through
im using the line height as a poor-man's alignment to sorta align in the middle-ish of the first line
ok, ill give this a shot, was struggling with the js for now
i can see that being a pain and a half
thank ya
you're welcome
yea i think i just need to create its own css file for this component with its own h3 styling
to match
by the way, you may want to add
> before all the divs, in the css
i wrote it for this specific example onlywhats that do
btw, can you change the html?
it's the direct child descendent
yeae i can change it
i have to hit run
...
you can make this 2000x less complicated
please tell me how
use an <article> for the card thingy
then use an <header> for it
im not sure if you can use a <main> inside an article, but a <div> will do
after like the 10th hour of troubleshooting i thought i should find a way to do that lol
i will make an example
isnt article and header just like a div, except for the screen reader stuff
no
it's a semantically different thing
it indicates that this is some content that stands on it's own, from the rest of the page
im using an article because it seems to make sense to me
ok
okay, i have simplified a lot
Edit fiddle - JSFiddle - Code Playground
JSFiddle - Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle.
thanks my friend
you're welcome