<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.8.7/dist/semantic.min.css">

<div id="page" class="html ui">

  <div class="ui attached segment">
    Requirement: Lay out an unknown quantity of inputs on a form where each input is set at 4-wide and inputs should adhere to col-widths, wrapping at 16.
  </div>
  <div class="ui segments">
    <h5 class="ui top attached header">
      1. Simple form-fields-field-input, does not wrap at fifth field - fail.
    </h5>
    <div class="ui attached segment">
      <div class="ui form">
        <div class="fields">
          <div class="four wide field">
            <label>Input #1</label>
            <input type="text">
          </div>
          <div class="four wide field">
            <label>Input #2a</label>
            <input type="text">
          </div>
          <div class="four wide field">
            <label>Input #3</label>
            <input type="text">
          </div>
          <div class="four wide field">
            <label>Input #4</label>
            <input type="text">
          </div>
          <div class="four wide field">
            <label>Input #5</label>
            <input type="text">
          </div>
        </div>
      </div>
    </div>

  </div>

  <div class="ui segments">
    <h5 class="ui top attached header">
      2. Grid-based form - using one row gives uneven vertical spacing for wrapped inputs
    </h5>
    <div class="ui attached segment">

      <div class="ui  form">

        <div class="ui equal width  left aligned stackable grid">
          <div class="row">
            <div class="four wide column">
              <div class="field">
                <label>Input #1</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #2</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #3</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #4</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>

            <div class="four wide column">
              <div class="field">
                <label>Input #5</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #6</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #7</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>

  <div></div>

  <div class="ui segments">
    <h5 class="ui  attached segment">
      3. Grid-based form - using two rows gives better vertical spacing but requires multiple rows / special output logic
    </h5>
    <div class="ui attached segment">

      <div class="ui  form">

        <div class="ui equal width  left aligned stackable grid">
          <div class="row">
            <div class="four wide column">
              <div class="field">
                <label>Input #1</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #2</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #3</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #4</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
          </div>
          <div class="row">
            <div class="four wide column">
              <div class="field">
                <label>Input #5</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #6</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #7</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>

  <div class="ui segments">
    <h5 class="ui top attached header">
      4. Grid-based form but no rows - evenly spaced and no special output logic, this is the best dynamic solution
    </h5>
    <div class="ui attached segment">

      <div class="ui  form">

        <div class="ui equal width  left aligned stackable grid">
          <div class="row">
            <div class="four wide column">
              <div class="field">
                <label>Input #1</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #2</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #3</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #4</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
          </div>
          <div class="row">

            <div class="four wide column">
              <div class="field">
                <label>Input #5</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #6</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>
            <div class="four wide column">
              <div class="field">
                <label>Input #7</label>
                <input type="text" placeholder="4 Wide">
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>
</div>
#page  {
  padding: 20px;
  margin: 20px;
}
.xcolumn {
  background-color: silver;
  min-height: 40px;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.8.7/semantic.min.js