# 3x1 Card Collection CSS
**URL:** https://community.glideapps.com/t/3x1-card-collection-css/75110
**Category:** Ask for Help
**Tags:** custom-code
**Created:** [July 23, 2024, 1:37pm UTC](https://community.glideapps.com/t/3x1-card-collection-css/75110 "2024-07-23T13:37:25Z")
**Posts on this page:** 5
**Page:** 1
### Author:  [@MegannLock](https://community.glideapps.com/u/MegannLock)
#### Post date: [July 23, 2024, 1:37pm UTC](https://community.glideapps.com/t/3x1-card-collection-css/75110/1 "2024-07-23T13:37:25Z")
Can anyone provide some CSS to force a card collection to be a 3x1 ratio?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 23, 2024, 7:14pm UTC](https://community.glideapps.com/t/3x1-card-collection-css/75110/2 "2024-07-23T19:14:12Z")
I assume you want the aspect ratio of your card image.
```auto
.threeOneRatio [data-testid="card-image"] {
padding-top: 33.33%;
}
```
---
### Author:  [@abdo](https://community.glideapps.com/u/abdo)
#### Post date: [July 23, 2024, 8:26pm UTC](https://community.glideapps.com/t/3x1-card-collection-css/75110/3 "2024-07-23T20:26:40Z")
I wonder, is it stable to target the data-testid attribute? or is it better writing custom css targeting the class itself?
---
### Author:  [@Himaladin](https://community.glideapps.com/u/Himaladin)
#### Post date: [July 23, 2024, 11:28pm UTC](https://community.glideapps.com/t/3x1-card-collection-css/75110/4 "2024-07-23T23:28:51Z")
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.
---
### Author:  [@system](https://community.glideapps.com/u/system)
#### Post date: [August 5, 2024, 9:37am UTC](https://community.glideapps.com/t/3x1-card-collection-css/75110/5 "2024-08-05T09:37:49Z")
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.