如何将Grid布局里的HTML输入框向容器顶部移动？

我有4个HTML输入框，设置为每行两个的Grid布局，当前无法调整这些输入框的位置，想要将它们在带白色边框的容器内向上移动，尝试position等属性无效。以下是我的代码及效果截图：

CSS代码 #

.calculator-menu-container {
    background-color: #1b1b23;
    width: 725px;
    height: 150px;
    border: #fff solid 2px;
    border-radius: 10px;
    position: absolute;
    top: 25%;
    margin: 10px;
    display: grid;
    grid-template-columns: 200px 200px;
    grid-template-rows: 75px 75px;
    gap: 0px 225px;
    justify-content: flex-start;
    align-items: flex-start;
}

.mint-price-input > input {
    border: #fff solid 2px;
    background-color: #1b1b23;
    width: 250px;
    height: 30px;
    position: absolute;
    top: 10;
    margin: 10px;
    border-radius: 5px;
    color: #fff;
}

.quantity-input > input {
    border: #fff solid 2px;
    background-color: #1b1b23;
    width: 250px;
    height: 30px;
    margin: 10px;
    border-radius: 5px;
    color: #fff;
}

.gas-limit-input > input {
    border: #fff solid 2px;
    background-color: #1b1b23;
    width: 250px;
    height: 30px;
    margin: 10px;
    border-radius: 5px;
    color: #fff;
}

.custom-interval-input > input {
    border: #fff solid 2px;
    background-color: #1b1b23;
    width: 250px;
    height: 30px;
    margin: 10px;
    border-radius: 5px;
    color: #fff;
}

HTML代码 #

<div class="calculator-menu">
        <div class="calculator-menu-container">
            <div class="mint-price-input">
                <h2>Mint Price</h2>
                <input type="text" placeholder="Eth">
            </div>
            <div class="quantity-input">
                <h2>Quantity</h2>
                <input type="text" placeholder="Units of Tokens">
            </div> 
            <div class="gas-limit-input">
                <h2>Gas Limit</h2>
                <input type="text" placeholder="Units of Gas">
            </div>
            <div class="custom-interval-input">
                <h2>Custom Interval</h2>
                <input type="text">
            </div>
        </div>
    </div>

效果截图 #

调整方案 #

问题根源 #

1. 第一个输入框用了position: absolute，脱离Grid布局的文档流，容器无法控制它的位置，且top:10缺少单位，写法错误。
2. h2标签默认带上下外边距，会占用容器顶部空间，把输入框往下推。
3. Grid容器强制设置75px行高，加上元素默认margin，导致顶部多余空间。

修改后的CSS代码 #

/* 重置h2默认margin，只保留底部间距避免顶起内容 */
h2 {
    margin: 0 0 8px 0;
    color: #fff;
}

.calculator-menu-container {
    background-color: #1b1b23;
    width: 725px;
    height: 150px;
    border: #fff solid 2px;
    border-radius: 10px;
    position: absolute;
    top: 25%;
    margin: 10px;
    display: grid;
    grid-template-columns: 200px 200px;
    grid-template-rows: auto auto; /* 行高自适应内容，减少冗余空间 */
    gap: 10px 225px;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 10px; /* 可选：避免内容贴容器边框 */
}

/* 统一输入框样式，减少重复代码 */
.mint-price-input > input,
.quantity-input > input,
.gas-limit-input > input,
.custom-interval-input > input {
    border: #fff solid 2px;
    background-color: #1b1b23;
    width: 250px;
    height: 30px;
    margin: 0 10px; /* 去掉顶部margin，减少垂直空间 */
    border-radius: 5px;
    color: #fff;
}

/* 移除第一个输入框的绝对定位，回到Grid布局控制 */
.mint-price-input > input {
    position: static;
}

核心调整点 #

• 取消第一个输入框的绝对定位，让它回归Grid布局流。
• 重置h2的默认外边距，消除顶部冗余空间。
• 调整Grid行高为自适应，去掉强制75px的固定行高。
• 统一输入框样式，移除顶部margin，让内容整体上移。

内容的提问来源于stack exchange，提问作者linusehle