[SalesForce] LWC- template for loop – having each loop values appear on a different column

I am having trouble aligning every single iteration of the values of the for loop appear on columns side by side. This is the output I have now. In the below picture I want to have Alberta and its value below to appear side to British Columbia.

enter image description here

The below is the way I am trying to have the values displayed.
enter image description here

Here is my HTML & CSS:

  HTML:  
  <div>
    <lightning-card>
      <h1 slot="title" style="font-style:normal; font-family:'Candara';">
        <template for:each={provinces} for:item="province">
          <div class="province-stats" key={province.key}>
            <div>{province.province}<br>
              {province.internetOfferings}
            </div>
          </div>
        </template>
      </h1>
      <div class="map-root" lwc:dom="manual"></div>
    </lightning-card>
  </div>


  CSS:
  .province-stats {
      display: grid;
      grid-template-columns: 24px 24px 24px 24px;
  }

Best Answer

Why don't you try something simpler like building this out to use the lightning-layout? Inside the layout you can specify the details of each element or even include a new component for each one. you can also explore making a component and using it as a table column itself, this one i prefer.

Using lightning-layout

<div>
    <lightning-card>
      <h1 slot="title" style="font-style:normal; font-family:'Candara';">
        <lightning-layout multiple-rows="false" >
            <template for:each={provinces} for:item="province">
                <lightning-layout-item size="3" key={province.key} >
                    <p>{province.province}</p>
                    <p>{province.internetOfferings}</p>
                </lightning-layout-item>
            </template>
        </lightning-layout>
      </h1>
      <div class="map-root" lwc:dom="manual"></div>
    </lightning-card>
</div>

Using custom components with :host css 

<!-- detail HTML -->
<template>
    <div class="slds-text-heading_medium" >{province.province}</div>
    <div class="slds-text-title">{province.internetOfferings}</div>
</template>

// The detail css
:host {
  display: table-column;
  width: 24px !important;
}

<!-- accessing in your loop -->
<div>
    <lightning-card>
        <!-- your output -->
        <c-my-custom-table provinces={provinces} ></c-my-custom-table>
        <div class="map-root" lwc:dom="manual"></div>
    </lightning-card>
</div>

<!-- Table element -->
<template>
    <tbody>
        <tr>
            <!-- each of your elements will appear as an equally spaced column now
            <template for:each={provinces} for:item="province">
                <c-my-custom-column province={province} key={province.key} ></c-my-custom-column>
            </template>
        </tr>
    </tbody>
</template>

// row element CSS
:host {
    display: table;
}
Related Topic