Using slds grid I want to display 3 lightning cards in one row

Question

I have a parent component sending the values for lightning card one by one to the child component. The child component contains the lightning card. I want to display 3 cards in one row but all the cards are getting displayed on one row itself. Below is my code.

Parent component:

<div class="slds-grid slds-wrap">
     <template for:each={reportMessage} for:item="summaryField">
           <div key={summaryField.fieldName}>
               <c-q-r-report-summary-item title={summaryField.fieldName} value={summaryField.totalRecords}></c-q-r-report-summary-item>
           </div>
     </template>
</div>

Child Component:

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

<div class="cardShadow">
                <lightning-card>
                    <div slot="title" class="slds-align_absolute-center slds-border_bottom slds-text-heading_medium">
                        {title} 
                    </div>
                    <p class="slds-p-horizontal_small slds-align_absolute-center slds-text-heading_large ">{value}</p>
               </lightning-card>
           </div>
        </div>
    </template>

Answer 1

In the child component, the following line of code (line #2) is sort of pointless for your need:

<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, while you have already defined the parent component element with slds-grid. The CSS & HTML in the child component should be written only for its self contained design i.e., for each box or card that is displaying the name and value.

The solution to your problem would be to get rid of the aforementioned HTML element in the child component and write the parent component HTML as

<div class="slds-grid slds-wrap">
     <template for:each={reportMessage} for:item="summaryField">
           <div class="slds-size_1-of-3" key={summaryField.fieldName}>
               <c-q-r-report-summary-item title={summaryField.fieldName} value={summaryField.totalRecords}></c-q-r-report-summary-item>
           </div>
     </template>
</div>

or

<div class="slds-grid slds-wrap">
     <template for:each={reportMessage} for:item="summaryField">
           <div key={summaryField.fieldName}>
               <c-q-r-report-summary-item class="slds-size_1-of-3" title={summaryField.fieldName} value={summaryField.totalRecords}></c-q-r-report-summary-item>
           </div>
     </template>
</div>

Lightning platform reads this parent component as follows:

1. Outermost DIV element to be considered as grid (or can be divided into columns)
2. slds-size_1-of-3 in one of the inner element instructs that the outermost grid should be divided into 3 columns and this inner element should occupy only 1 column width.