CODEWITHSUNDEEP
htmlcsstailwind-css
Telito
Telito

Reputation: 150

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

Upvotes: 0

Views: 3512

Answers (2)

Cuong Vu
Cuong Vu

Reputation: 3723

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.

Upvotes: 1

Jax-p
Jax-p

Reputation: 8531

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>

Upvotes: 1

Related Questions