How can I make a box with a constant size in Javascript/CSS?
Question
I am making a grid-based 'drawing' game which has an area (a box) to draw in. In that box there are other boxes which u can draw (by changing their background-colors). My question is, how can I make the main box (the drawing area) constant so that it won't resize if I change the size from 16x16 to 32x32 for example (and of course, the squares inside the area should scale to fit the new drawing area).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="style.css">
<title>Etch a sketch</title>
</head>
<body>
<div class='main-container'>
<div class="container"></div>
</div>
<script src="script.js"></script>
</body>
</html>
const container = document.querySelector('.container');
const mainContainer = document.querySelector('.main-container');
let size = 16;
mainContainer.style.display = 'grid';
mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
container.style.gridColumnStart = '2';
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(' + size + ', 1fr)';
container.style.gridTemplateRows = 'auto';
container.style.gridAutoColumns = '30px';
container.style.gridAutoRows = '30px';
let element;
for(let i = 0; i < size*size; i++) {
let element = document.createElement('div');
element.textContent = '';
element.onmouseenter = function() {
console.log('over');
element.style.background = 'black';
};
element.style.border = '1px solid black';
container.appendChild(element);
}
2 answers
solution1
0 2019-12-28 14:44:33
你需要修正尺寸
container.style.width = '100px'
solution2
0 ACCPTED 2019-12-28 14:45:50
Give your gridTemplateColumns a fixed pixel value.
container.style.gridTemplateColumns = 'repeat(' + size + ', 20px)';
https://jsfiddle.net/tLy3147s/
Edit: If you want the drawing area to stay the same size and have the squares scale to fit, you'll need to calculate the size based on the number of squares you want. Now, change numSquares and everything should adjust.
const container = document.querySelector('.container');
const mainContainer = document.querySelector('.main-container');
const drawBox = 300;
const numSquares = 16;
let size = drawBox / numSquares;
mainContainer.style.display = 'grid';
mainContainer.style.gridTemplateColumns = '1fr 1fr 1fr';
container.style.gridColumnStart = '2';
container.style.width = drawBox + 'px';
container.style.display = 'grid';
container.style.gridTemplateColumns = 'repeat(' + numSquares + ', auto)';
container.style.gridTemplateRows = 'auto';
container.style.gridAutoColumns = size + 'px';
container.style.gridAutoRows = size + 'px';
let element;
for(let i = 0; i < numSquares*numSquares; i++) {
let element = document.createElement('div');
element.textContent = '';
element.onmouseenter = function() {
console.log('over');
element.style.background = 'black';
};
element.style.border = '1px solid black';
container.appendChild(element);
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.