Kevin Powell - Community•2y ago

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•2y ago

Message Not Public

rezabet•2y 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•2y 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•2y 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.

Gaming

Programming

Fake grid list with flex child & active color