0
149
ViewsHow can I make these divs grow to fill the size of their container?
I'm trying to write a function that takes a users input to create a grid (16x16, 32x32 etc). The issue I'm having is getting the appended divs to scale properly to the container.
here is what it looks like:
function createGrid(input) {
const gridContainer = document.querySelector('.gridContainer');
for (let i = 0; i < input; i++) {
const row = document.createElement('div');
row.className = 'row';
for (let j = 1; j <= input; j++) {
const pixel = document.createElement('div');
pixel.className = 'pixel';
row.appendChild(pixel);
}
gridContainer.appendChild(row);
}
}body {
height: 100vh;
}
.pixel {
flex: 1;
min-width: 8px;
min-height: 8px;
border: 0.1px solid black;
}
.gridContainer {
display: flex;
flex-direction: row;
width: 600px;
height: 600px;
border: 2px solid red;
flex-wrap: wrap;
justify-content: center;
align-content: center;
align-items: stretch;
}<div class="gridContainer">
</div>
<input class="gridSize" type="number">I thought adding flex 1 with a minimum width and height to the divs would do the trick so I must be missing something here. (I'm a noob so I apologize in advance if it's a super easy fix).
·
Juan Pablo Isaza
1 answers
Answer question0
I believe this is the CSS you are looking for:
body {
height: 100vh;
}
.row {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.pixel {
flex: 1;
min-width: 8px;
min-height: 8px;
border: 0.1px solid black;
}
.gridContainer {
display: flex;
flex-direction: row;
width: 600px;
height: 600px;
border: 2px solid red;
flex-wrap: nowrap;
justify-content: space-between;
align-content: stretch;
}
In short, there are some adjustments regarding the .gridContainer and the .row classes.
·
Juan Pablo Isaza
Report
Answer question