Tailwind: equal height columns

Question

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 class="flex-1" which did nothing, i also changed the 2nd inner div to class="flex flex-1 p-6 gap-y-4". 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


    
        
    
    
        {{employee?.name}}
        {{employee?.function}}

user_13371166 · Answer

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.




  
    
      Image
    
    
      Employee Name
      Employee Function
      Employee Quote
    
  
  
    
      Image
    
    
      Employee Name
      Employee Function
      Employee Quote
    
    
      Employee Name
      Employee Function
      Employee Quote
    
  
  
    
      Image
    
    
      Employee Name
      Employee Function
      Employee Quote

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.

user_10698741 · Answer

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




  
    
      Image
    
    
      Employee Name
      Employee Function
      Employee Quote
    
  
  
    
      Image
    
    
      Employee Name
      Employee Function
      Employee Quote
    
    
      Employee Name
      Employee Function
      Employee Quote
    
  
  
    
      Image
    
    
      Employee Name
      Employee Function
      Employee Quote

Tailwind: equal height columns

2 Answers