html - 具有不同列宽的网格自动布局

Question

我有一个使用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) 以包含错误消息。虽然我猜它不一定要保持 w-100。

有任何想法吗？

标签： htmlcsscss-grid

Answer 1

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