具有不同列宽的网格自动布局答案

【问题标题】：Grid auto-layout with different columns widths具有不同列宽的网格自动布局
【发布时间】：2021-11-11 15:24:16
【问题描述】：

我有一个使用grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); 的网格布局。

.col-6 {
  border: 1px dotted red;
}
.grid_container_prodesc {
    box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  grid-auto-rows: auto;
  justify-content: space-between;       /* since .items have justify-content:inherite*/
  font-size: 0.75rem;
}
textarea {
  height: 3rem;
  width: 100%;
}

<div class="row">
  <div class="col-6">
    <div class="grid_container_prodesc">
      <label for="id_descfr" style="width: min-content;">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>

所以是这样的：

然后textarea在给定宽度的标签下滑动：

但是，当我确实有更多空间时，我希望 textarea 占用更多空间，同时仍保留滑动行为。看到这个CodePen。所以基本上，我希望文本区域占据 col-6 的 3/4，而标签只占 1/4。

我需要保留中间 div (div.w-100) 以包含错误消息。不过我猜它不一定要保持在 100 左右。

有什么想法吗？

【问题讨论】：

您需要使用网格显示还是可以更改？
@Kameron 是的，我开始问自己。最初想使用网格，因为某些用户的桌面屏幕可能非常小，所以我有点希望允许较长的标签滑下。但我想如果整体外观保持相似，基于 flexbox 的解决方案可能会起作用

标签： html css css-grid

【解决方案1】：

因此，如果我正确理解您的问题，这就是您想要的结果。我所做的是放弃 display: grid; 并将其更改为 display: flex; 并添加 flex-direction: column; 以便您的 textarea 框仍然响应。我还在每个col-6 中添加了一个col-12，以确保每个子元素都用完页面(col-6) 每一半的全宽。

.col-6 {
  border: 1px dotted red;
  width: 100%;
}

.grid_container_prodesc {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;       /* since .items have justify-content:inherite*/
  font-size: 0.75rem;
}

textarea {
  height: 3rem;
  width: 90%;
}

.row {
  display: flex;
}

<div class="row">
   <div class="col-6">
      <div class="col-12">
         <div class="grid_container_prodesc">
            <label for="id_descfr" style="width: min-content;">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>
   <div class="col-6">sdf </div>
      <div class="col-12">
      <!-- right half -->
      </div>
</div>

【讨论】：

嗯，但首选的显示仍然是将标签与文本区域内联。网格显示的作用（它在顶部）只是为了适应较小的屏幕......但是，是的，也许 flex 是一种更好的方法。
@logicOnAbstractions 您是否介意提供您想要的外观的标记图像，我会根据它进行调整。
那将是 OP 中的图像
@logicOnAbstractions 这是您正在寻找的行为类型吗？ codepen.io/kameronmayers/pen/RwZYbzB
有点（尽管媒体查询上方的文本区域更大）。虽然老实说我不喜欢媒体查询，但我认为当你扩大规模时它们很笨拙且难以正确管理......我最终在项目级别使用 flex 而不是使用网格来处理更大的块。

【解决方案2】：

所以我最终放弃了卡梅隆回答中的评论中提到的网格方法。问题的核心是我的文本区域有时包含一些相当大的文本块，标签长度不一。他们需要（大部分）内联。我想我可以通过一些自适应网格布局为较小的屏幕节省空间。

话虽如此，在这种情况下，flexbox 更容易实现。我可以说是 25/75，它会缩小和增长。

然后我仍然对较大的块使用网格布局（在完整布局中，我有大块类似显示的元素，所以整个元素块滑到另一个块下面）。

.col-6 {
  border: 1px dotted red;
}

.flex_container_labelled_notes {
  display:flex;
 }


.flex_container_labelled_notes {
    display: flex;
}

.flex_container_labelled_notes > label {
    font-size: 0.75rem;
    flex: 1 1 25%;
}
.flex_container_labelled_notes > div {
    padding: 0 0.25rem 0.25rem 0.25rem;
    flex: 3 3 75%;

}


textarea.notes_prods {
    height: 3rem !important;
    max-height: 5rem;
    width: 100%;
    font-size: 0.75rem;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-6">
      <div class="flex_container_labelled_notes">
        <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">
    </div>
  </div>
</div>

【讨论】：