顶级项不是div时CSS网格格式不一致

当顶级子项是输入而不是div时，CSS网格布局呈现不同的原因是什么？我怎样才能解决这个问题，使它们一致地呈现

CSS:

将div作为子级的CSS网格：

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <div class="item-3">Item 3</div>
  <div class="item-4">Item 4</div>
</div>

项目1
项目2
项目3
项目4

将一个子项作为输入的CSS网格：

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <input type="text" class="item-3" value="item 3" />
  <div class="item-4">Item 4</div>
</div>

项目1
项目2
项目4

始终明确定义大小，否则自动大小将完成工作，并且输入与div不同

.container{
显示：网格；
网格模板行：1fr；
网格自动列：1fr；/*1列的大小*/
网格自动流：列；
网格行间距：1rem；
栅柱间隙：1rem；
边缘底部：1rem；
}
.容器>*{
边框：2个蓝色虚线；
}
.项目-1{
格构柱：1/5跨；
}
.项目-2{
网格柱：6；
}
.项目-3{
格构柱：7/4跨；
}
.项目-4{
格构柱：11/1跨；
}

将div作为子项的CSS网格： 项目1 项目2 项目3 项目4 将一个子项作为输入的CSS网格： 项目1 项目2 项目4

---

噢，太棒了，谢谢你的解释，@Temani Afif，我没有意识到我忽略了这一点

<div class="container">
  <div class="item-1">Item 1</div>
  <div class="item-2">Item 2</div>
  <input type="text" class="item-3" value="item 3" />
  <div class="item-4">Item 4</div>
</div>