I'm trying to create a two-column grid with Tailwind with variable post height for the items in the column. See design below.
Design:
Now I already got a two-column setup, but the items within are all equal height even with align-items: flex-start; added. Is there a (CSS only) solution to fix this? I tried both flexbox and grid, but both are making the posts equal height.
Code:
<div class="flex flex-row flex-wrap -mx-20 items-start justify-start">
<div class="flex flex-col justify-start items-start w-full md:w-1/2 md:px-20 mb-20 2xl:mb-40"
id="even-uitgelichte-onderwerpen">
<div class="featured-item mb-20 2xl:mb-40"> <span class="subtitle mb-2">subtitle</span>
<h2 class="h2 mb-0">Here the post title of page</h2>
<div class="text-lg font-sans mt-6 prose lg:prose-xl"> Blijf op de hoogte van de nieuwste ontwikkelingen en grijp de kans om je te verdiepen in de onderwerpen die we graag extra aandacht geven. </div>
</div>
<article data-partial="article-post"
id="post-276"
class="flex flex-col post-276 uitgelicht type-uitgelicht status-publish has-post-thumbnail hentry"
role="article"> <a href="https://thema-websites.test/uitgelicht/in-gesprek-met-sylvia-doodeman/"
class="group">
<div class="block w-full overflow-hidden mb-8"> <img width="540"
height="304"
src="https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae.jpg"
class="object-cover object-center inline-block w-full h-auto group-hover:scale-105 transition-all duration-200 ease-in-out"
alt="photo 1652285952513 9d363975f5ae"
loading="lazy"
srcset="https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae.jpg 1920w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae-300x169.jpg 300w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae-1024x576.jpg 1024w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae-768x432.jpg 768w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae-1536x864.jpg 1536w"
sizes="(max-width: 540px) 100vw, 540px"> </div> <span class="subtitle">Ideeënbus</span>
<h3 class="h3 mb-2 group-hover:underline">In gesprek met</h3>
<div class="prose lg:prose-lg">
<p>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales…</p>
</div>
</a> </article>
</div>
<div class="flex flex-col justify-start items-start w-full md:w-1/2 md:px-20 mb-20 2xl:mb-40"
id="odd-uitgelichte-onderwerpen">
<article data-partial="article-post"
id="post-274"
class="flex flex-col post-274 uitgelicht type-uitgelicht status-publish has-post-thumbnail hentry"
role="article"> <a href="https://thema-websites.test/uitgelicht/een-avontuurlijke-speelplek/"
class="group">
<div class="block w-full overflow-hidden mb-8"> <img width="540"
height="304"
src="https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae.jpg"
class="object-cover object-center inline-block w-full h-auto group-hover:scale-105 transition-all duration-200 ease-in-out"
alt="photo 1652285952513 9d363975f5ae"
loading="lazy"
srcset="https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae.jpg 1920w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae-300x169.jpg 300w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae-1024x576.jpg 1024w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae-768x432.jpg 768w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1652285952513-9d363975f5ae-1536x864.jpg 1536w"
sizes="(max-width: 540px) 100vw, 540px"> </div> <span class="subtitle">Activiteiten voor iedereen</span>
<h3 class="h3 mb-2 group-hover:underline">Een avontuurlijke speelplek</h3>
<div class="prose lg:prose-lg">
<p>Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Donec elit libero, sodales…</p>
</div>
</a> </article>
</div>
<div class="flex flex-col justify-start items-start w-full md:w-1/2 md:px-20 mb-20 2xl:mb-40"
id="even-uitgelichte-onderwerpen">
<article data-partial="article-post"
id="post-270"
class="flex flex-col post-270 uitgelicht type-uitgelicht status-publish hentry"
role="article"> <a href="https://thema-websites.test/uitgelicht/werk-in-uitvoering/"
class="group">
<div class="block w-full overflow-hidden mb-8"> </div> <span class="subtitle">De werkzaamheden</span>
<h3 class="h3 mb-2 group-hover:underline">Werk in uitvoering</h3>
<div class="prose lg:prose-lg">
<p></p>
</div>
</a> </article>
</div>
<div class="flex flex-col justify-start items-start w-full md:w-1/2 md:px-20 mb-20 2xl:mb-40"
id="odd-uitgelichte-onderwerpen">
<article data-partial="article-post"
id="post-267"
class="flex flex-col post-267 uitgelicht type-uitgelicht status-publish has-post-thumbnail hentry"
role="article"> <a href="https://thema-websites.test/uitgelicht/zomer-2023-eerste-deel-klaar/"
class="group">
<div class="block w-full overflow-hidden mb-8"> <img width="540"
height="304"
src="https://thema-websites.test/wp-content/uploads/2022/05/photo-1651912475407-f2d2b841abb8.jpg"
class="object-cover object-center inline-block w-full h-auto group-hover:scale-105 transition-all duration-200 ease-in-out"
alt="photo 1651912475407 f2d2b841abb8"
loading="lazy"
srcset="https://thema-websites.test/wp-content/uploads/2022/05/photo-1651912475407-f2d2b841abb8.jpg 1920w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1651912475407-f2d2b841abb8-300x169.jpg 300w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1651912475407-f2d2b841abb8-1024x576.jpg 1024w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1651912475407-f2d2b841abb8-768x432.jpg 768w, https://thema-websites.test/wp-content/uploads/2022/05/photo-1651912475407-f2d2b841abb8-1536x864.jpg 1536w"
sizes="(max-width: 540px) 100vw, 540px"> </div> <span class="subtitle">Het is zo ver</span>
<h3 class="h3 mb-2 group-hover:underline">Zomer 2023: eerste deel klaar!</h3>
<div class="prose lg:prose-lg">
<p></p>
</div>
</a> </article>
</div>
</div>
Thanks in advance!
