Я хочу создать сетку HTML-дивов, которые будут иметь одинаковое количество строк и столбцов но с количеством строк / столбцов, основанных на конкретном числе это будет передано в функцию Javascript.

например если число равно 3, сетка будет состоять из 3 строк и 3 столбцов.

если число равно 4, сетка будет 4 строки и 4 столбца .. и т. д.

в случае 3 выведенный код должен выглядеть примерно так:

<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>

Что такое хороший способ перебора javascript, чтобы правильные элементы можно определить, чтобы добавить открывающий или закрывающий теги div строки (?)