I have a problem with stretching my grids horizontally so they would fit perfectly mine container. The task is to create grid 16/16 using flexbox and creating divs in js(then put it into container (sketch-screen) in html. The problem is i cant stretch as i want to. I tried to use flex:1 then 1 1 auto on divs in container but it did not want to work. I want it to fill all the space of the container so they will be squares not the rectangles. Plus then I would like to play with the size of 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>
You also need to make your .column
vertical flexboxes:
.sketch-screen>div {
height: auto;
flex: 1 0 auto;
/* make columns vertical flexboxes */
display: flex;
flex-direction: column;
}
.sketch-screen>div>* {
/* make rows evenly distributed */
flex: 1;
}
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;
/* make columns vertical flexboxes */
display: flex;
flex-direction: column;
}
.sketch-screen>div>* {
/* make rows evenly distributed */
flex: 1;
}
<div class="container">
<div class="sketch-container">
<div class="sketch-screen">
</div>
</div>
</div>
<footer>
<p>Design by 2023</p>
</footer>