Tailwind: equal height columns-CodePudding

I have 3 columns that each contain a persons image, name, function and a quote. I want all 3 columns to be equal in height.

So far i have tried setting p which did nothing, i also changed the 2nd inner div to . This did make the columns equal in height, but it made the div a row instead of a column, if i use flex-1 together with flex-col it does not set the columns equal in height.

How can achieve said behaviour without using a static height in tailwind?

HTML

<div >
    <div >
        <img  [src]="'/api'" alt="employee image">
    </div>
    <div >
        <h3 >{{employee?.name}}</h3>
        <h4 >{{employee?.function}}</h4>
        <p  [innerHtml]="employee?.quote"></p>
    </div>
</div>

CodePudding user response：

You should use utility classes grid and grid-cols-3 to create desired layout.

You can find below a code example based on the code you sent. By the way, for future questions you might ask on stack overflow, please note that the good practice is to share code that actually works, ie self-contained, preferably in a code snippet. As such, your code references an image and employee object which are not contained in your code.

<script src="https://cdn.tailwindcss.com"></script>

<div >
  <div >
    <div>
      <div >Image</div>
    </div>
    <div >
      <h3 >Employee Name</h3>
      <h4 >Employee Function</h4>
      <p >Employee Quote</p>
    </div>
  </div>
  <div >
    <div>
      <div >Image</div>
    </div>
    <div >
      <h3 >Employee Name</h3>
      <h4 >Employee Function</h4>
      <p >Employee Quote</p>
    </div>
    <div >
      <h3 >Employee Name</h3>
      <h4 >Employee Function</h4>
      <p >Employee Quote</p>
    </div>
  </div>
  <div >
    <div>
      <div >Image</div>
    </div>
    <div >
      <h3 >Employee Name</h3>
      <h4 >Employee Function</h4>
      <p >Employee Quote</p>
    </div>
  </div>
</div>

EDIT: Following OP's comment, I added flex-auto to the employee card so that it can grows if needed to match the height of other columns. Intrinsically, all columns in a grid have same height, you only need to let its inner elements grow if you want same to take all possible height.

CodePudding user response：

You can use a flex wrapper instead of using grid and specifying columns count.

<script src="https://cdn.tailwindcss.com"></script>

<div >
  <div >
    <div>
      <div >Image</div>
    </div>
    <div >
      <h3 >Employee Name</h3>
      <h4 >Employee Function</h4>
      <p >Employee Quote</p>
    </div>
  </div>
  <div >
    <div>
      <div >Image</div>
    </div>
    <div >
      <h3 >Employee Name</h3>
      <h4 >Employee Function</h4>
      <p >Employee Quote</p>
    </div>
    <div >
      <h3 >Employee Name</h3>
      <h4 >Employee Function</h4>
      <p >Employee Quote</p>
    </div>
  </div>
  <div >
    <div>
      <div >Image</div>
    </div>
    <div >
      <h3 >Employee Name</h3>
      <h4 >Employee Function</h4>
      <p >Employee Quote</p>
    </div>
  </div>
</div>