CODEWITHSUNDEEP
cssvue.jstailwind-css
Khan
Khan

Reputation: 1518

tailwind put a div in bottom of another div grid

enter image description herei have 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 have a grid with 1 column, in this column i have different colorful rows. blue red blue red and so on.. In the first of this rows i have another grid, this grid has two p tags with text and a container. This container should contain some input elements. But i cant manage to put this container in the bottom of the first row.

I want to put that container to the bottom of my first row.

As you can see in the image. The light red element with the grey square should be at the bottom of the element with the dark red background.

Another much easier question to this would be, if i had 3 rows with Lorem ipsum dolor sit amet... how could i put the 3rd row to the bottom?

if the question is unclear pls comment!

thank you for help!

Upvotes: 1

Views: 2126

Answers (1)

Fazeel Ashraf
Fazeel Ashraf

Reputation: 186

My understanding from your question is that you wanted to put row with dark red background below the row with light red background. For that you can use below code:

See output here

<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>
    </div>
    <div class="container bg-gray-900 p-10 h-screen text-white">
        <div class="flex justify-center bg-red-500 p-5">
            <div class="bg-gray-800 p-10 rounded-xl shadow-lg"></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>

Upvotes: 1

Related Questions