Das HTML-Eingabe-Tag verschiebt CSS-Gitternetzlinien unerwartet

Question

Um mein Problem zu vereinfachen, nehmen wir an, ich habe ein 2x2-CSS-Raster-Div. Ich habe eine Rastervorlage verwendet, um die Größe von 3 Divs (Klassennamen: „btn“, „title“ und „info“) innerhalb dieser 4 Zellen zu ändern, wie im Codeausschnitt unten gezeigt. (Fügen Sie 2 Spalten in der 2. Zeile zusammen, um die 3. Div-Klasse = „Info“ beizubehalten)

Das erste Div (class="btn") hat ein Seitenverhältnis von 1/1. Also stelle ich einfach die Höhe auf 10 VH ein und es wird ein Quadrat.

Meine Frage

Das Problem ist das „input“-Tag im letzten div class="info". Wenn ich kein Tag eingebe, funktioniert alles wie erwartet. Die mittlere Gitterlinie respektiert den Mindestinhalt der ersten Spalte (wie er in Grid-Template-Columns festgelegt ist) und bleibt an der Position ganz links.

Aber wenn ich dieses Eingabe-Tag im letzten Div verwende, verschiebt es die Rastermittellinie unerwartet! Dies ist unerwartet, da die zweite Reihe des Rasters genügend Platz bietet und meiner Meinung nach nicht verschoben werden sollte.

Um das Problem zu sehen, entfernen Sie einfach das Eingabe-Tag aus dem Code-Snippet unten und sehen Sie den Unterschied.

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;
}

<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>

Answer 1

只需将 align-self: start 添加到 info 类

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;
  align-self: start; 
  padding:2px
}

<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>

Answer 2

我找到了答案，

应设置输入标记宽度值。我将其设置为任意百分比并且效果很好

input {
  width: 50%;
}