I am facing an issue with stretching my grids horizontally in order to fit perfectly within my container. The objective is to create a 16/16 grid using flexbox and dynamically generate divs in JavaScript, which will then be placed into a container (sketch-screen) in HTML. However, I am encountering difficulty in achieving the desired stretch. I attempted to use 'flex:1' and '1 1 auto' on the divs within the container, but it did not yield the expected results. My goal is to have the grids fill all available space within the container so they appear as squares rather than rectangles. Additionally, I would like to have the flexibility to adjust the size of the grid.
function makeGrids(size) {
let screen = document.querySelector(".sketch-screen");
for (let i = 0; i < size; i++) {
let column = document.createElement("div");
column.classList.add("column");
for (let j = 1; j <= size; j++) {
let row = document.createElement("div");
row.classList.add("row");
row.style.border = "2px solid black";
row.innerText = (i * size) + j;
column.appendChild(row);
}
screen.appendChild(column);
}
}
makeGrids(16);* {
margin: 0;
padding: 0;
}
body {
background-color: #7d7d7d;
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
}
footer {
display: flex;
justify-content: center;
align-items: center;
margin-top: auto;
background-color: #555454;
padding: 12px;
margin-top: 16px;
}
.container {
display: flex;
justify-content: center;
align-items: center;
margin-top: 16px;
}
.sketch-container {
display: flex;
justify-content: center;
width: 800px;
height: 800px;
background-color: #991101;
padding-top: 50px;
}
.sketch-screen {
display: flex;
flex-direction: row;
justify-content: space-around;
width: 600px;
height: 600px;
background-color: #bfbfbf;
}
.sketch-screen>div {
height: auto;
flex: 1 0 auto;
}<div class="container">
<div class="sketch-container">
<div class="sketch-screen">
</div>
</div>
</div>
<footer>
<p>Design by 2023</p>
</footer>