Display array of objects in two columns

Question

I want to display array of objects in 2 columns. what is the easiest method to display the list as two columns?

const columns = [
    {
      subHeading: "A",
      subText: ["1", "2"]
    },
    {
      subHeading: "B",
      subText: ["3", "4"]
    },
    {
      subHeading: "C",
      subText: ["5", "6"]
    },
    {
      subHeading: "D",
      subText: ["7", "8"]
    }
  ];

Desired display on LWC Page:

A B
C D

Answer 1

Although the question is a bit unclear , I'll try to provide a general approach.

We can achieve the desired result using a combination of lightning-layout & setting its container width as below :

<div class="container">
      <lightning-layout multiple-rows="true">
        <template for:each={columns} for:item="col">
          <lightning-layout-item key={col.subHeading} padding="horizontal-small">
            <p>{col.subHeading}</p>
          </lightning-layout-item>
        </template>
      </lightning-layout>
  </div>

CSS :

.container {
  width: 5vw;
}

You can try various combinations : https://developer.salesforce.com/docs/component-library/bundle/lightning-layout-item/example