How can I show more than 3 cards in LWC?

Question

My page looks like this (I can see only 3 cards but there are more) https://i.stack.imgur.com/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>

Answer 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