How to keep dynamically flowing CSS Multi Columns to a fixed width only using CSS?

Question

I have a main container with an aside. The aside has a fixed width, and I am using CSS Grid to draw this container. Inside the main container, there is a series of columns with dynamic data that automatically flow and align and shift data from one column to the other as needed. This column setup uses CSS Multi Columns, but the columns change width based on the user browser screen size. I would like to find a CSS solution that keeps these columns to a set width. Is there a way to auto expand the last drawn column? OR Is there a way to keep a dynamic multi-column count from expanding? I tried align-items:start, but don't see an effect. Could there be a way through a container to keep the columns to their set width?

@charset "UTF-8";
/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */
html, body {
  padding: 0;
  margin: 0;
}

section {
  padding: 3px;
}

input {
  width: 100%;
  box-sizing: border-box;
}

label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-family: "Miriam Libre";
  font-size: 10px;
  color: #213C3A;
}

.Cols {
  margin: 0;
  padding: 0;
  columns: 40ch;
  column-count: auto;
  column-fill: auto;
  column-rule: 1px dotted #3DB199;
  height: 100vh;
  /* ↓ columns defined by width */
  overflow: auto;
}

li {
  width: 100%;
  display: inline-block;
  padding: 3px;
  border-bottom: 1px solid #D36B66;
}

.G {
  display: grid;
}
.G-wAside {
  grid-template-columns: 1fr minmax(0, 10vw) 10vw;
  gap: 1vw;
}
.G-23 {
  grid-template-columns: 66.66% 33.33%;
}

.HVpZ {
  height: 100%;
}

.WVpZ {
  width: 100%;
}

.filler {
  background: #CCE0E2;
}

.fieldset {
  margin: 5px 3px;
}
.fieldset > * {
  margin: 1px 0;
}
.fieldset label {
  margin-right: 3px;
}

.placeholder-uploader {
  height: 320px;
  width: 100%;
  background: #FAF9E9;
}
.placeholder-grid {
  width: 640px;
  height: 230px;
  background: #FAF9E9;
  position: absolute;
}

.col-container {
  overflow: hidden;
  position: relative;
  height: 100px;
  grid-row-start: span 2;
}

<main class="G HVpZ WVpZ G-wAside">
  <section>
    <ul class="Cols">
      <li>
        <div class="fieldset">
          <label>New List Is Just Long</label>
          <input type="text"></input>
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text"></input>
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text"></input>
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text"></input>
        </div>
        <div class="col-container">
          <div class="placeholder-grid"></div>
        </div>

        <div class="G G-23">
          <div class="fieldset">
            <label>Grid Label DIV Name</label>
            <input type="text"></input>
          </div>
          <div class="fieldset">
            <label>Label Is Just Longest Of All</label>
            <input type="text"></input>
          </div>
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text"></input>
        </div>
      </li>
      <li>
        <div class="col-container">
          <div class="placeholder-grid"></div>
        </div>
      </li>
      <li>
        <p>Praesent vestibulum semper erat ut varius. Donec sed erat ac odio ultricies bibendum et sit amet lectus. In placerat consequat mi, sed commodo mauris ornare non. Integer nibh leo, dignissim in purus at, pretium porta nibh. Nulla vestibulum imperdiet
          sollicitudin. Morbi euismod justo metus, quis imperdiet nunc eleifend ultrices. Donec nec maximus lacus. Aenean tincidunt mattis nisi, eget molestie dolor iaculis vel. Praesent faucibus risus vel arcu tincidunt, id varius orci bibendum. Duis
          posuere est in diam luctus ultrices id in sapien. Fusce bibendum pharetra velit, sit amet commodo diam pharetra ac.</p>
      </li>
    </ul>
  </section>
  <section class="filler">&larr; How to auto-fill this space to keep css multi columns in previous grid item to set width of 40ch? &rarr;</section>
  <section class="bg">Aside</section>
</main>

Answer 1

So if I understand you correctly you have two questions:

1. I would like to find a CSS solution that keeps these columns to a set width.

2. Is there a way to auto expand the last drawn column? OR Is there a way to keep a dynamic multi-column count from expanding?

---

Answer to #1, #2:

If you want a fixed size for a column in your grid then use absolute units for your grid-template-columns property.

Instead of this:

grid-template-columns: 1fr minmax(0, 10vw) 10vw;

Use this:

                          /*Sets the minimal 
                            width to 0 and 
                            fills in the rest 
                            of the available
                            space.
                              ↓              */
