CSS Grid中input标签导致网格中线意外偏移问题求助

问题场景 #

我用CSS Grid实现了一个2×2的容器，通过grid-template布局三个元素：.btn（正方形，aspect-ratio:1/1+height:10vh）、.title、.info（合并第二行两列）。

出现的异常：

• 当.info内无input标签时，第一列按min-content正常收缩，布局完全符合预期
• 一旦在.info里添加input，网格第一列会意外偏移，明明第二行有足够空间容纳input，这个偏移完全不合理

代码片段 #

CSS代码 #

div.contain {
  display: grid;
  grid-template-rows: fit-content(20%) 45%;
  grid-template-columns: min-content auto;
  grid-template-areas:
        "btn title"
        "info info";
  gap: 10px;
}

.btn {
   grid-area: btn;
   aspect-ratio: 1 / 1;
   height: 10vh;
   border: 1px solid;
}

.title {
   grid-area: title; 
   border: 1px solid;
}

.info {
  border: 1px solid;
  grid-area: info;
}

HTML代码 #

<div class="contain">
  <div class="btn">Btn</div>
  <div class="title">Title</div>
  <div class="info">
    Normal Text
    <div>another div</div>
    <input>
  </div>  
</div>

原因分析 #

这是CSS Grid的全局列尺寸计算规则导致的：跨多列的元素（这里的.info）会影响所有列的尺寸计算。当.info里有input时，浏览器会默认保留input的最小宽度需求，进而强制拉伸第一列的min-content尺寸——哪怕.info在第二行，Grid的列宽是全局统一计算的，所以会出现第一列偏移的问题。

解决方案 #

以下三种方法都可以解决这个问题，按需选择：

1. 给.info添加min-width:0，打破浏览器对跨列元素的最小宽度限制：

.info {
  border: 1px solid;
  grid-area: info;
  min-width: 0;
}

2. 明确第一列的宽度约束，比如用fit-content()匹配.btn的尺寸：

div.contain {
  grid-template-columns: fit-content(10vh) auto; /* 10vh和.btn的height一致 */
}

3. 让input自适应容器宽度，避免触发Grid的全局尺寸计算：

.info input {
  max-width: 100%;
}

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