slds-grid system not working as expected

Question

My requirement was to dynamically render div's in an grid horizontally once a platform event is received to the component.

Here is my code and what i am doing as of now :

HTML :

    <!--The Grid for voting cards starts here-->
<div class={voteGrid} data-id="voteGrid"></div>

JS:

  handleVoteCards(name, storyPoints) {
console.log(">>>Name and story points>>" + name + ">>>>" + storyPoints);
let grid = this.template.querySelector('[data-id="voteGrid"]');
this.voteGrid =
  "slds-grid slds-p-around_medium lgc-bg slds-show slds-var-m-around_medium";
console.log(">>>Grid" + grid.innerHTML);
grid.innerHTML =
  grid.innerHTML +
  `<div class="slds-col slds-var-m-around_small slds-size_3-of-12" style="height: 4rem; background: lightblue">${name} - ${storyPoints}</div>`;}

Here, I expect that whenever the handleVoteCards function is called, the div's should appear horizontally, but they for some reason are appearing verticaly. Can someone tell me why this is ?

Answer 1

You should remove 'slds-show' class from your div its adding display:block; property to your div which takes the full width available, let the vote grid be following

this.voteGrid =
  "slds-grid slds-p-around_medium lgc-bg  slds-var-m-around_medium";

Also to wrap to next line when overflow add following to div

<div class={voteGrid} data-id="voteGrid" style=" flex-wrap: wrap;" ></div>