Kevin Powell - Community•3y ago

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•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'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 !

Gaming

Programming

Responsive card sizing