How can i make lightning-layout horizontal with nested iterations?

Question

Can someone help me with getting the sections in horizontal format rather than how it is shown in the screenshots? (sorry for the screenshots, i was not able to save the playground file to share)

Answer 1

Just use a <lightning-layout> and <lightning-layout-item>:

<lightning-layout multiple-rows>
  <template for:each={transformed}...>
      <lightning-layout-item size="6">
          <lightning-tile ...

You can use flex mode if you want to have them all on a single line, or specify a size to wrap around as specified (e.g. 6 results in 2 columns, 4 results in 3 columns).