不同列宽Grid自动布局：实现标签与文本域比例分配宽度且保留自动折行

• 调整Grid容器的列规则，保留auto-fit自动换行特性，新增宽度阈值判断，空间充足时按1:3分配标签和输入域的宽度
• 移除label标签上的行内width: min-content限制，让标签可以自适应分配到的列宽
• 原w-100容器完全保留，后续可直接在容器内追加错误信息，不会破坏布局结构

调整后代码 #

CSS代码 #

.col-6 {
  border: 1px dotted red;
}
.grid_container_prodesc {
  box-sizing: border-box;
  display: grid;
  /* 宽度不足时自动折为单列，单列最小宽度为10rem */
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-auto-rows: auto;
  gap: 0.5rem; /* 可根据设计需求调整间距，不需要可以删除 */
  font-size: 0.75rem;
}
/* 容器宽度可放下两个最小宽度列时，按1:3分配宽度 */
@media (min-width: 20rem) {
  .grid_container_prodesc {
    grid-template-columns: 1fr 3fr;
  }
}
textarea {
  height: 3rem;
  width: 100%;
}

HTML代码 #

仅需移除label的行内宽度样式即可，结构完全不变：

<div class="row">
  <div class="col-6">
    <div class="grid_container_prodesc">
      <label for="id_descfr">French:</label>
      <div class="w-100">
        <textarea name="descfr" cols="40" rows="10" class="notes_prods" maxlength="100" id="id_descfr"> DRIVER DEL , 40W,100-374V, TLWMU40ABK, TLWMBU40ABK</textarea>
      </div>
    </div>
  </div>
  <div class="col-6">sdf </div>    
</div>

效果说明 #

容器宽度≥20rem时，标签占总可用宽度的1/4，文本域占3/4；容器宽度<20rem时自动换行，标签在上、文本域容器在下，完全符合需求。

内容的提问来源于stack exchange，提问作者logicOnAbstractions