3x1 Card Collection CSS

[MegannLock]

Can anyone provide some CSS to force a card collection to be a 3x1 ratio?

[Himaladin]

I assume you want the aspect ratio of your card image.

.threeOneRatio [data-testid="card-image"] {
padding-top: 33.33%;
}

[abdo]

I wonder, is it stable to target the data-testid attribute? or is it better writing custom css targeting the class itself?

[Himaladin]

The data-testid attribute is much more stable than class or ID because it is not used for styling or other purposes within the application, except when explicitly updated by Glide. Here, I have created a custom class name threeOneRatio and placed it in the collection component.

I will try to explain with an example: using [aria-label="Submit"] is less stable because it relies on the text of the label, especially if you are dealing with an application that uses a translator. If Glide provided a data-testid for this button, this issue would not occur.