Lightning Web Components – Solving 2 Column Width Issue During Iteration

lightning-design-systemlightning-web-componentslwc-wire-adapter

I am not able to get a 2 column fields. I am trying to iterate over a list of 5 field to show all fields with 2 field each in one row.

<div class="slds-grid">
    <div class="slds-col slds-size_2-of-2">
        <template for:each={theList} for:item="currentItem">
            <div key={currentItem}>
                <div class="slds-col slds-size_1-of-2">
                    <lightning-input type="text" label="Enter some text" 
                    class="slds-m-around_xx-small"></lightning-input>
                </div>
            </div>
        </template>
    </div>
</div>

import { LightningElement, track } from 'lwc';

export default class CaseCreateUpdateCMP extends LightningElement {
  @track 
  theList = ['a','b','c','d'];
}

Best Answer

You are using the SLDS grid slightly in a wrong way.

The way it works is, you need to add slds-grid on parent element and child element should have slds-col classes respectively.

Remember, by default SLDS has 12 column grid. To get two columns, add slds-size_1-of-2 to child elements.

To support multiple rows, you need to add slds-wrap to parent element with slds-grid.

Based on above information, below code will help in generating two columns:

<div class="slds-grid slds-wrap">
    <template for:each={theList} for:item="currentItem">
        <div key={currentItem} class="slds-col slds-size_6-of-12">
            <div>
                <lightning-input type="text" label="Enter some text" 
                    class="slds-m-around_xx-small"></lightning-input>
            </div>
        </div>
    </template>
</div>

Check output in playground.

I'd recommend using lightning-layout base component as it makes working with grids easier.

Related Topic