putting specifc number of element in a row in html/css

Question

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 (
      
        
        
          
            { this.props.authenticity_token &&
              
                
                
                
              
            }
            {items}
          
          
            {validationList}
          
        
      
    )
  }

when I applied

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




          
            { this.props.authenticity_token &&
              
                
                
                
              
            }
            {items}

it is coming like below.

user_18330800 · Answer

You have to add these styles to the parent of form inputs.

.form__container {
   display: flex;
   flex-wrap: wrap;
}

and assign a width to your input field.

.form__container input {
   width: 33.33%;
}

user_11126871 · Answer

You can use flex box to achieve this.

you can apply css in this manner to Outer and Inner elements:

.outer-container { display: flex; }
.inner-element { width: 33.33% }

In your case outer element will be the form container and inner element will be the input elements.

user_5009514 · Answer

You could try using bootstrap with the grid system, using a container div with a row class, with several elements justify alignment and have divs with the col-4 class each, by mapping your array, in this case items, and returning this jsx to populate your data in rows of 3 elements that will be fairly distributed in the existing area of your items rendering section. Let me provide with a quick example of the mapping of this bootStrap approach. Hope this helps!

      

   
   
      
         { this.props.authenticity_token &&
         
            
            
            
         }
         
            
            {items.map((item, ind) =>(  
            
               items.label
               
            
            ));}
         
   
   
   
   
      {validationList}

putting specifc number of element in a row in html/css

3 Answers