I have one application. form data is coming from backend. sometimes element can be 10 sometimes 3 sometimes 5. I need to put exactly 3 element in a row. if there are more than 3 they should be in next row. How can I achieve this using html/css or bootstrap.

In below example there are 7 elements. so there should be 3 row. in first 2 row there should be 3 element and in last row exactly 1. how can achieve this?

Below is the code. how can I inject the css on same.

 return (
      <div>
        <FormValidator emitter={this.emitter} />
        <div className='react-form-builder-form'>
          <form encType='multipart/form-data' action={this.props.form_action} method={this.props.form_method}>
            { this.props.authenticity_token &&
              <div style={formTokenStyle}>
                <input name='utf8' type='hidden' value='&#x2713;' />
                <input name='authenticity_token' type='hidden' value={this.props.authenticity_token} />
                <input name='task_id' type='hidden' value={this.props.task_id} />
              </div>
            }
            {items}
          </form>
          <div>
            {validationList}
          </div>
        </div>
      </div>
    )
  }

when I applied

   .form__container {
      display: flex;
      flex-wrap: wrap;
    }
    
    .form__container input {
      width: 33.33%;
    }



<div className='form__container'>
          <form encType='multipart/form-data' action={this.props.form_action} method={this.props.form_method}>
            { this.props.authenticity_token &&
              <div style={formTokenStyle}>
                <input name='utf8' type='hidden' value='&#x2713;' />
                <input name='authenticity_token' type='hidden' value={this.props.authenticity_token} />
                <input name='task_id' type='hidden' value={this.props.task_id} />
              </div>
            }
            {items}
          </form>
          <div>

it is coming like below.