Dom操作网格TemplateColumns

Question

我正在尝试使用DOM操作创建网格，但网格模板列方法不起作用。你知道怎么做吗？

let container = document.querySelector("#container");

Function()
return (container.style =
"gridTemplateColumns: auto auto auto auto; Display: grid");

该功能正在正确返回显示网格。

Answer 1

这将起作用：

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 class="container">
<span>hello</span>
<span>hi</span>
<span>hello</span>
<span>hey</span>
</div>

Answer 2

您可以通过DOM操作来尝试这种风格

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