我有一張看起來像這樣的桌子使用此代碼：嵌入設置Id：類別1：無類別2：無重置嵌入和 CSS 類表單元素：.form-element { 邊距底部：20px; 顯示：網格；網格模板列：1fr 1fr auto 1fr；網格間隙：20px；}所以看起來不錯。我想添加 1 個復選框并使表單如下所示：問題是當我嘗試添加帶有復選框的新列時：使用此代碼（只需添加一個復選框輸入）：.form-element {  margin-bottom: 20px;  display: grid;  grid-template-columns: 1fr 1fr auto 1fr 1fr;  grid-gap: 20px;}<div id="form-query-settings">    <label for="embeddings_weights_form" class="form-label">        <h3>Embeddings Settings</h3></label>    <form id="embeddings_weights_form" class="form-settings">        <div class="form-element">            <label for="id_slider">Id:</label>            <input type="range" min="-1" max="1" step="0.1" id="id_slider" value="0">            <input type="text" class="range-output" id="id" readonly="">        </div>        <div class="form-element">            <label for="category1_slider">category1:</label>            <input type="range" min="-1" max="1" step="0.1" id="category1_slider" value="0">            <input type="text" class="range-output" id="category1_output" readonly="">            <select id="category1Query" class="query-form-class">                <option value="None">None</option>            </select>            <div class="form-element">                <label for="filterbycategory1">Filter by: </label>                <input type="checkbox" id="filterbycategory1" class="query-form-class">            </div>        </div>        <div class="form-element">            <label for="category2_slider">category2:</label>            <input type="range" min="-1" max="1" step="0.1" id="category2_slider" value="0">            <input type="text" class="range-output" id="category2_output" readonly="">            <select id="category2Query" class="query-form-class">                <option value="None">None</option>            </select>        </div>        <button id="reset-button" class="form-element">Reset embeddings</button>    </form></div>我該如何解決？我嘗試在 css 文件中添加 auto 而不是 1fr，但它又產生了另一個不好的視圖。