CSS网格自动填充总是两列

【问题标题】：CSS grid auto-fill with always two columnsCSS网格自动填充总是两列
【发布时间】：2021-04-20 11:27:03
【问题描述】：

我有一个包含多个标签和输入的网格容器。是否可以将网格配置为始终使用两列自动填充空间，以便标签与其对应的输入断行？

调整大小之前的网格：


Label	Input	Label	Input	Label	Input

调整大小后的网格：


Label	Input	Label	Input
Label	Input

【问题讨论】：

请分享您的代码。
基本上，不，不是。

标签： css layout css-grid autofill

【解决方案1】：

只需将输入包装在其标签内：

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-gap:5px;
}


input{
  width:50%;
  float:right;
}

<div class="grid">
  <label>label <input type="text"></label>
  <label>label <input type="text"></label>
  <label>label <input type="text"></label>
  <label>label <input type="text"></label>
  <label>label <input type="text"></label>
  <label>label <input type="text"></label>
</div>

【讨论】：