HTML сетка имеет много места между элементами

Question

Я использую сетку HTML, и между элементом формы слишком много места. это мой HTML код формы (немного длинный, но сетка определена только в классе элементов формы):

    <form id="embeddings_weights_form" class="form-settings">
        <div class="form-element">
            <label for="id_slider">General Similarity (view invariant):</label>
            <input type="range" min="-1" max="1" step="0.1" id="id_slider" value="1">
            <input type="text" class="range-output" id="general_similarity_output" readonly="">
        </div>
        <div class="form-element">
            <label for="category_slider">category:</label>
            <input type="range" min="-1" max="1" step="0.1" id="category_slider" value="0">
            <input type="text" class="range-output" id="category_output" readonly="">
            <select id="categoryQuery" class="query-form-class">
                <option value="[object" object]="">[object Object]</option>
                <option value="[object" object]="">[object Object]</option>
            </select>
        </div>
        <div class="form-element">
            <label for="color_slider">color:</label>
            <input type="range" min="-1" max="1" step="0.1" id="color_slider" value="0">
            <input type="text" class="range-output" id="color_output" readonly="">
            <select id="colorQuery" class="query-form-class">
                <option value="[object" object]="">[object Object]</option>
                <option value="[object" object]="">[object Object]</option>
            </select>
        </div>
    </form>

My CSS для элемента формы:

.form-element{
    margin-bottom: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

Я устал задавать разные значения столбцов сетки-шаблона, но это всегда выглядит плохо (перемещение последнего элемента на следующую строку и более неправильный вывод)

вот так выглядит форма:

Вот как мне бы хотелось, чтобы это выглядело:

Answer 1

Поскольку в объявлении grid-template-columns вы задаете ширину каждого столбца 1fr, это означает, что все четыре столбца будут одинаковыми с.

Попробуйте установить третий столбец в автоматический режим и поиграть с шириной из входных данных:

Также добавлено свойство grid-gap, чтобы дать каждому столбцу немного передышки.

.form-element {
  margin-bottom: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr auto 1fr;
  grid-gap: 20px;
}

.range-output {
  max-width: 50px;
}

Я создал рабочий код здесь .