Responsive card sizing

Hi, I'm attempting to make a responsive layout for a card display. I have three objectives : - Cards should all be the same size. - There should be as many cards on a row as possible. - Cards should expand to fill remaining space. I tried it with flex in the following codepen. I could check the last two goals, but not the first one. How can i force the last one to have the same size as siblings ? https://codepen.io/quentin7381/pen/WNyXEmq
2 Replies
MarkBoots
MarkBoots•2y ago
you can use grid for this
.container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px;
}
.card {
/*width not neccessary, the container determins the size
}
.container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 10px;
}
.card {
/*width not neccessary, the container determins the size
}
Xero'
Xero'•2y ago
i like how every time i discover something in css i feel like it will change why whole life 😄 didn't know about auto-fit and minmax, thats just so nice ty !
Want results from more Discord servers?
Add your server