[SalesForce] How to dynamically create lightning cards in lwc, with 2 cards in a single row using grid

I want to iterate over records and display those many number of lightning cards. Each row should have 2 cards using grid. I tried using for:each but it is only working on list. Below is my code:

   <div class="slds-grid slds-gutters">
                <div class="slds-col slds-size_1-of-2 slds-p-horizontal_large">
                    <template for:each={contacts} for:item="contact">
                        <li key={contact.Id} >
                            <lightning-card  title="Hello">
                                <lightning-button label="Select" slot="actions"></lightning-button>
                                <p class="slds-p-horizontal_small">{contact.Name}, {contact.Title}</p>
                                <p class="slds-p-horizontal_small">50</p>
                                <p class="slds-p-horizontal_small">50</p>
                            </lightning-card>
                        </li>
                    </template>
                </div>
   </div>

I dont want to iterate over the list but the lightning card.

Best Answer

I have tried this and it works

HTML Code- 

<template>
                    <div class="slds-grid slds-wrap">
                    <template for:each={contacts} for:item="contact">

                        <div key={contact.Id} class="slds-col slds-size_1-of-2">
                            <lightning-card  title="Hello">
                                <lightning-button label="Select" slot="actions"></lightning-button>
                                <p class="slds-p-horizontal_small">{contact.Name}, {contact.Title}</p>
                                <p class="slds-p-horizontal_small">50</p>
                                <p class="slds-p-horizontal_small">50</p>
                            </lightning-card>
                        </div>
                    </template>

   </div>
</template>

JS - 

import { LightningElement, track, api } from 'lwc';

export default class App extends LightningElement {
     contacts = [
        {
            Id: 1,
            Name: 'Amy Taylor',
            Title: 'VP of Engineering',
        },
        {
            Id: 2,
            Name: 'Michael Jones',
            Title: 'VP of Sales',
        },
        {
            Id: 3,
            Name: 'Jennifer Wu',
            Title: 'CEO',
        },
    ];
}

Here is the link for your reference - https://developer.salesforce.com/docs/component-library/tools/playground/9PQGPLDQ5/2/edit

Related Topic