Inicialmente o seu problema é a falta de definição da unidade nas medidas de width e height, além disso, se você realmente quer criar elementos e não apenas estilizar algum existente previamente no DOM, você pode fazer criando ele via javascript e depois colocando ele em qualquer lugar do DOM que você quiser como nesse exemplo:
function criarQuadrado(cor = '#000') {
const quadrado = document.createElement('div');
quadrado.style.width = '64px';
quadrado.style.height = '64px';
quadrado.style.margin = '8px';
quadrado.style.backgroundColor = cor;
document.querySelector('#resultado').appendChild(quadrado);
}
#resultado {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
flex-wrap: wrap;
max-width: 512px;
}
<!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">
<title>Document</title>
</head>
<body>
<button onClick="criarQuadrado('blue')">Criar Quadrado Azul</button>
<button onClick="criarQuadrado('red')">Criar Quadrado Vermelho</button>
<button onClick="criarQuadrado('green')">Criar Quadrado Verde</button>
<div id="resultado"></div>
</body>
</html>