Lines cards with large text on the same line

Question

I have a screen that makes a user card listing, but depending on the size of the text that will go on the card, it loses orientation and ends up "popping" the line.

Example:

How I need:

How can I do that regardless of the text, it will always respect 3 cards per line? In this example I put, I only left a fixed size (height), but when the text exceeds the size, it continues "popping".

My files: Demo

Answer 1

Hello. One way to solve this problem would be to add a clear:left; on all cards that start the line. This property will cause these cards to be added to a new line, with no effect on float applied to the previous card.

For this, you can remove the divs with class my-class and add a class my-card cards. After that you can use the pseudo-class CSS :nth-of-type to apply clear only the first cards of each line. This pseudo-class allows selecting only some elements of a certain type according to the order in which they appear. Read more about it here.

I noticed that in your code the number of cards per line is modified according to the screen size, so we have to deal with both cases: where only two cards appear per line and when three cards appear per line.

Consider that we have listed the cards of 1 until N. When we have only two cards per line, the beginning of each line is always an odd card and when we have three cards per line the beginning of each line is always 3n + 1, in which n is the line number (starting from 0).

That way, we can use @media to handle the number of cards per line and apply :nth-of-type correctly. Follow the css:

/* com dois cards por linha */
@media (max-width: 1139px){
  .my-card:nth-of-type(odd){
    clear: left;   
  }
}

/* com três cards por linha */
@media (min-width: 1140px){
  .my-card:nth-of-type(3n+1){
    clear: left;
  }
}

Follows the fiddle with the example you sent modified.

I hope I’ve helped.