0

My page looks like this (I can see only 3 cards but there are more) https://i.sstatic.net/wnjw7.jpg

How could I change this to show as many cards as possible? Should I use some attribute from SLDS or should I use CSS for this?

My code looks like this:

<template>

    <lightning-card icon-name={icon} title={recordDetails.Name} variant="Narrow">
        <lightning-button label="View" onclick={handleViewDetails} slot="actions"></lightning-button>

        <div class="slds-p-horizontal_small"> <!-- -->

            <lightning-tabset>

                <lightning-tab label="Description">
                    <div class="card-content">

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

                                <div key={info.label} class={info.class}>
                                    <lightning-icon icon-name={info.icon} alternative-text={info.label}
                                        size="x-small" title={info.label}></lightning-icon>
                                    <b class="slds-m-horizontal_xx-small">{info.label}</b>
                                    <span class="slds-m-horizontal_xx-small">{info.value}</span>
                                </div>
                            </template>
                        </div>

                        <lightning-formatted-rich-text value={jobDescription}>
                        </lightning-formatted-rich-text>

                    </div>
                </lightning-tab>

                <template if:true={relatedJobApplications}>
                    <lightning-tab label={label.Applications}>
                        <div class="card-content">

                            <template for:each={relatedJobApplications} for:item="jobApplication">
                                <c-hmp-job-card-application key={jobApplication.Id} job-application={jobApplication}>
                                </c-hmp-job-card-application>
                            </template>

                        </div>
                    </lightning-tab>
                </template>
            </lightning-tabset>

        </div>
    </lightning-card>
</template>
1
  • The Scrollable classes in SLDS may help? Aside from that, you can also use standard css if you desire.
    – sfdcfox
    Commented May 2, 2022 at 16:24

1 Answer 1

1

Add a grid container by adding slds-grid to an HTML element

<div class="slds-grid slds-wrap slds-col slds-size_1-of-3 slds-p-horizontal_x-small slds-p-vertical_x-small">

This line is actually instructing the lighting platform to consider this element as grid and determine the size of its column dynamically

SLDS GRID LINK

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .