I'm just wondering, how can I prevent these situations when the title is larger and then it forces content to loose their bottom padding. I'm using tailwind so the classes represent what my content styles are:

grid-item styles: flex flex-col gap-4 
content styles inside grid-item: flex flex-col gap-4 px-5 pb-6

Maybe I need to set a min-height for grid? or should I play with flex?

CodePudding user response：

Try the below code snippet:

.row{
  display:flex;
  gap: 10px;
  padding:10px 0;
  background: #efefef;
}

.row .col{
  background:#fff;
}

.row .col h4{
  text-overflow:ellipsis;
  overflow: hidden;
  max-width:120px; /* Specify width of heading, after that width everything would be hidden */
  white-space:nowrap;
}

<div >
  <div >
    <h4>Heading 2</h4>
    <p>The text-overflow property may be specified using one or two values.</p>
  </div>
  <div >
    <h4>Heading 2 is of column two is bigger than others</h4>
    <p>The text-overflow property may be specified using one or two values.</p>
  </div>
  <div >
    <h4>Heading 2</h4>
    <p>The text-overflow property may be specified using one or two values.</p>
  </div>
</div> 

By using text-overflow: ellipsis in css we can prevent the different box height. In which every heading would be shown in single line. if anything exceed the heading width it will be hidden and ... will placed after it.

I hope this will resolved your issue.