Grid Layout - Dependency of Rows Height
Hi everybody
I have a grid layout on desktop which are 2 rows and 2 columns. I want The second column that has overflow and span 2 rows have a height dependent on the items in the first column and the first and second rows. Is this possible?
I don't want explicitly add
max-h-[value].
If you saw any Kevin Powells video please suggest me too.
My repo: weather-app
My preview: Weather-app-kiaakaGitHub
GitHub - kaamiik/fm-weather-app-using-next-tailwind-typescript
Contribute to kaamiik/fm-weather-app-using-next-tailwind-typescript development by creating an account on GitHub.
Weather App
Generated by FrontEnd Mentor
12 Replies
happy to help if you add some codepen link with a reproducible case that I can take a look at!
I've sent my preview and code. on large screen I want instead of using
max-height for the overflow item (HourlyForecast) this item takes the height of the items of the first column. I mean sum of two items inside first column.
Oh so you want the second column to scroll vertically and for its height to depend on the first column. Interesting challenge as I don't think there's an easy way of doing this but I'm sure it's possible. I'm about to leave my computer but will take a look when I'm back later today and see if I can find a way that it's not too hacky!
You could try using
contain: size; on your second column element (and remove your max heights)Thank you very much
(just added an
overflow-y so that it's scrollable)
can't translate to Tailwind but you should be able to do it from that little POC @Kamran
@Chris Bolson trying to understand how contain: size works in here, as I was going with multiple nested elements but this is way simpler. How does contain make the second column to not grown in here?it basically prevents the element size from being defined by the content. Rather it is defined by it's size which, in this case, is defined by the grid.
Thanks a lot...I didn't think this solve so easy.
š
awesome trick!
Kevin demonstrated it on his CSS live chat a couple of weeks ago.
Yes, it is awesome!
https://discord.com/channels/436251713830125568/1413570889190211674/1413573002142027807
Nice!