Tailwind CSS Grid Cell Growing-CodePudding

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

CodePudding user response：

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.

CodePudding user response：

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 >
  <div >
    <div>
    <div id="card1" >
      <div >
        <div ><img  src="https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png?w=640" alt="card1"></div>
        <h2 >Card title</h2>
      </div>
      <div >
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat consequatur provident, nobis natu...<span > more</span></p>
      </div>
      <div >
        <div >
          <div ><span >Installed</span></div>
        </div>
      </div>
    </div>
    </div>
    <div>
    <div id="card2" >
      <div >
        <div ><img  src="https://socialistmodernism.com/wp-content/uploads/2017/07/placeholder-image.png?w=640" alt="card2"></div>
        <h2 >Card Title</h2>
      </div>
      <div >
        <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 > less</span></p>
      </div>
      <div >
        <div >
          <div ><span >Installed</span></div>
        </div>
      </div>
    </div>
    </div>
  </div>
</div>