I'm currently working with a Gatsby template from html5up and encountering an issue where the block posts are not stacking properly. It seems that due to varying text lengths in each post, there are gaps depending on the screen size. I've made all the images the same size, but that hasn't resolved the problem. I even attempted to make the paragraphs equal heights, but that didn't work either. What steps should I take to ensure that there are no gaps between the posts?
Below is the code for my gallery:
<article className="6u 12u$(xsmall) work-item" key={i}>
<div className="articleDiv">
<a
className="image fit thumb"
href={obj.source}
onClick={e => {
e.preventDefault();
this.toggleLightbox(i);
}}
>
<img src={obj.thumbnail} />
</a>
<h3>{obj.caption}</h3>
<p>{obj.description}</p>
</div>
</article>
Here's the HTML code for one of the posts on the page:
<article class="6u 12u$(xsmall) work-item">
<div class="articleDiv">
<a class="image fit thumb" href="/static/15Fullsize-95788b0c2a3cd7f5b7be5197b162af0b.jpeg"><img src="/static/15Thumbnail-3f93874146f2072572920b9eb793a1cf.jpeg"></a>
<h3>2005 Chevrolet Equinox LT AWD</h3>
<p>Local vehicle with heated leather, moonroof, and lots more. Completely checked out, serviced, and inspected. Only $4,995. Gets around on the ice fantastic.</p>
</div>
</article>
https://i.sstatic.net/Q04U4.png
Attached is a developer screenshot showcasing how the articles do not align properly.