- This topic is empty.
April 12, 2018 at 3:42 am #269723
Is there a way to achieve this?
I’ve been playing with CSS Tricks original article on this here:
Trying to make Row Three (or all rows) equal height in both columns here:
Wondering if its possible without resorting to JS?
What d’yall think :)April 12, 2018 at 4:17 am #269724
Did you want something like this?
I used grid here. I think you can do it with flexbox also.April 12, 2018 at 4:23 am #269725
Nice job @kh-mamun .. kind of looking for a flexbox solution, but not sure its possible with flexbox?April 12, 2018 at 4:50 am #269726Paulie_DMember
No, this is not possible in flexbox given the structure you have (vertical columns).
Flexbox (and pretty much any other layout method) does not have any method of equalising heights between elements that do not share a common parent.April 12, 2018 at 5:03 am #269727Omwati6229Participant
It is nice may calendar 2018
http://may2018calendar.netApril 12, 2018 at 5:17 am #269728PoganyParticipant
Is it possible to change your HTML or it has to stay as it is?April 12, 2018 at 5:20 am #269729
We could change markup..
The goal is to have a grid of tiles that are always the same height (depending on the content), and each internal row on each tile aligns up horizontally.April 12, 2018 at 6:15 am #269731
It’s flex based. See if it server the purpose.April 12, 2018 at 7:11 am #269736
I like it @kh-mamun, but we still need to markup our tiles as individual tiles due to react architecture.
Nice solution though :)
Re: the initial problem.. still not sure its solvable with flexApril 12, 2018 at 8:45 am #269738
I think I didn’t understand your problem. What is the actual problem? I thought you wanted rows to be equal height. Can you explain what is the problem and what solution are you looking for? This can be achieved with few other ways I guess. I might not be able to solve it but at least let me know with detailed explanation. Let’s try it…April 12, 2018 at 9:14 am #269739
The goal is to have a grid of tiles that are always the same height (depending on the content), and each internal row on each tile aligns up horizontally.
So we have the markup as in the original pen.. each tile is wrapped in its own wrapping div or li, the probelem comes when trying to align items horizontally, and the tiles should be ‘contextually’ aware of the one next to it, so that the rows are aligned, no matter what the content.
Thanks for the interest :)
The only solution we have arrived at, is to have fixed item content pinned to the top and or bottom, and then let items in the middle flex-grow.April 12, 2018 at 10:37 am #269741
Yep, thats the conclusion we came to.
Was hoping flexbox might be a solution but yes only JS or Grid can accomplish it.
Thanks for looking into it :)
- The forum ‘CSS’ is closed to new topics and replies.