I'm working with Sveltekit and GraphCMS. I'm able to get my posts to properly loop over a single div but want to use two divs in a list to stagger the layout. The issue is the loop is resulting in two of the same posts (one in each staggered layout/div). What's the best way to loop over each list item? Thanks in advance!
Here's the loop:
<ul>
{#each posts as post}
<!-- first item -->
<li>
<div class="flex flex-wrap items-center -mx-4 mb-12 lg:mb-20">
<div class="w-full lg:w-2/5 px-4">
<div class="text-left lg:max-w-md">
<span class="inline-block text-xs px-2 py-1 bg-indigo-50 rounded uppercase text-indigo-500 font-semibold">Development</span>
<h2 class="mt-2 mb-4 text-3xl font-bold font-heading">{post.title}</h2>
<span class="inline-block mb-4 text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
<p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
</div>
<div class="order-first lg:order-last w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
<div class="h-96">
<img class="w-full h-full object-cover rounded-lg" src="plain-assets/images/indigo-600-horizontal.png" alt="">
</div>
</div>
</div>
</li>
<!-- second item -->
<li>
<div class="flex flex-wrap items-center -mx-4 mb-12 lg:mb-20">
<div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
<div class="h-96">
<img class="w-full h-full object-cover rounded-lg" src="plain-assets/images/indigo-600-horizontal.png" alt="">
</div>
</div>
<div class="w-full lg:w-2/5 px-4">
<div class="text-left lg:max-w-md lg:ml-auto">
<span class="inline-block text-xs px-2 py-1 bg-indigo-50 rounded uppercase text-indigo-500 font-semibold">Development</span>
<h2 class="mt-2 mb-4 text-3xl font-bold font-heading">{post.title}</h2>
<span class="inline-block mb-4 text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
<p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
</div>
</div>
</li>
{/each}
</ul>
From what I can understand, I believe you're trying to separate the style of odd and even divs, what you can do is something like the following, doing a very, very basic check on the index:
<ul>
{#each posts as post, index}
<li>
{#if !(index % 2)}
<!-- first item -->
<div class="flex flex-wrap items-center -mx-4 mb-12 lg:mb-20">
<div class="w-full lg:w-2/5 px-4">
<div class="text-left lg:max-w-md">
<span class="inline-block text-xs px-2 py-1 bg-indigo-50 rounded uppercase text-indigo-500 font-semibold">Development</span>
<h2 class="mt-2 mb-4 text-3xl font-bold font-heading">{post.title}</h2>
<span class="inline-block mb-4 text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
<p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
</div>
<div class="order-first lg:order-last w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
<div class="h-96">
<img class="w-full h-full object-cover rounded-lg" src="plain-assets/images/indigo-600-horizontal.png" alt="">
</div>
</div>
</div>
{:else}
<!-- second item -->
<div class="flex flex-wrap items-center -mx-4 mb-12 lg:mb-20">
<div class="w-full lg:w-3/5 px-4 mb-8 lg:mb-0">
<div class="h-96">
<img class="w-full h-full object-cover rounded-lg" src="plain-assets/images/indigo-600-horizontal.png" alt="">
</div>
</div>
<div class="w-full lg:w-2/5 px-4">
<div class="text-left lg:max-w-md lg:ml-auto">
<span class="inline-block text-xs px-2 py-1 bg-indigo-50 rounded uppercase text-indigo-500 font-semibold">Development</span>
<h2 class="mt-2 mb-4 text-3xl font-bold font-heading">{post.title}</h2>
<span class="inline-block mb-4 text-xs font-bold text-gray-500">10 jun 2022 19:40</span>
<p class="text-lg text-gray-500 leading-loose">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque massa nibh, pulvinar vitae aliquet nec, accumsan aliquet orci.</p>
</div>
</div>
</div>
{/if}
</li>
{/each}
</ul>
Otherwise, since you're using tailwind, you could use the First, last, odd, and even modifiers