Hi there!
I have tried column and flex box and it doesn’t do the trick! I am trying to build a series of grid that has the same height regardless of content. I have found several solutions from the forum but they unfortunately do not work! somehow the height of the div block changes from time to time as well…not sure what is happening!!
This is my link: Webflow - Jason Chen's Portfolio
Thanks!!!
Here is my public share link: LINK
(how to access public share link)
Well, from my initial look. You haven’t specified for any divs nor height or width. The answer is within you question… you want specified equal height…
By default any DIV you create they have values of Auto = meaning they will stretch to child content. In your case you have two images of different dimensions. One on the left has 476x375px and on the right 902x719px if you don’t specify parent div width or height, they will automatically resize to fit the content.
If you wish them to stay in same position. You would need to set some constraints to the parent divs.
For example - set your Div Block 13 height 600px ( or whatever you want )
Div block 41 and 41 height to 100% ( meaning they will be always 600px )
Set both image width to 400px.
And you should see the results.
Hopefully this will get you in the right direction.
But since i don’t know about which elements are you talking I assumed it’s the two images.
I’d do this through Flexbox. Create a div and make it Flex, have a div inside to control padding then move your divs inside but give them all the same class name and set width at 33.33% or 25%. You could also use the CMS to hold your items and build this the same way.
Thank you both! I did try the set height, but somehow it did not work, maybe I set in the wrong div block, let me give it another go and see what happens this time 
The reason your content was flowing outside the grid was due ot the height of the image on the right hand side vs the set height of the Div container it was placed inside.
The 100% width you had for that image resulted in the height being larger than the height you had set for the container.
I can see you’ve solved this by increasing the height in your new screenshot.
Yes! But I also realized that setting fixed height is not the best practice due to the loss of responsiveness! So in the end, I resorted to photoshop and created images with the same dimension! Then, put it in a div and set to auto! 
Images that are the same size are convenient. Did you try using Flexbox as an equal height grid is completely doable.
Yes I did try! But then I realize using flexbox only (without same size images) seem not to be a good practice because it is hard to control the exact size of the boxes. I don’t want to do set px for the width/height of the boxes, because that is not responsive, thus I want “auto”. So after trying out column, flexbox, and a combination of both, I think the best way is to produce images with set dimensions, and set the div to “auto”, and put them into column. That way, the dimension of the boxes will be responsive! This also allows me to have a more precise control on the images (background color, contrast, etc.)
Flexbox is responsive and does equal height. You can use % for width. I hardly ever use columns anymore and have layouts like the what you are attempting and they are fully responsive. You do still have to consider breakpoints of course.
As long as you have the result you are looking for that’s what matters!
Yes of course! I just wanted to post it here so other people who are looking for solutions can know what to do
Flexbox is indeed responsive, but it also has some weird behavior from time to time and you don’t have very precise control over the image! True that I could use % to control the width but sometimes it makes it behave weirdly. Thanks for engaging in discussion with me This is a great tool
This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.
