CSS网格输入大小增加答案

【问题标题】：css grid input size increaseCSS网格输入大小增加
【发布时间】：2020-09-01 07:04:23
【问题描述】：

我有几个关于 CSS 网格的问题。

为什么标签和输入的大小与网格的行高匹配并填充？
为什么标签和输入元素在css网格中显示为块，而在简单的div中显示为内联元素？
为什么浏览器会忽略将其显示覆盖为内联？

这是一个例子：

.wrapper {
  background-color: purple;
  display: grid;
  grid-template-columns: 1fr 4rem 4rem 1fr;
}

.wrapper > label {
  display: inline;
   grid-column: 2;
  background-color:green;
}
.wrapper > input[type=checkbox] {
   grid-column: 3;
  border: 1px solid red;
  background-color: gray;
}

.wrapper > input[type=text] {
   grid-column: 4;
 outline: 2px solid yellow;
}

.simple {
  width: 50px;
  height: 100px;
  background-color: blue;
}

.simple > label {
    height: 50px;
}


.wrapper2 {
  background-color: gray;
  display: grid;
   grid-template-rows: 100px;
    grid-auto-rows: 100px;
  grid-template-columns: 1fr 8rem 8rem 1fr;
}

.wrapper2 > label {
   grid-column: 2;
  display: inline;
  background-color:green;
}
.wrapper2 > input[type=checkbox] {
   grid-column: 3;
  background-color:yellow;
  border: 1px solid gray;
}

.wrapper2 > input[type=text] {
   grid-column: 4;
  outline: 2px solid yellow;
  border: 1px solid gray;
}

<div class="wrapper">
  <label for="cb">Long Label</label>
  <input id="cb" type="checkbox">
    <input id="t3" type="text">
</div>

<div class="simple">
  <label for="cb2">Long Label</label>
  <input id="cb2" type="checkbox">
  <input id="t2" type="text">
</div>
  
 <div class="wrapper2">
  <label for="cb3">Long Label</label>
  <input id="cb3" type="checkbox"> 
   <input id="t3" type="text"> 
</div>

【问题讨论】：

标签： css css-grid

【解决方案1】：

1.为什么标签和输入的大小与网格的行高匹配并填充？

因为高度是auto，所以在CSS Grid 中auto 被拉伸。因为对齐属性align-items和justify-content的默认值stretch，我们可以覆盖这个：

align-items:flex-start 在块轴（垂直）
justify-content:flex-start 在内联轴（水平）

[grid] {
  background: orange;
  display: inline-grid;
  grid-template-columns: 50px;
  grid-template-rows: 50px;
}

[grid]>div {
  background: red;
  height: auto;
}

[fix] {
  align-items: flex-start;
  justify-items: flex-start;
}

[grid]>[notAuto] {
  height: 30px;
  width: 30px;
}

<h4>align-items: stretch;  justify-items: stretch; (default)</h4>
<div grid>
  <div>Text</div>
</div>

<h4>align-items: flex-start;  justify-items: flex-start;</h4>
<div grid fix>
  <div>Text</div>
</div>


<h4>When width/height are specified (not auto)</h4>
<div grid>
  <div notAuto>Text</div>
</div>

注意：我们可以在 Grid 项目而不是容器上使用 -self 对应的 justify-self align-self 覆盖特定元素上的该行为

2。为什么标签和输入元素在css网格中显示为块，而在简单的div中显示为内联元素？

3.为什么浏览器会忽略将其显示覆盖为内联？

spec 说：

网格项的display 值为blockified：如果生成网格容器的元素的流入子项的指定显示是内联级值，则计算为其块级等效值。

【讨论】：