為了簡化我的問題，假設我有一個2x2 CSS網格div。我用網格模板調整3 div(用類名:& quotbtn & quot，& quot標題& quot，并且& quot信息& quot)在這4個單元格中，如下面的代碼片段。(合并第二行中的兩列以保留第三個div class = & quot信息& quot)

第一個div(class = & quot；btn & quot)的長寬比為1/1。所以我就把它的高度設為10vh，它就變成了一個正方形。

我的問題 問題是& quot輸入& quot最后一個div內的標記class = & quot信息& quot。 如果我沒有輸入標簽，那么一切都按預期工作。中間的網格線考慮第一列的最小內容(如在網格-模板-列中設置的那樣),并保持在最左邊的位置。

但是如果我在最后一個div中使用input標記，它會意外地移動網格中線！這是意外的，因為網格的第二行有足夠的空間放置它，我認為它不應該被移動。

要發現問題，只需從下面的代碼片段中刪除輸入標簽，并查看不同之處。

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>

只需將align-self: start添加到信息類中

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>

我找到了答案，

應該設置輸入標簽寬度值。我將它設置為任意百分比，它工作正常

input {
  width: 50%;
}