我正在使用Vue3和TailwindCSS,想创建一个带有动态
给出以下纯HTML/JS示例。
grid-cols-{n}
类的网格。我知道TailwindCSS默认支持最多12列,但我无法自定义主题,因为列数完全是动态的。给出以下纯HTML/JS示例。
const amountOfItemsPerRow = 16;
const container = document.getElementById("container");
for (let i = 0; i < amountOfItemsPerRow; i++) {
const item = document.createElement("div");
item.innerText = i;
container.appendChild(item);
}
container.classList.add(`grid-cols-${amountOfItemsPerRow}`); // this doesn't work if the value is greater than 12
<script src="https://cdn.tailwindcss.com"></script>
<div id="container" class="grid"></div>
如果amountOfItemsPerRow
小于或等于12,这段代码可以正常工作,否则CSS将出现问题。
我需要编写代码来设置纯CSS以解决此问题,还是有动态的Tailwind解决方案?
另一种方法:
根据文档,我尝试替换以下行:
container.classList.add(`grid-cols-${amountOfItemsPerRow}`);
使用
container.classList.add(`grid-template-columns:repeat(${amountOfItemsPerRow},minmax(0,1fr))`);
我们曾尝试采用“本地化”方法,但并没有帮助到我们。