KPC
Kevin Powell - Community•3y ago
Xero'

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
Quentin7381
CodePen
Flex grow and min width
...
2 Replies
MarkBoots
MarkBoots•3y 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'OP•3y 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 !

Did you find this page helpful?