KPC
Kevin Powell - Community•3y ago
Myndi

Fake grid list with flex child & active color

I want the childs of this grid to expand to the maximum size while staying right on the middle. I feel like I'm missing something within flex property, or simply don't know how to do it, because align-items: center; makes them minimum size. Also, side question, is it possible to, whenever I click on them, to change their background color and stay like that once I click on them again? (kind of like a toggle) https://codepen.io/myntsu/pen/KKREmre
Myndi
CodePen
Grid check list
...
4 Replies
Unknown User
Unknown User•3y ago
Message Not Public
Sign In & Join Server To View
/bin/son-arg
/bin/son-arg•3y ago
There are a number of ways to do this One is by having a set height and width: https://jsfiddle.net/3h2v5pta/6/ If you do not want to have a set height and width and still want to use flex, this does not perfect but as close as possible when using Flexbox: https://jsfiddle.net/3h2v5pta/9/ And another solution, if you don't want a set height and width without actually defining height and width, is by using grid: https://jsfiddle.net/3h2v5pta/23/
13eck
13eck•3y ago
Also, side question, is it possible to, whenever I click on them, to change their background color and stay like that once I click on them again? (kind of like a toggle)
That's fairly easy, yes. Two changes need to be made: Step 1: Change your CSS 
/*remove this last line
form {
  display: none;
} */

/* Add these two */
input[type="radio"] {
  display: none;
}

/* I just chose one of your colours, feel free to
   use another one :p
*/
input[type="radio"]:checked + label {
  background: hsl(var(--bg-light));
}
/*remove this last line
form {
  display: none;
} */

/* Add these two */
input[type="radio"] {
  display: none;
}

/* I just chose one of your colours, feel free to
   use another one :p
*/
input[type="radio"]:checked + label {
  background: hsl(var(--bg-light));
}
Step 2: Rearrange the HTML Put each radio button immediately before the appropriate label so the last line of CSS can work. Also change the .grad-wrapper class to be a form instead of a div so it can be properly submitted.
Myndi
MyndiOP•3y ago
This will make the filtering with CSS too difficult 😔 I went with a JS instead, to toggle on/off on user click. But, funnily enough, I assumed up front it wasn't going to work, lol. I feel like I always ask the most silly things dogekek wasn't the approach, but you know, it works. I still feel there was a flex property that could fix this, but honestly can't remember now. Thanks for the help, to all three of myndiPat now I've got another question. Is it possible to go from display: none; to display: block; with a transition? I know you can with visibility, but it still occupies empty space, so in a grid list, it looks weird sadCat will make a separate post for this.

Did you find this page helpful?