Dynamic card buttons (with grid?)

28 Replies

i would rather make cards with grid. something like this https://codepen.io/tok124/pen/xxyJLQm

Unknown UserOP•3y ago

Message Not Public

Yeah 🙂 i updated it and added a custom property for min column width and a few stuff, not sure if you noticed but yeah i think it works a lot better when you use grid for this kind of stuff flex is still really awesome. but not for this

Unknown UserOP•3y ago

Message Not Public

Tok124 (CSS Nerd)•3y ago

that should be possible by changing the 1fr or im not really sure... i have tried changing this 1fr to something else, but it does not seem to be working, but anyway, even if it is possible i don't think it would look very good.

Unknown UserOP•3y ago

Message Not Public

Tok124 (CSS Nerd)•3y ago

you can change the 200px value try change it to 100px or something

Tok124 (CSS Nerd)•3y ago

you see, now they are very small

Tok124 (CSS Nerd)•3y ago

thats why i added a custom property for this to make it easier for you to adjust this value to whatever you prefer

Unknown UserOP•3y ago

Message Not Public

Tok124 (CSS Nerd)•3y ago

i'm just curious, what did chatgpt recommend? 🙂 of course, for .card-buttons class you can do

.card-buttons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.card-buttons button:last-child {
  grid-column:span 2;
}

.card-buttons {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.card-buttons button:last-child {
  grid-column:span 2;
}

But yeah, in this case the last child will always span 2 columns. so if you add in another button so you have 4 buttons, it will not really work... so i am kinda curious but i think flex is the way to go to get the result in the image you sent

Unknown UserOP•3y ago

Message Not Public

Tok124 (CSS Nerd)•3y ago

yeah, so it went with flex, yeah, thats good however, you can remove the width:100%;

Unknown UserOP•3y ago

Message Not Public

Tok124 (CSS Nerd)•3y ago

Yeah 🙂

Unknown UserOP•3y ago

Message Not Public

Tok124 (CSS Nerd)•3y ago

Hmm... Yeah tahts strange. I would like to inspect the code and see why that happens lol. but width:100%; is not really the best, you may end up with scrollbar. I recommend you to resize the screen as much as possible and check that a scrollbar does not appear. and try the same with all browsers, at least the ones that most people use (chrome, firefox, edge)

Unknown UserOP•3y ago

Message Not Public

Tok124 (CSS Nerd)•3y ago

i guess you have used position:absolute; or something

Unknown UserOP•3y ago

Message Not Public

Tok124 (CSS Nerd)•3y ago

yeah, of course, a scrollbar should appear. but i highly doubt you want a scrollbar inside your cards

Unknown UserOP•3y ago

Message Not Public

Tok124 (CSS Nerd)•3y ago

And you have tested in all browsers?