Tworzenie dynamicznej siatki div z Javascriptem

Chcę utworzyć siatkę elementów div HTML, które będą miały taką samą liczbę wierszy i kolumn, ale liczba wierszy / kolumn będzie oparta na konkretnym numerze, który zostanie przekazany do funkcji Javascript.

na przykład jeśli liczba wynosi 3, siatka będzie miała 3 rzędy i 3 kolumny

jeśli liczba wynosi 4, siatka będzie 4 wiersze i 4 kolumny ..

w przypadku 3 wyprowadzony kod musiałby wyglądać mniej więcej tak:

<div class="row">
  <div class="gridsquare">1</div>
  <div class="gridsquare">2</div>
  <div class="gridsquare">3</div>
</div>
<div class="row">
  <div class="gridsquare">4</div>
  <div class="gridsquare">5</div>
  <div class="gridsquare">6</div>
</div>
<div class="row">
  <div class="gridsquare">7</div>
  <div class="gridsquare">8</div>
  <div class="gridsquare">9</div>
</div>

Jaki jest dobry sposób iteracji przez javascript, aby można było zidentyfikować poprawne elementy, aby dodać znaczniki otwarcia lub zamknięcia wiersza div (?)

questionAnswers(3)

yourAnswerToTheQuestion