HTML 网格的元素之间有太多空间

Question

我使用 HTML 网格，表单元素之间的空间太大。这是我的表单 HTML 代码（有点长，但网格仅在 form-element 类中定义）：    <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>我的表单元素 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;

}

我在这里创建了一个工作代码笔。