Moving some element with range input, no javascript
Hi everyone, I'm trying to create some swipe captcha and everything works perfectly without javascript except one thing. When user moves the range I use javascript to move black box so visually user can see when it fits inside the red box. Is there a some weird css feature that I can achive this with?
Flexbox or Grid?
I'm trying to build this UI here (see screenshot)
I wanted to add the flex wrapping behavior for mobile responsiveness, but also am having trouble figuring out what I am supposed to do with flex basis or grow or shrink.
If I give each tile
flex: 0 0 588px, then they are not dynamic and they just "pop" onto the next row as I shrink the viewport. When I use flex: 1 1 588px as shown in the codepen, the tile that wraps to the 2nd row grows to take up all of the available space. Ideally, I want the top row to distribute the space as evenly as it can, and then match the width of each tile in the 2nd row (a faux grid). The idea being that each tile has a minimum width of 588px and will go to the next row if it falls below that. Then if we are on a really narrow viewport, the width can drop below 588px.
...
Border inside grid (animated if possible)
any ideas how to make this borders inside of the grid?
with little dots at the ends
and maybe draw them at first load...
