当顶级元素不是 div 时，CSS 网格格式不一致

Question

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

CSS:

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-template-columns: auto;
  grid-auto-flow: column;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  margin-bottom: 1rem;
}

.container > * {
  border: 2px dashed blue;
}

.item-1 {
  grid-row: 1;
  grid-column: 1 / span 5;
}

.item-2 {
  grid-row: 1;
  grid-column: 6;
}

.item-3 {
  grid-row: 1;
  grid-column: 7 / span 4;
}

.item-4 {
  grid-row: 1;
  grid-column: 11 / span 1;
}

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

将一个 child 作为输入的 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>

Answer 1

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

.container {
  display: grid;
  grid-template-rows: 1fr;
  grid-auto-columns: 1fr; /* the size of 1 column */
  grid-auto-flow: column;
  grid-row-gap: 1rem;
  grid-column-gap: 1rem;
  margin-bottom: 1rem;
}

.container>* {
  border: 2px dashed blue;
}

.item-1 {
  grid-column: 1 / span 5;
}

.item-2 {
  grid-column: 6;
}

.item-3 {
  grid-column: 7 / span 4;
}

.item-4 {
  grid-column: 11 / span 1;
}

CSS Grid with divs as children:

<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>
CSS Grid with one child instead as an input:

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