I am trying to display around 10 embedded tweets in my React app. The tweets have the same width but different heights, and instead of using a normal Row/Col structure which would create big vertical gaps between columns (due to the height differences) I would like to display the tweets in a grid similar to this one here (ignore the animation, what matters is that the "cells" have different heights and same width and they create a grid where the vertical gap between cells are constant).
Following this StackOverFlow answer, I tried to achieve my desire layout using pure CSS. It almost works but I'm not quite there yet. This is the code I have:
<section style={{columnWidth: '15rem', columnGap: '5px', padding: '5px'}}>
{
embedded_tweets_active_data.map((tweet) => {
return <EmbeddedTweet tweet_id={tweet}/>
})
}
</section>
What I am getting is the following:
So basically the grid layout is there, but for some reason
- The tweets do not start at the same y coordinate. The first tweet on the top left is way above the three tweets to its right, leaving that big gap in the upper area
- At the very bottom, the tweets are cut. I can't scroll down: they are literally cut.
Does anyone know how I could achieve the layout I'm looking for / fix this code?
