KPC
Kevin Powell - Community•2y 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•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
More Posts
Element arrangement?Quick question. This section isn't really nice in terms of responsiveness.. Any nicer layout ideas?environment variables aren't working correctly on staging (vercel+next.js)hello I still receive production value on staging environment even tough I've setup ( Vercel / NextFingerprintHas anyone worked on a web based fingerprint authentication and what languages (excluding the C brotRadio-button JS if(radioButton.checked)How to select all the Radio-buttons in the same group(same name attribute), and when checked, they wSlide not slides from slide 4 if you start from lastI have this bug which i am trying to resolve in slider when we goto the last slide and move to slideWhy does the position sticky and z-index does not work properly on table?So i did this demo https://codepen.io/H4ds0n/pen/gOKGEVX My goal was to take the first row and its Converting scss to sassThese two mixins are equivalent? but while the one in scss applies, the other doesn't ```css @mixin Responsiveness methodHello 👋 Now when it comes to making website responsive I fellow two design modes, Portrait mode or How do I handle parent, child, sibling z-index relationship. How does this work ?Here is link to codepen: https://codepen.io/H4ds0n/pen/poKWQga?editors=1111 I was wondering if this Trying to make Canvas image into a circular image in chart.js(Line Graph)Firstly user will given some random image which are of circle in shape and if any user uploads his o