grid-template-columns: 40ch minmax(0, 1fr);
                /*      ↑
                   Sets a fixed 
                   width to your 
                   first column */

This way your first column is exactly 40ch in width and the second one (the aside) fills up the rest of the space, which essentially answers your question #2 too.

At the end it looks like this:

@charset "UTF-8";

/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */

html,
body {
  padding: 0;
  margin: 0;
}

input {
  width: 100%;
  box-sizing: border-box;
}

label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-family: "Miriam Libre";
  font-size: 10px;
  color: #213C3A;
}

.Cols {
  margin: 0;
  padding: 0;
  columns: 40ch;
  column-count: auto;
  column-fill: auto;
  column-rule: 1px dotted #3DB199;
  height: 100vH;
  /* ↓ columns defined by width */
  overflow: auto;
}

li {
  width: 100%;
  display: inline-block;
  padding: 3px;
  border-bottom: 1px solid #D36B66;
}

.G {
  display: grid;
}

.G-wAside {
  grid-template-columns: 40ch minmax(0, 1fr);
  gap: 1vw;
}

.G-23 {
  grid-template-columns: 66.66% 33.33%;
}

.HVpZ {
  height: 100%;
}

.WVpZ {
  width: 100%;
}

.filler {
  background: #CCE0E2;
}

.fieldset {
  margin: 5px 3px;
}

.fieldset>* {
  margin: 1px 0;
}

.fieldset label {
  margin-right: 3px;
}

.placeholder-uploader {
  height: 320px;
  width: 100%;
  background: #FAF9E9;
}

.placeholder-grid {
  width: 640px;
  height: 230px;
  background: #FAF9E9;
  position: absolute;
}

.col-container {
  overflow: hidden;
  position: relative;
  height: 100px;
  grid-row-start: span 2;
}

<main class="G HVpZ WVpZ G-wAside">
  <section>
    <ul class="Cols">
      <li>
        <div class="fieldset">
          <label>New List Is Just Long</label>
          <input type="text">
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text">
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text">
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text">
        </div>
        <div class="col-container">
          <div class="placeholder-grid"></div>
        </div>

        <div class="G G-23">
          <div class="fieldset">
            <label>Grid Label DIV Name</label>
            <input type="text">
          </div>
          <div class="fieldset">
            <label>Label Is Just Longest Of All</label>
            <input type="text">
          </div>
        </div>
        <div class="fieldset">
          <label>Label Is Just Long</label>
          <input type="text">
        </div>
      </li>
      <li>
        <div class="col-container">
          <div class="placeholder-grid"></div>
        </div>
      </li>
      <li>
        <p>Praesent vestibulum semper erat ut varius. Donec sed erat ac odio ultricies bibendum et sit amet lectus. In placerat consequat mi, sed commodo mauris ornare non. Integer nibh leo, dignissim in purus at, pretium porta nibh. Nulla vestibulum imperdiet
          sollicitudin. Morbi euismod justo metus, quis imperdiet nunc eleifend ultrices. Donec nec maximus lacus. Aenean tincidunt mattis nisi, eget molestie dolor iaculis vel. Praesent faucibus risus vel arcu tincidunt, id varius orci bibendum. Duis
          posuere est in diam luctus ultrices id in sapien. Fusce bibendum pharetra velit, sit amet commodo diam pharetra ac.</p>
      </li>
    </ul>
  </section>
  <section class="filler">&larr; How to auto-fill this space to keep css multi columns in previous grid item to set width of 40ch? &rarr;</section>
</main>

---

PS:

In your code you are closing your <input> tags. This is not necessary and a syntax error. Therefore, I fixed it in my example code.

---

Edit #1

Hi @Aaron3219. Thanks for your answer. My question is: "Is there a way to keep a dynamic multi-column count from expanding?" And the main issue is in .Cols {} where I have a set width columns: 40ch and column-count: auto. I want to make sure that when these columns display, whether it's one or 10, that they have, strictly, a set width of 40ch that does not respond when the viewport width changes.

As far as I am concerned, no there isn't. The column-width property (which you are using in columns in a shorthand) is a suggestion for the browser for a minimal column width and not an absolute width.

Or, as w3schools put it:

The column-width property specifies the column width.

The number of columns will be the minimum number of columns needed to show all the content across the element.

column-width is a flexible property. Think of column-width as a minimum width suggestion for the browser. Once the browser cannot fit at least two columns at your specified width then the columns will stop and drop into a single column.

But there are, of course, ways to achieve the structure you intend for example with a flexbox or a grid. I am sure that using columns is an approach not suitable for what you intend to do.

