Grid with Spaces in SLDS

Question

Below is the screenshot of my HTML it looks very ugly(I am not a front end guy) Which SLDS design should i use to make it look good?

    <template>   
  <div class="slds-theme_default" >
    <div class="slds-grid slds-m-top--large ">
      <div class="slds-col slds-p-horizontal_medium slds-size_1-of-2">
        <div class="slds-grid slds-wrap slds-text-align_center custom-container">
                    Customer
                    <c-lookup sobject-name="Account"
                    title="Name"
                    subtitle="AccountNumber"
                    onselected={handleAccountLookup}
                    placeholder="Search Salon..."
                    icon-name="standard:account">
                    </c-lookup>
                  

          <div class="slds-size_1-of-2 ">
                    Division
                    <select class="slds-select">
                        <template for:each={divisionrecords} for:item="division">
                            <option key={division.Division__c} value={division.Division__c}>{division.Division__c}</option>
                        </template>
                    </select>
              </div>


            <div class="slds-size_1-of-2">   
                  Bill To
                  <select class="slds-select">
                      <template for:each={billtobillrecords} for:item="billtobill">
                          <option key={billtobill.Name} value={billtobill.Name}>{billtobill.Name}</option>
                      </template>
                  </select> 
          </div>  

            <div class="slds-size_1-of-2 ">   
                  Ship To
                  <select class="slds-select">
                      <template for:each={shiptorecords} for:item="shipto">
                          <option key={shipto.Name} value={shipto.Name}>{shipto.Name}</option>
                      </template>
                  </select>
             </div>   

             <div class="slds-size_1-of-2 ">  
                Payer
                <select class="slds-select">
                    <template for:each={payerrecords} for:item="payer">
                        <option key={payer.Name} value={payer.Name}>{payer.Name}</option>
                    </template>
                </select>
              </div>

              <div class="slds-size_1-of-2 ">
                Order Type
                <select class="slds-select" name = "optionSelect" >
                  <option value="Normal Order">Normal Order</option>
              </select>         
            </div>
            
          </div>
     </div>
     </div> 
  
   </div> 
</template>

Thansk in Advance

Answer 1

What you're missing is that you need to use a SLDS form. A form is used to provide all the proper alignment for multiple input fields. There is a lot of missing elements and classes, which is why it looks bad. Please refer to the documentation for form elements. I won't fix all your code, but here's an example using Division. Your form starts out with:

                <div class="slds-form" role="list">

And then you build the row:

                    <div class="slds-form__row">

And then the form element:

                        <div class="slds-form__item" role="listitem">
                            <div class="slds-form-element slds-form-element_horizontal slds-is-editing">
                                <label class="slds-form-element__label" for="divisionSelect">Division</label>
                                <div class="slds-form-element__control">
                                    <div class="slds-form-element__control">

And finally the select-specific code:

                                        <div class="slds-select_container">
                                            <select class="slds-select" id="divisionSelect">
                                                <template for:each= {divisionrecords} for:item="division">
                                                    <option key= {division.Division__c} value= {division.Division__c}>{division.Division__c}</option>
                                                </template>
                                            </select>
                                        </div>

Yes, this is a lot of work. However, if you build some more templates/components, you'll find that this can be easily constructed in a modular design, which is one of the design goals of both SLDS and LWC.