It seems like you are trying to create a grid with divs, right? So try changing your style like this:
.square {
border: 1px solid;
background-color: black;
position: inline;
height: 1.5em;
width: 1.5em;
}
But honestly if it were me I would use a TABLE to create my grid
For some reason the following code won’t print throughout the whole document. It only prints the top line when it is supposed to print thought-out all the greyed area.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
<title>Etch-A-Sketch</title>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Syne+Mono&display=swap');
</style>
<header class="header">
<h1>Etch-A-Sketch</h1>
</header>
<div class='display'></div>
<button class='button'><span>Clear</span></button>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS
margin: 0 auto;
padding: 0;
}
body {
background-color: red;
}
.header {
height:90px;
}
h1 {
margin-bottom: 20px;
color: white;
margin-left: 475px;
top: 15px;
position: relative;
font-size: 55px;
font-family: 'Syne Mono', monospace;
}
.display {
height: 570px;
background-color: rgb(150, 150, 150);
display: grid;
outline: 1px solid;
grid-template-columns: repeat(16,1fr);
grid-template-rows: repeat(16,1fr);
}
.button {
border-radius: 4px;
background-color: white;
border: none;
color: black;
text-align: center;
font-size: 28px;
padding: 20px;
width: 250px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
margin-left: 535px;
margin-top: 45px;
font-family: 'Syne Mono', monospace;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: ' 0bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
.square {
border: 1px solid;
background-color: black;
}
JavaScript
const display = document.getElementsByClassName('display')[0];
const clear = document.getElementsByClassName('button')[0];
function grid() {
for(let i = 0; i < 4; i++) {
for(let j = 0; j < 4; j++) {
console.log("yoyo");
let square = document.createElement('div');
square.className = 'square';
display.appendChild(square);
}
}
};
grid();
Please help me, I don’t see what the problem is. Thank you! Me and my friend are doing the same code, it is very similar and we both have the same issue. Even the coding teach can’t figure it out. Lol.
Hello. It is not entirely clear what result you want to get. Do you want the stripes to be full height for each grid cell?