Make 2 grid columns share the same size.
Hey guys, lets say i have a grid, that grid should have 3 columns.
[ Logo | Nav | Button ]
and i want Logo and Button to always be the same size so that nav is perfectly centered, but also only be as big as the largest of them, like auto would do, how would i do this? or is it completely impossible with CSS?
Or Alternatively, if i only have [ Logo | Nav ] is there a way to add space next to Nav to make sure its still centered.
Of course this would be easy if i hard coded the size like:
but i cant figure out how to do it without hard-coding the values since putting in auto like so this wouldnt work.
5 Replies
What if you used
vw units?
Like grid-template-columns: 15vw 1fr 15vw?i just tried it, and it seems to work, i was just a bit worried that it might end up scaling too much, but didn't seem to be an issue in my test. other than it starting to clip into my nav at smaller widths, but that can easily be fixed with max(fit-content, 15vw), and to be honest, if we're at those screensizes, i'd probably wanna swap to a mobile layout either way
i havent made a website in so long, so im a bit rusty, only started again now, since i wanted to try to learn nextjs and react.
up until now ive been doing it in vanilla js, html, and css/sass, so i kinda have to get used to nextjs, along with remembering all the css tricks xD
Why not use repeat(3, 1fr ) ?
Doesn't equal
frs distribute the extra space equally between the elements after their content has been rendered?
Unless the first & last elements were the same width, the middle element wouldn't be centered.Is that so? Interesting , makes sense