I am having a few difficulties setting up the dynamic portion of the sketch project I am doing. The idea that I want to implement next is that the amount of squares (divs) changes inside the predetermined container and the boxes change size to always fill out the container. What happens is if the number of boxes is over 256 they overspill on the bottom and if it's not enough they just don't fill the extra space of the container.
Link to codepen - https://codepen.io/kcolrehs/pen/eYKZXoa
CSS
*, *:before, *:after { box-sizing: border-box; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; } .container { display: flex; flex-wrap: wrap; width: 250px; height: 250px; } .grid { border: 0.1px solid black; width: 15.63px; height: 15.63px;}Javascript:
for (let i = 0; i < 256; i++) { const grid = document.createElement('div'); grid.classList.add('grid'); container.appendChild(grid);}Question is : how do I style the boxes that they would automatically change sizes based on the amount of them inside the parent container?
For example:
- User inputs 64x64 and the grid changes to match the user input.
- User inputs 4x4 the grid changes to match the user input.
- The container itself has the same size.
I've tried using all sorts of flex grow and shrink properties, but it didn't really do anything apart from deforming the squares.
I've tried not using predetermined height and width of the square divs, using margint top and matching width but it didn't work as well.
By now I am thinking of just switching to grid layout and re-working my java to generate column and horizontal squares and making a grid like that , but before I am doing that I was thinking maybe there's a solution I'm not thinking of here.