Grid auto-layout with different columns widths

Question

I have a grid layout using 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>

So something like this:

Then the textarea slides under the label at the given width:

However, when I do have more room, I'd like the textarea to take up more space, while still preserving the sliding behavior. See this CodePen. So basically, I'd like the text area to take up say 3/4 of the col-6, and the label just 1/4.

I need to keep the intermediate div (div.w-100) for error messages to be contained. It doesn't have to stay w-100 though I guess.

Any ideas?

Answer 1

So I ended up dropping the grid approach as mentioned in the comment from Kameron's answer. The core of the issue was that I had text areas containing some sizeable chunks of texts at time, with labels of varying lenghts. They need to be (mostly) inline. I thought I could save space for smaller screens with some adaptable grid layout.

That being said, flexbox is much easier to implement in this case. I can allow say 25/75, it shrinks & grows decently.

Then I still used the grid layouts for larger blocks (in the full layout, I have chunks of similarly displayed elements, so the whole chunks of element slide under the other block instead).

.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>

Answer 2

So if I am understanding your question correctly this is the result you are going for. What I did was ditch the display: grid; and change it to a display: flex; and add a flex-direction: column; so that your textarea box is still responsive. I also added a col-12 within each of your col-6 to ensure that each child element is using up the full-width of each half of the page (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>