Answer 2

I don't know if this will fulfill your needs and perhaps it can be combined with the previous answer.

Since the input column appears fixed in size, why not use a table layout JUST for this section? Probably needs some other CSS changes for the responsive nature of your design.

@charset "UTF-8";

/* https://stackoverflow.com/questions/7785374/how-to-prevent-column-break-within-an-element */

html,
body {
  padding: 0;
  margin: 0;
}

section {
  padding: 3px;
}

input {
  width: 100%;
  box-sizing: border-box;
}

label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  font-family: "Miriam Libre";
  font-size: 10px;
  color: #213C3A;
}

.Cols {
  margin: 0;
  padding: 0;
  columns: 40ch;
  column-count: auto;
  column-fill: auto;
  column-rule: 1px dotted #3DB199;
  height: 100vh;
  /* ↓ columns defined by width */
  overflow: scroll;
}

li {
  width: 100%;
  display: inline-block;
  padding: 3px;
  border-bottom: 1px solid #D36B66;
}

.G {
  display: grid;
}

.G-wAside {
  grid-template-columns: 1fr minmax(0, 10vw) 10vw;
  gap: 1vw;
}

.G-23 {
  grid-template-columns: 66.66% 33.33%;
}

.HVpZ {
  height: 100%;
}

.WVpZ {
  width: 100%;
}

.filler {
  background: #CCE0E2;
}

.fieldset {
  margin: 5px 3px;
}

.fieldset>* {
  margin: 1px 0;
}

.fieldset label {
  margin-right: 3px;
}

.placeholder-uploader {
  height: 320px;
  width: 100%;
  background: #FAF9E9;
}

.placeholder-grid {
  width: 640px;
  height: 230px;
  background: #FAF9E9;
  position: absolute;
}

.col-container {
  overflow: hidden;
  position: relative;
  height: 100px;
  grid-row-start: span 2;
}

#tbl {
  table-layout: fixed;
}

#tbl td {
  min-width: 25em;
  max-width: 25em;
}

#tbl2 {
  table-layout: fixed;
}

#tbl2 td {
  min-width: 25em;
}

ul {
  list-style-type: none;
  cursor: pointer;
}

li {
  display: inline-block;
}


/* default is vertical     display */

<main class="G HVpZ WVpZ G-wAside">
  <section>
    <ul class="Cols">
      <li>
        <table id="tbl" border="1">
          <tr>
            <td>
              <div class="fieldset">
                <label>New List Is Just Long</label>
                <input type="text"></input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="fieldset">
                <label>Label Is Just Long</label>
                <input type="text"></input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="fieldset">
                <label>Label Is Just Long</label>
                <input type="text"></input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="fieldset">
                <label>Label Is Just Long</label>
                <input type="text"></input>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="col-container">
                <div class="placeholder-grid"></div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="G G-23">
                <div class="fieldset">
                  <label>Grid Label DIV Name</label>
                  <input type="text"></input>
                </div>
                <div class="fieldset">
                  <label>Label Is Just Longest Of All</label>
                  <input type="text"></input>
                </div>
              </div>
            </td>
          </tr>
          <tr>
            <td>
              <div class="fieldset">
                <label>Label Is Just Long</label>
                <input type="text"></input>
              </div>
            </td>
          </tr>
        </table>
      </li>
      <!--
   <li>
    <div class="col-container">
     <div class="placeholder-grid"></div>
    </div>
   </li>
// -->
      <li>

        <table id="tbl2" border="1">
          <tr>
            <td>
              <p>Praesent vestibulum semper erat ut varius. Donec sed erat ac odio ultricies bibendum et sit amet lectus. In placerat consequat mi, sed commodo mauris ornare non. Integer nibh leo, dignissim in purus at, pretium porta nibh. Nulla vestibulum
                imperdiet sollicitudin. Morbi euismod justo metus, quis imperdiet nunc eleifend ultrices. Donec nec maximus lacus. Aenean tincidunt mattis nisi, eget molestie dolor iaculis vel. Praesent faucibus risus vel arcu tincidunt, id varius orci
                bibendum. Duis posuere est in diam luctus ultrices id in sapien. Fusce bibendum pharetra velit, sit amet commodo diam pharetra ac.</p>
            </td>
          </tr>
        </table>

      </li>
    </ul>
  </section>
  <section class="filler">
    &larr; How to auto-fill this space to keep css multi columns in previous grid item to set width of 40ch? &rarr;
  </section>
  <section class="bg">Aside</section>
</main>