https://i.sstatic.net/Clw7r.pngi am struggling with the following code
<template>
<div class="grid grid-cols-1 gap-4">
<div id="test" class="bg-red-700 h-screen">
<div class="grid grid-cols-1 gap-4 ">
<p class="bg-black center text-5xl shadow-md w-screen h-200">Lorem ipsum dolor sit amet ...</p>
<p class="bg-black center text-5xl shadow-md w-screen h-200">Lorem ipsum dolor sit amet ...</p>
<div class="container bg-gray-900 p-10 h-screen text-white">
<div class="flex justify-center bg-red-500 p-5"><!--inset-0 fill parent-->
<div class="bg-gray-800 p-10 rounded-xl shadow-lg">
</div>
</div>
</div>
</div>
</div>
<div class="bg-blue-800 h-screen">3</div>
<div class="bg-red-700 h-screen">4</div>
<div class="bg-blue-800">5</div>
<div class="bg-red-700">6</div>
<div class="bg-blue-800">7</div>
</div>
</template>
i am trying to place a container at the bottom of the first row in my grid which has alternating blue and red rows. However, I am facing some challenges in achieving this layout.
I wish to position the container at the bottom of the first row with the dark red background, as shown in the image.
Additionally, if I had 3 rows filled with Lorem ipsum dolor sit amet..., how can I move the content of the 3rd row to the bottom?
If there are any uncertainties in my question, please feel free to ask for clarification!
Thank you in advance for your assistance!