Tailwind CSS Grid Cell Growing

I am a beginner on TailwindCSS here, and I need to build a grid with “Cards” which might need to accomodate a large description, the idea is to have a “more” link which will display the whole description. My problem is when one of the cells is growing, all the cells in the same row grow at the size of the expanded one. I would like that only the expanded cell border grows but the rest remain collapsed.
It is ok if the whole row is expanded, the thing is the border should remain collapsed. Probably is more a CSS than a Tailwind thing but as I said, I am a beginner here.

HTML (https://codepen.io/telit0/details/WNdbwMG)

Actual view

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

One simple solution would be using items-start from tailwind itself

Demo

There are also items-end, items-center, items-baseline, item-stretch, depending on how you need to align your content vertically within your grid items.

Method 2

Just add any block element between grid element and your card (wrap your cards in another div) so grid will stretch its parent element instead of bordered element.

<script src="https://cdn.tailwindcss.com"></script>
<div class="mx-auto max-w-6xl m-5 flex overflow-auto">
  <div class="grid grid-cols-2 gap-4 mb-12">
    <div>
    <div id="card1" class="bg-orange-100 border rounded align-middle object-center text-center justify-items-center w-64 m-2 p-5">
      <div class="justify-center items-center  mb-5 h-24 ">
        <div class="justify-center align-middle mb-2 flex items-center "><img class="h-16" src="https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png?w=640" alt="card1"></div>
        <h2 class="text-center text-base align-middle text-middle ">Card title</h2>
      </div>
      <div class="text-sm min-h-24">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat consequatur provident, nobis natu...<span class="text-orange-400"> more</span></p>
      </div>
      <div class="px-2/5 py-4">
        <div class="bg-gray-100 text-black hover:bg-orange-400 hover:text-white rounded-lg text-base font-bold  focus:outline-none items-center align-middle text-center ">
          <div class="py-3 px-5 flex items-center justify-center w-auto"><span class="px-2">Installed</span></div>
        </div>
      </div>
    </div>
    </div>
    <div>
    <div id="card2" class="bg-orange-100 border rounded align-middle object-center text-center justify-items-center w-64 m-2 p-5">
      <div class="justify-center items-center  mb-5 h-24 ">
        <div class="justify-center align-middle mb-2 flex items-center "><img class="h-16" src="https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png?w=640" alt="card2"></div>
        <h2 class="text-center text-base align-middle text-middle ">Card Title</h2>
      </div>
      <div class="text-sm min-h-24">
        <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur officiis doloribus autem nihil laudantium minus veniam similique atque saepe dolores commodi in accusantium, vero eum ut incidunt doloremque omnis. Suscipit?<span class="text-orange"> less</span></p>
      </div>
      <div class="px-2/5 py-4">
        <div class="bg-gray-100 text-black hover:bg-orange-400 hover:text-white rounded-lg text-base font-bold  focus:outline-none items-center align-middle text-center ">
          <div class="py-3 px-5 flex items-center justify-center w-auto"><span class="px-2">Installed</span></div>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>


All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Subscribe
Notify of
guest

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x