Как разместить html-входы в сетке в нужном месте автоматически или вручную через js?

Я думаю, это то, что вы имеете в виду...

Чтобы отображать элементы внутри сетки, где вы хотите, когда пользователь что-то вводит в режиме реального времени, вы можете использовать этот подход:

1 - Непосредственно в HTML:

Вы можете использовать свойство oninput объекта GlobalEventHandlers.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oninput

...вместе со значением каждого входа:

Допустим, у нас есть: (ПОЛЬЗОВАТЕЛЬСКИЙ ВВОД)

 <input type = "text" 
    id = "userName" 

    <!-- ADD THIS -->

    oninput = "nameOutput.value = userName.value"/>


which corresponds to : (USER OUTPUT)

<input id = "nameOutput">

... убедитесь, что вы используете идентификаторы для связи обоих полей ввода.

таким образом вы получаете просто значение ввода в режиме реального времени...

2 - Использование функции JS:

то, если вы назначите функцию JavaScript для «oninput», вы можете использовать:

** innerHTML: изменить содержимое

и

** classList.add() : чтобы оформить вывод так, как вам нравится

 >>> here is where you can place any element inside a new position on a grid

Итак, сначала вы создаете класс, описывающий эту новую позицию или что угодно в CSS:

допустим, у нас есть сетка 20x20, и этот элемент был расположен в первом столбце и первой строке:

CSS

.showNameOutput {
  grid-column: 5/6;
    grid-row: 1/2;

  background-color: blue; /* or whatever */
}

это меняет свое положение в сетке

а затем вы можете добавить этот класс к ранее выбранному элементу

JS

const nameOutput = document.querySelector('.nameOutput'); // the the output HTML element has this class

function myFunction() {
  nameOutput.classList.add('showNameOutput'); // we're adding new properties to that element
}

функция будет выполняться всякий раз, когда пользователь вводит что-либо на входе, поэтому она «перемещает» элемент вывода.

.... см. пример ниже, это может помочь... Я только что добавил пару вещей:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_ev_oninput

сначала вы создаете класс, который изменит некоторые свойства CSS:

<style>
.change {
    color: red;
    }
</style>


<p>Write something in the text field to trigger a function.</p>

затем вы назначаете функцию oninput :

<input type = "text" id = "myInput" oninput = "myFunction()">

<p id = "demo"></p>

и создайте функцию, в которой вы используете этот класс:

<script>

function myFunction() {
  //extract the value from the DOM input :
  var x = document.getElementById("myInput").value; 
    // use of innerHTML :
  document.getElementById("demo").innerHTML = "You wrote: " + x;
    // use of classList.add('yourClass') to make CSS changes:
  element.classList.add('change'); // in this case we just change the color as you can see
}

</script>

• Отображение всего сразу:

В этом случае значения могут быть введены с помощью какой-либо формы и кнопки отправки, если хотите...

Затем вы можете использовать массив для хранения этих значений, а затем отображать их все сразу, когда пользователь нажимает кнопку, используя любую логику, которую вы предпочитаете... вы также можете использовать эти свойства.

Надеюсь, это поможет...