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>