Dom manipulation gridTemplateColumns-CodePudding

I am trying to make a grid using DOM manipulation but the grid-template-column method is not working. Any idea how to get this working?

        let container = document.querySelector("#container");
    
Function()
      return (container.style =
            "gridTemplateColumns: auto auto auto auto; Display: grid");

The function is returning display grid correctly.

CodePudding user response：

You can try this for style via DOM manipulation

<script>
    let container = document.querySelector("#container");
    container.style.display = "grid"
    container.style.gridTemplateColumns = "auto auto auto auto"
</script>

CodePudding user response：

This will work:

let container = document.querySelector('.container');

(function styling() {
  container.style =
    'color: green; background-color: yellow; width: 50vw; height: 50vh; display: grid; gap: 2px; grid-template-columns: auto auto auto auto; grid-template-rows: 1fr;}';
})();

<div >
      <span>hello</span>
      <span>hi</span>
      <span>hello</span>
      <span>hey</span>
</div>