我使用 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;}我厭倦了給網格模板列不同的值，但它看起來總是很糟糕（將最后一個元素移動到下一行，輸出更糟糕）表格如下所示：這就是我希望它看起來的樣子：