CSS Grid布局问题：实现Input占剩余空间、Select固定宽度的自适应布局

核心思路 #

利用CSS :has() 选择器检测按钮是否可见，动态切换网格列模板；同时确保<select>始终保持25%宽度，<input>自动填充剩余空间。

修正后的代码 #

CSS 部分

/* 基础布局：无按钮时，input占75%，select占25% */
.input-grid {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: 75% 25%;
    grid-column-gap: 0;
}

/* 当按钮可见时，切换为三列布局：input50% + select25% + button25% */
.input-grid:has(.input-grid-btn:not([hidden])) {
    grid-template-columns: 50% 25% 25%;
}

/* 可选：确保表单元素填充满网格单元格 */
.input-grid-input,
.input-grid-select,
.input-grid-btn {
    width: 100%;
    box-sizing: border-box;
}

HTML 部分（保持原结构即可）

<div class="input-grid">
  <input type="text" class="input-grid-input" value="input" data-form-type="other">

  <select class="input-grid-select" data-form-type="other">
    <option value="Select Value 1">Select Value 1</option>
    <option value="Select Value 2" disabled="disabled">Select Value 2</option>
  </select>

  <button class="btn input-grid-btn btn--primary" hidden="hidden">
    Check Availability
  </button>
</div>

原代码问题分析 #

• 你之前写的grid-template-columns: minmax(50%, 75%) 25% minmax(0, 25%)是固定三列结构，即便按钮隐藏，第三列仍会占据空间，导致input无法自动扩展到75%。
• 手动指定grid-column的方式没必要，因为grid-auto-flow: column会按元素顺序自动分配列位置。

兼容性说明 #

:has()选择器目前已被现代浏览器（Chrome 105+、Firefox 121+、Safari 15.4+）支持，如果需要兼容旧版浏览器，可以通过给容器添加额外类名（比如has-button）来替代：

.input-grid.has-button {
    grid-template-columns: 50% 25% 25%;
}

然后通过JS控制按钮显示/隐藏时，给.input-grid添加/移除has-button类。

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